feat(ui): Enhance AppClickUserData management for proper cleanup and tracking

- Introduced a new helper function to parse ISO 8601-like timestamps into epoch seconds.
- Improved the handling of timezones, allowing for better accuracy in arrival time calculations.
- Refactored arrival data fetching to ensure UI updates only when data changes.
- Enhanced error handling for arrival data retrieval, providing clearer messages for various error states.
- Updated formatting functions for arrival times to handle both relative and absolute formats more robustly.

dependencies.lock

@@ -51,6 +51,16 @@ dependencies:
     source:
       type: idf
     version: 5.5.2
+  joltwallet/littlefs:
+    component_hash: 1808d73e99168f6f3c26dd31799a248484762b3a320ec4962dec11a145f4277f
+    dependencies:
+    - name: idf
+      require: private
+      version: '>=5.0'
+    source:
+      registry_url: https://components.espressif.com/
+      type: service
+    version: 1.20.3
   lvgl/lvgl:
     component_hash: 17e68bfd21f0edf4c3ee838e2273da840bf3930e5dbc3bfa6c1190c3aed41f9f
     dependencies: []
@@ -63,7 +73,8 @@ direct_dependencies:
 - espressif/esp_lcd_touch_gt911
 - espressif/esp_lvgl_port
 - idf
+- joltwallet/littlefs
 - lvgl/lvgl
-manifest_hash: 2010806782b4d2486b02b853afa44a545717d3d0593eb60f9aa6e5c696270f8f
+manifest_hash: 534b6804ed0fcb2390bfe237db938fe86c9ba00561b361035a89dde4847214f2
 target: esp32s3
 version: 2.0.0

main/CMakeLists.txt

@@ -1,5 +1,20 @@
-set(requires esp-tls spi_flash nvs_flash esp_event esp_netif esp_http_client esp_wifi esp_psram esp_lvgl_port)
+set(requires esp-tls spi_flash nvs_flash esp_event esp_netif esp_http_client esp_http_server esp_wifi esp_psram esp_lvgl_port)
-file(GLOB SRCS "main.cpp" "*.cpp" "*.c" "**/*.cpp" "**/*.cpp" "ui/**/*.cpp" "ui/**/*.c" "external/**/*.cpp" "external/**/*.c")
+
+# Start the source list with the known root source
+set(SRCS "${CMAKE_CURRENT_LIST_DIR}/main.cpp")
+# Delegate source collection to per-directory CMakeLists (non-recursive)
+set(SUBDIRS "display" "external" "ui" "io" "network" "info" "common" "font")
+foreach(dir IN LISTS SUBDIRS)
+    if(EXISTS "${CMAKE_CURRENT_LIST_DIR}/${dir}/CMakeLists.txt")
+        include("${CMAKE_CURRENT_LIST_DIR}/${dir}/CMakeLists.txt")
+    else()
+        file(GLOB DIR_SRCS "${CMAKE_CURRENT_LIST_DIR}/${dir}/*.c" "${CMAKE_CURRENT_LIST_DIR}/${dir}/*.cpp")
+        if(DIR_SRCS)
+            list(APPEND SRCS ${DIR_SRCS})
+        endif()
+    endif()
+endforeach()
+
 
 
 # Path to the source JSON in this component

main/common/CMakeLists.txt

@@ -0,0 +1 @@
+# common/ currently contains headers; no sources to add by default

main/common/system_context.h

@@ -0,0 +1,30 @@
+#pragma once
+
+class NetworkHandler;
+class WifiHandler;
+
+/**
+ * @brief System context providing access to global system components
+ */
+class SystemContext {
+public:
+  static SystemContext& instance() {
+    static SystemContext context;
+    return context;
+  }
+
+  void set_network_handler(NetworkHandler* handler) {
+    network_handler_ = handler;
+  }
+
+  NetworkHandler* get_network_handler() const {
+    return network_handler_;
+  }
+
+private:
+  SystemContext() = default;
+  SystemContext(const SystemContext&) = delete;
+  SystemContext& operator=(const SystemContext&) = delete;
+
+  NetworkHandler* network_handler_ = nullptr;
+};

main/display/CMakeLists.txt

@@ -0,0 +1,5 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/eink_display_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/epd_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/lvgl_handler.cpp"
+)

main/display/eink_display_handler.cpp

@@ -13,22 +13,31 @@
 #define MINIMUM_POWER_ON_DELAY_MS 100
 #define PARTIAL_REFRESH_THRESHOLD 5  // Full refresh every N partial refreshes
 
-static uint8_t* DRAW_BUFFER; // 1 bit per pixel
+// Static flag to prevent multiple instances (these buffers are large, only one display allowed)
-static uint8_t* OLD_DRAW_BUFFER; // 1 bit per pixel
+static bool display_instance_exists = false;
-static uint8_t* black_data;
-static uint8_t* white_data;
 
 EInkDisplayHandler::EInkDisplayHandler() {
-  black_data = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+  if (display_instance_exists) {
-  white_data = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+    ESP_LOGE(TAG, "Only one EInkDisplayHandler instance allowed!");
-  DRAW_BUFFER = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+    return;
-  OLD_DRAW_BUFFER = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+  }
-  memset(black_data, 0xFF, DISPLAY_BUFFER_SIZE); // eink uses 1 for black
+  display_instance_exists = true;
-  memset(white_data, 0x00, DISPLAY_BUFFER_SIZE);
+  
-  memset(DRAW_BUFFER, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
+  black_data_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
-  memset(OLD_DRAW_BUFFER, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
+  white_data_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
-  draw_buffer_ = DRAW_BUFFER;
+  draw_buffer_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
-  old_buffer_ = OLD_DRAW_BUFFER;
+  old_buffer_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+  
+  // Check for allocation failures
+  if (!black_data_ || !white_data_ || !draw_buffer_ || !old_buffer_) {
+    ESP_LOGE(TAG, "Failed to allocate display buffers!");
+    return;
+  }
+  
+  memset(black_data_, 0xFF, DISPLAY_BUFFER_SIZE); // eink uses 1 for black
+  memset(white_data_, 0x00, DISPLAY_BUFFER_SIZE);
+  memset(draw_buffer_, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
+  memset(old_buffer_, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
 
   refresh_mutex_ = xSemaphoreCreateMutex();
   if (refresh_mutex_ == nullptr) {
@@ -46,24 +55,29 @@ EInkDisplayHandler::~EInkDisplayHandler() {
   if (tp_io_handle_ != nullptr) {
     esp_lcd_panel_io_del(tp_io_handle_);
   }
-  if (black_data != nullptr) {
+  if (black_data_ != nullptr) {
-    heap_caps_free(black_data);
+    heap_caps_free(black_data_);
+    black_data_ = nullptr;
   }
-  if (white_data != nullptr) {
+  if (white_data_ != nullptr) {
-    heap_caps_free(white_data);
+    heap_caps_free(white_data_);
+    white_data_ = nullptr;
   }
-  if (DRAW_BUFFER != nullptr) {
+  if (draw_buffer_ != nullptr) {
-    heap_caps_free(DRAW_BUFFER);
+    heap_caps_free(draw_buffer_);
+    draw_buffer_ = nullptr;
   }
-  if (OLD_DRAW_BUFFER != nullptr) {
+  if (old_buffer_ != nullptr) {
-    heap_caps_free(OLD_DRAW_BUFFER);
+    heap_caps_free(old_buffer_);
+    old_buffer_ = nullptr;
   }
+  display_instance_exists = false;
 }
 
 esp_err_t EInkDisplayHandler::deep_sleep_display(void) {
-  ESP_LOGI(TAG, "Putting display into deep sleep mode...");
+  ESP_LOGV(TAG, "Putting display into deep sleep mode...");
   if (is_deep_sleep_) {
-    ESP_LOGI(TAG, "Display is already in deep sleep mode");
+    ESP_LOGW(TAG, "Display is already in deep sleep mode");
     return ESP_OK;
   }
   {
@@ -111,7 +125,7 @@ esp_err_t EInkDisplayHandler::refresh_display() {
   } else {
     // refresh does not correctly work after recovering from deep sleep due to sram reset
     {
-      ESP_LOGI(TAG, "Waiting for display to be idle...");
+      ESP_LOGV(TAG, "Waiting for display to be idle...");
       TransactionGuard transaction_guard(this->epd_handler_);
       err = transaction_guard.begin(pdMS_TO_TICKS(10000));
       if (err != ESP_OK) {
@@ -123,7 +137,7 @@ esp_err_t EInkDisplayHandler::refresh_display() {
       }
 
       epd_handler_.wait_for_idle();
-      ESP_LOGI(TAG, "Starting display refresh...");
+      ESP_LOGV(TAG, "Starting display refresh...");
       err = epd_handler_.epd_write_cmd(0x92, transaction_guard.transaction_id()); // enter normal mode
       if (err != ESP_OK) {
         ESP_LOGE(TAG, "Failed to enter normal mode: %s", esp_err_to_name(err));
@@ -149,12 +163,12 @@ esp_err_t EInkDisplayHandler::refresh_display() {
     force_full_refresh_ = false;
   }
 
-  ESP_LOGI(TAG, "Refresh complete");
+  ESP_LOGV(TAG, "Refresh complete");
   return ESP_OK;
 }
 
 esp_err_t EInkDisplayHandler::full_write(const uint8_t* framebuffer, const bool white_basemap) {
-  ESP_LOGI(TAG, "Starting full refresh (3 seconds)...");
+  ESP_LOGV(TAG, "Starting full refresh (3 seconds)...");
   esp_err_t err = ESP_OK;
 
 
@@ -185,7 +199,7 @@ esp_err_t EInkDisplayHandler::full_write(const uint8_t* framebuffer, const bool
         ESP_LOGE(TAG, "Failed to send old data command: %s", esp_err_to_name(err));
         return err;
       }
-      err = epd_handler_.transfer_spi_data(white_basemap ? black_data : white_data, DISPLAY_BUFFER_SIZE, transaction_guard.transaction_id()); // Send all white data (0xFF)
+      err = epd_handler_.transfer_spi_data(white_basemap ? black_data_ : white_data_, DISPLAY_BUFFER_SIZE, transaction_guard.transaction_id()); // Send all white data (0xFF)
       if (err != ESP_OK) {
         ESP_LOGE(TAG, "Failed to send all white data for old data: %s", esp_err_to_name(err));
         return err;
@@ -214,7 +228,7 @@ esp_err_t EInkDisplayHandler::full_write(const uint8_t* framebuffer, const bool
     }
 
     vTaskDelay(pdMS_TO_TICKS(MINIMUM_PIN_SETUP_DELAY_MS)); // at least 200us delay
-    ESP_LOGI(TAG, "Display refresh triggered, BUSY pin: %d", gpio_get_level(PIN_BUSY));
+    ESP_LOGV(TAG, "Display refresh triggered, BUSY pin: %d", gpio_get_level(PIN_BUSY));
 
     // Wait for refresh to complete
     epd_handler_.wait_for_idle();
@@ -229,13 +243,13 @@ esp_err_t EInkDisplayHandler::full_write(const uint8_t* framebuffer, const bool
   refresh_area_.reset();
   memcpy(old_buffer_, draw_buffer_, DISPLAY_BUFFER_SIZE);
 
-  ESP_LOGI(TAG, "Full refresh complete");
+  ESP_LOGV(TAG, "Full refresh complete");
   return ESP_OK;
 }
 
 // TODO: Partial refresh is inverted in color
 esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_framebuffer, const RefreshArea& incoming_area, const bool is_last_partial_update) {
-  ESP_LOGI(TAG, "Starting partial refresh (0.3 seconds)...");
+  ESP_LOGV(TAG, "Starting partial refresh (0.3 seconds)...");
   esp_err_t err = ESP_OK;
 
   write_to_buffer_(incoming_partial_framebuffer, incoming_area);
@@ -244,7 +258,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
   refresh_area_.expand_to_include(incoming_area);
 
   if (!is_last_partial_update) {
-    ESP_LOGI(TAG, "Partial refresh skipped (not last partial update)");
+    ESP_LOGV(TAG, "Partial refresh skipped (not last partial update)");
     return ESP_OK;
   }
 
@@ -273,7 +287,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
     RefreshArea area = refresh_area_;
     if (area.x1 % 8 != 0 || area.x2 % 8 != 7) {
       ESP_LOGE(TAG, "Partial refresh area x1 and x2 must be byte-aligned (x1 %% 8 == 0 and x2 %% 8 == 7)");
-      ESP_LOGI(TAG, "Given area: x1=%d, x2=%d", area.x1, area.x2);
+      ESP_LOGV(TAG, "Given area: x1=%d, x2=%d", area.x1, area.x2);
       return ESP_ERR_INVALID_ARG;
     }
 
@@ -348,9 +362,9 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
         static_cast<uint8_t>(area.y2 & 0xFF),
         0x01  // Gates scan both inside and outside of the partial window
       };
-      ESP_LOGI(TAG, "Setting partial window: x1=%d, y1=%d, x2=%d, y2=%d",
+      ESP_LOGV(TAG, "Setting partial window: x1=%d, y1=%d, x2=%d, y2=%d",
         area.x1, area.y1, area.x2, area.y2);
-      ESP_LOGI(TAG, "Partial window data: %02X %02X %02X %02X %02X %02X %02X %02X",
+      ESP_LOGV(TAG, "Partial window data: %02X %02X %02X %02X %02X %02X %02X %02X",
         window_data[0], window_data[1], window_data[2], window_data[3], window_data[4],
         window_data[5], window_data[6], window_data[7]);
       err = epd_handler_.epd_write_cmd_with_data(0x90, window_data, transaction_guard.transaction_id());  // Set partial window
@@ -370,7 +384,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
       }
 
       // Send only the partial area data, not the full display buffer
-      ESP_LOGI(TAG, "Sending new partial buffer: %zu bytes (area: %dx%d)",
+      ESP_LOGV(TAG, "Sending new partial buffer: %zu bytes (area: %dx%d)",
         partial_buffer_size, area_width_bytes * 8, area_height);
       err = epd_handler_.transfer_spi_data(partial_buffer, partial_buffer_size, transaction_guard.transaction_id(), true); // Inverted for partial refresh
       if (err != ESP_OK) {
@@ -403,7 +417,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
       return err;
     }
   }
-  ESP_LOGI(TAG, "Partial refresh complete");
+  ESP_LOGV(TAG, "Partial refresh complete");
 
   err = deep_sleep_display();
   if (err != ESP_OK) {
@@ -412,7 +426,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
   }
 
   if (force_full_refresh_) {
-    ESP_LOGI(TAG, "Full refresh already requested, skipping partial refresh count increment");
+    ESP_LOGV(TAG, "Full refresh already requested, skipping partial refresh count increment");
     err = refresh_display();
     if (err != ESP_OK) {
       ESP_LOGE(TAG, "Failed to perform forced full refresh: %s", esp_err_to_name(err));
@@ -432,7 +446,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
       partial_refresh_count_++;
     }
     if (partial_refresh_count_ >= PARTIAL_REFRESH_THRESHOLD) {
-      ESP_LOGI(TAG, "Partial refresh count %u reached threshold %u, next refresh will be full",
+      ESP_LOGV(TAG, "Partial refresh count %u reached threshold %u, next refresh will be full",
         partial_refresh_count_, PARTIAL_REFRESH_THRESHOLD);
       force_full_refresh_ = true;
       partial_refresh_count_ = 0;
@@ -447,14 +461,14 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
 }
 
 esp_err_t EInkDisplayHandler::clear_display(void) {
-  ESP_LOGI(TAG, "Clearing display to all white...");
+  ESP_LOGV(TAG, "Clearing display to all white...");
 
-  esp_err_t err = full_write(white_data, false);
+  esp_err_t err = full_write(white_data_, false);
   if (err != ESP_OK) {
     ESP_LOGE(TAG, "Failed to clear display: %s", esp_err_to_name(err));
     return err;
   }
-  ESP_LOGI(TAG, "Display cleared to all white");
+  ESP_LOGV(TAG, "Display cleared to all white");
   return ESP_OK;
 }
 
@@ -478,7 +492,7 @@ void EInkDisplayHandler::request_full_refresh(void) {
   if (guard.take(pdMS_TO_TICKS(100))) {
     force_full_refresh_ = true;
     partial_refresh_count_ = 0;
-    ESP_LOGI(TAG, "Full refresh requested");
+    ESP_LOGV(TAG, "Full refresh requested");
   } else {
     ESP_LOGE(TAG, "Failed to take refresh mutex to request full refresh");
   }
@@ -506,13 +520,13 @@ esp_err_t EInkDisplayHandler::init_devices(EventGroupHandle_t system_event_group
   if (system_event_group != nullptr) {
     // Indicate that display is ready
     xEventGroupSetBits(system_event_group, DISPLAY_READY_BIT | TOUCH_CALIBRATED_BIT);
-    ESP_LOGI(TAG, "Display marked as ready");
+    ESP_LOGV(TAG, "Display marked as ready");
   }
   return ESP_OK;
 }
 
 esp_err_t EInkDisplayHandler::init_display_pins_(void) {
-  ESP_LOGI(TAG, "Initializing E-Ink display handler...");
+  ESP_LOGV(TAG, "Initializing E-Ink display handler...");
 
   esp_err_t ret;
 
@@ -544,7 +558,7 @@ esp_err_t EInkDisplayHandler::init_display_pins_(void) {
 }
 
 esp_err_t EInkDisplayHandler::epd_init_internal_(uint32_t transaction_id) {
-  ESP_LOGI(TAG, "Initializing EPD...");
+  ESP_LOGV(TAG, "Initializing EPD...");
   esp_err_t err;
 
 
@@ -585,8 +599,8 @@ esp_err_t EInkDisplayHandler::epd_init_internal_(uint32_t transaction_id) {
   vTaskDelay(pdMS_TO_TICKS(MINIMUM_POWER_ON_DELAY_MS)); // Wait for power on
 
   // Check BUSY pin with detailed logging
-  ESP_LOGI(TAG, "Waiting for EPD to be ready after power on...");
+  ESP_LOGV(TAG, "Waiting for EPD to be ready after power on...");
-  ESP_LOGI(TAG, "BUSY pin level after power on: %d (0=BUSY, 1=FREE)", gpio_get_level(PIN_BUSY));
+  ESP_LOGV(TAG, "BUSY pin level after power on: %d (0=BUSY, 1=FREE)", gpio_get_level(PIN_BUSY));
 
   epd_handler_.wait_for_idle();
   std::vector<uint8_t> booster_data = { 0x27, 0x27, 0x18, 0x17 };
@@ -618,7 +632,7 @@ esp_err_t EInkDisplayHandler::epd_init_internal_(uint32_t transaction_id) {
 
 // Internal version that uses an existing transaction (no separate TransactionGuard)
 esp_err_t EInkDisplayHandler::epd_init_partial_internal_(uint32_t transaction_id) {
-  ESP_LOGI(TAG, "Initializing EPD for partial refresh (internal)...");
+  ESP_LOGV(TAG, "Initializing EPD for partial refresh (internal)...");
   esp_err_t err = ESP_OK;
 
   // 1. Hardware Reset
@@ -676,12 +690,12 @@ esp_err_t EInkDisplayHandler::epd_init_partial_internal_(uint32_t transaction_id
     return err;
   }
 
-  ESP_LOGI(TAG, "EPD partial init (internal) complete");
+  ESP_LOGV(TAG, "EPD partial init (internal) complete");
   return ESP_OK;
 }
 
 esp_err_t EInkDisplayHandler::init_touch_() {
-  ESP_LOGI(TAG, "Initializing touch...");
+  ESP_LOGV(TAG, "Initializing touch...");
   esp_err_t err;
 
   // 1. Initialize I2C Bus
@@ -703,10 +717,10 @@ esp_err_t EInkDisplayHandler::init_touch_() {
     ESP_LOGE(TAG, "Failed to install I2C driver: %s", esp_err_to_name(err));
     return err;
   }
-  ESP_LOGI("DisplayHandler", "I2C driver installed");
+  ESP_LOGV("DisplayHandler", "I2C driver installed");
 
   // 2. Initialize GT911
-  ESP_LOGI("DisplayHandler", "Initializing GT911 touch controller...");
+  ESP_LOGV("DisplayHandler", "Initializing GT911 touch controller...");
   esp_lcd_panel_io_i2c_config_t tp_io_config = {};
   // temporarily disable -Wmissing-field-initializers, as ESP_LCD_TOUCH_IO_I2C_GT911_CONFIG macro does not set all fields
 #pragma GCC diagnostic push
@@ -734,16 +748,16 @@ esp_err_t EInkDisplayHandler::init_touch_() {
 
   err = esp_lcd_touch_new_i2c_gt911(tp_io_handle_, &tp_cfg, &tp_handle_);
   if (err == ESP_OK && tp_handle_ != nullptr) {
-    ESP_LOGI("DisplayHandler", "GT911 touch controller initialized successfully");
+    ESP_LOGV(TAG, "GT911 touch controller initialized successfully");
   } else {
-    ESP_LOGE("DisplayHandler", "GT911 touch controller initialization failed: %s", esp_err_to_name(err));
+    ESP_LOGE(TAG, "GT911 touch controller initialization failed: %s", esp_err_to_name(err));
     tp_handle_ = nullptr;
   }
   return err;
 }
 
 esp_err_t EInkDisplayHandler::refresh_old_buffer_(uint32_t transaction_id) {
-  ESP_LOGI(TAG, "Refreshing display SRAM to restore state after wake...");
+  ESP_LOGV(TAG, "Refreshing display SRAM to restore state after wake...");
   esp_err_t err;
 
   err = epd_handler_.epd_write_cmd(0x92, transaction_id); // enter normal mode
@@ -784,6 +798,6 @@ esp_err_t EInkDisplayHandler::refresh_old_buffer_(uint32_t transaction_id) {
     return err;
   }
 
-  ESP_LOGI(TAG, "Display SRAM restored successfully");
+  ESP_LOGV(TAG, "Display SRAM restored successfully");
   return ESP_OK;
 }

main/display/eink_display_handler.h

@@ -90,9 +90,11 @@ private:
   esp_lcd_panel_io_handle_t tp_io_handle_ = nullptr;
   esp_lcd_touch_handle_t tp_handle_ = nullptr;
 
-  // this buffer reflects the current display state (1=black, 0=white)
+  // Display buffers (1=black, 0=white)
   uint8_t* draw_buffer_ = nullptr;
   uint8_t* old_buffer_ = nullptr;
+  uint8_t* black_data_ = nullptr;  // All 0xFF (black pattern)
+  uint8_t* white_data_ = nullptr;  // All 0x00 (white pattern)
   RefreshArea refresh_area_ = { 0, 0, 0, 0 };
 };
 

main/display/epd_handler.cpp

@@ -4,6 +4,7 @@
 #include "common/constants.h"
 #include "esp_lcd_touch_gt911.h"
 #include <driver/i2c.h>
+#include <esp_cache.h>
 #define TAG "EPDHandler"
 
 #define BUSY_ACTIVE_LEVEL   0  // BUSY pin is active low
@@ -73,23 +74,23 @@ bool EPDHandler::is_busy(void) const {
   return gpio_get_level(PIN_BUSY) != BUSY_ACTIVE_LEVEL;  // BUSY is active LOW
 }
 void EPDHandler::wait_for_idle(void) const {
-  ESP_LOGI(TAG, "Waiting for display ready (BUSY pin)...");
+  ESP_LOGV(TAG, "Waiting for display ready (BUSY pin)...");
   int initial_level = gpio_get_level(PIN_BUSY);
-  ESP_LOGI(TAG, "Initial BUSY pin level: %d (0=BUSY, 1=FREE)", initial_level);
+  ESP_LOGV(TAG, "Initial BUSY pin level: %d (0=BUSY, 1=FREE)", initial_level);
 
   // If already free, no need to wait
   if (initial_level == BUSY_INACTIVE_LEVEL) {
-    ESP_LOGI(TAG, "Display already ready (BUSY pin = 1)");
+    ESP_LOGV(TAG, "Display already ready (BUSY pin = 1)");
     return;
   }
   while (gpio_get_level(PIN_BUSY) != BUSY_INACTIVE_LEVEL) {
     vTaskDelay(pdMS_TO_TICKS(10));
   }
-  ESP_LOGI(TAG, "Display is now ready (BUSY pin = 1)");
+  ESP_LOGV(TAG, "Display is now ready (BUSY pin = 1)");
 }
 
 esp_err_t EPDHandler::epd_write_cmd(const uint8_t cmd, uint32_t transaction_id) {
-  ESP_LOGI(TAG, "epd_write_cmd: waiting to send 0x%02X", cmd);
+  ESP_LOGV(TAG, "epd_write_cmd: waiting to send 0x%02X", cmd);
 
   SemaphoreGuard transaction_guard(spi_transaction_mutex_);
   esp_err_t err =
@@ -106,12 +107,12 @@ esp_err_t EPDHandler::epd_write_cmd(const uint8_t cmd, uint32_t transaction_id)
     return ESP_ERR_TIMEOUT;
   }
   err = dangerous_epd_write_cmd_without_lock_(cmd);
-  ESP_LOGI(TAG, "epd_write_cmd: 0x%02X done", cmd);
+  ESP_LOGV(TAG, "epd_write_cmd: 0x%02X done", cmd);
   return err;
 }
 
 esp_err_t EPDHandler::epd_write_data(const uint8_t data, uint32_t transaction_id) {
-  ESP_LOGI(TAG, "epd_write_data: waiting to send 0x%02X", data);
+  ESP_LOGV(TAG, "epd_write_data: waiting to send 0x%02X", data);
   SemaphoreGuard transaction_guard(spi_transaction_mutex_);
   esp_err_t err =
     wait_for_transaction_end_(pdMS_TO_TICKS(5000), transaction_id, transaction_guard);
@@ -126,13 +127,13 @@ esp_err_t EPDHandler::epd_write_data(const uint8_t data, uint32_t transaction_id
     return ESP_ERR_TIMEOUT;
   }
   err = dangerous_epd_write_data_without_lock_(data);
-  ESP_LOGI(TAG, "epd_write_data: 0x%02X done", data);
+  ESP_LOGV(TAG, "epd_write_data: 0x%02X done", data);
   return err;
 }
 
 esp_err_t EPDHandler::epd_write_cmd_with_data(const uint8_t cmd, std::vector<uint8_t>& data, uint32_t transaction_id) {
   const size_t data_len = data.size();
-  ESP_LOGI(TAG, "epd_write_cmd_with_data: waiting to send cmd 0x%02X with %u bytes of data", cmd, data_len);
+  ESP_LOGV(TAG, "epd_write_cmd_with_data: waiting to send cmd 0x%02X with %u bytes of data", cmd, data_len);
 
   SemaphoreGuard transaction_guard(spi_transaction_mutex_);
   esp_err_t err =
@@ -158,13 +159,13 @@ esp_err_t EPDHandler::epd_write_cmd_with_data(const uint8_t cmd, std::vector<uin
       return err;
     }
   }
-  ESP_LOGI(TAG, "epd_write_cmd_with_data: cmd 0x%02X with %u bytes of data done", cmd, data_len);
+  ESP_LOGV(TAG, "epd_write_cmd_with_data: cmd 0x%02X with %u bytes of data done", cmd, data_len);
   return ESP_OK;
 }
 
 
 esp_err_t EPDHandler::dangerous_epd_write_cmd_without_lock_(const uint8_t cmd) {
-  ESP_LOGI(TAG, "dangerous_epd_write_cmd_without_lock_: sending 0x%02X", cmd);
+  ESP_LOGV(TAG, "dangerous_epd_write_cmd_without_lock_: sending 0x%02X", cmd);
   gpio_set_level(PIN_DC, 0); // Command mode
   spi_transaction_t t {};
   t.length = 8;t.tx_buffer = &cmd;
@@ -172,13 +173,13 @@ esp_err_t EPDHandler::dangerous_epd_write_cmd_without_lock_(const uint8_t cmd) {
   if (err != ESP_OK) {
     ESP_LOGE(TAG, "Failed to send data 0x%02X", cmd);
   } else {
-    ESP_LOGI(TAG, "dangerous_epd_write_cmd_without_lock_: 0x%02X sent", cmd);
+    ESP_LOGV(TAG, "dangerous_epd_write_cmd_without_lock_: 0x%02X sent", cmd);
   }
   return err;
 }
 
 esp_err_t EPDHandler::dangerous_epd_write_data_without_lock_(const uint8_t data) {
-  ESP_LOGI(TAG, "dangerous_epd_write_data_without_lock_: sending 0x%02X", data);
+  ESP_LOGV(TAG, "dangerous_epd_write_data_without_lock_: sending 0x%02X", data);
   gpio_set_level(PIN_DC, 1); // Data mode
   spi_transaction_t t = { };
   t.length = 8; t.tx_buffer = &data;
@@ -186,13 +187,13 @@ esp_err_t EPDHandler::dangerous_epd_write_data_without_lock_(const uint8_t data)
   if (err != ESP_OK) {
     ESP_LOGE(TAG, "Failed to send data 0x%02X", data);
   } else {
-    ESP_LOGI(TAG, "dangerous_epd_write_data_without_lock_: 0x%02X sent", data);
+    ESP_LOGV(TAG, "dangerous_epd_write_data_without_lock_: 0x%02X sent", data);
   }
   return err;
 }
 
 esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& length, uint32_t transaction_id, bool inverted) {
-  ESP_LOGI(TAG, "transfer_spi_data: waiting to send %zu bytes of data", length);
+  ESP_LOGV(TAG, "transfer_spi_data: waiting to send %zu bytes of data", length);
 
   SemaphoreGuard transaction_guard(spi_transaction_mutex_);
   esp_err_t err =
@@ -207,16 +208,35 @@ esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& lengt
     ESP_LOGE(TAG, "SPI mutex timeout for data transfer of %zu bytes", length);
     return ESP_ERR_TIMEOUT;
   }
-  ESP_LOGI(TAG, "transfer_spi_data: starting to send %zu bytes of data", length);
+  ESP_LOGV(TAG, "transfer_spi_data: starting to send %zu bytes of data", length);
 
   size_t offset = 0;
   size_t remaining = length;
   gpio_set_level(PIN_DC, 1); // Data mode
 
-  // Allocate a temporary buffer for inverted data (only if inverted)
+  // Check if data is in PSRAM (needs cache sync and staging buffer)
+  bool data_in_psram = (esp_ptr_external_ram((void*)data) != 0);
+  
+  if (data_in_psram) {
+    // Flush cache to ensure DMA sees the latest data in PSRAM
+    esp_err_t cache_err = esp_cache_msync((void*)data, length, ESP_CACHE_MSYNC_FLAG_DIR_C2M);
+    if (cache_err != ESP_OK) {
+      ESP_LOGW(TAG, "Cache sync failed: %s", esp_err_to_name(cache_err));
+    }
+  }
+
+  // Use staging buffer in internal DMA-capable RAM
+  // PSRAM cannot be allocated with MALLOC_CAP_DMA, so we always use a staging buffer
+  uint8_t* staging_buffer = (uint8_t*)heap_caps_malloc(DMA_TRANSFER_CHUNK_SIZE, MALLOC_CAP_DMA | MALLOC_CAP_INTERNAL);
+  if (staging_buffer == nullptr) {
+    ESP_LOGE(TAG, "Failed to allocate DMA staging buffer");
+    return ESP_ERR_NO_MEM;
+  }
+  
+  // Additional buffer needed only for inverted data
   uint8_t* temp_transfer_buffer = nullptr;
   if (inverted) {
-    temp_transfer_buffer = (uint8_t*)heap_caps_malloc(DMA_TRANSFER_CHUNK_SIZE, MALLOC_CAP_DMA);
+    temp_transfer_buffer = (uint8_t*)heap_caps_malloc(DMA_TRANSFER_CHUNK_SIZE, MALLOC_CAP_DMA | MALLOC_CAP_INTERNAL);
     if (temp_transfer_buffer == nullptr) {
       ESP_LOGE(TAG, "Failed to allocate memory for inverted data transfer buffer");
       ESP_LOGI(TAG, "Current free heap size: %u bytes", esp_get_free_heap_size());
@@ -229,31 +249,27 @@ esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& lengt
   while (remaining > 0) {
     size_t transfer_size = (remaining < DMA_TRANSFER_CHUNK_SIZE) ? remaining : DMA_TRANSFER_CHUNK_SIZE;
 
-    const uint8_t* transfer_buffer = nullptr;
+    // Copy data to DMA-capable staging buffer
+    // Required because PSRAM cannot be allocated with MALLOC_CAP_DMA
     if (inverted) {
-      // Invert only the current chunk into the temporary buffer
+      // Invert while copying
       for (size_t i = 0; i < transfer_size; ++i) {
-        temp_transfer_buffer[i] = ~data[offset + i];
+        staging_buffer[i] = ~data[offset + i];
       }
-      transfer_buffer = temp_transfer_buffer;
     } else {
-      transfer_buffer = data + offset;
+      // Straight copy from PSRAM to internal DMA buffer
+      memcpy(staging_buffer, data + offset, transfer_size);
     }
 
     spi_transaction_t t = {};
     t.length = transfer_size * 8;  // Length in bits
-    t.tx_buffer = transfer_buffer;
+    t.tx_buffer = staging_buffer;
 
     esp_err_t ret = spi_device_polling_transmit(spi_, &t);
     if (ret != ESP_OK) {
       ESP_LOGE(TAG, "Failed to send SPI chunk at offset %zu: %s", offset, esp_err_to_name(ret));
-      if (ret == ESP_ERR_NO_MEM) {
+      heap_caps_free(staging_buffer);
-        ESP_LOGE(TAG, "Current free heap size: %u bytes", esp_get_free_heap_size());
-        ESP_LOGE(TAG, "Current free DMA-capable memory size: %u bytes",
-          heap_caps_get_free_size(MALLOC_CAP_DMA));
-      }
       if (inverted && temp_transfer_buffer != nullptr) {
-        // Free the temporary inverted buffer
         heap_caps_free(temp_transfer_buffer);
       }
       return ret;
@@ -264,40 +280,40 @@ esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& lengt
 
     // Yield every 16KB to prevent watchdog timeout
     if (offset % (16 * 1024) == 0) {
-      ESP_LOGI(TAG, "New data progress: %zu/%zu bytes sent, yielding...", offset, length);
+      ESP_LOGV(TAG, "New data progress: %zu/%zu bytes sent, yielding...", offset, length);
       vTaskDelay(pdMS_TO_TICKS(1));
     }
   }
 
+  heap_caps_free(staging_buffer);
   if (inverted && temp_transfer_buffer != nullptr) {
-    // Free the temporary inverted buffer
     heap_caps_free(temp_transfer_buffer);
   }
 
-  ESP_LOGI(TAG, "transfer_spi_data: completed sending %zu bytes of data", length);
+  ESP_LOGV(TAG, "transfer_spi_data: completed sending %zu bytes of data", length);
   return ESP_OK;
 }
 
 esp_err_t EPDHandler::begin_transaction_(TickType_t timeout, uint32_t& out_id) {
-  ESP_LOGI(TAG, "begin_transaction_: waiting to obtain transaction mutex");
+  ESP_LOGV(TAG, "begin_transaction_: waiting to obtain transaction mutex");
   if (xSemaphoreTake(spi_transaction_mutex_, timeout) != pdTRUE) {
     ESP_LOGE(TAG, "begin_transaction_: transaction mutex timeout");
     return ESP_ERR_TIMEOUT;
   }
 
   out_id = ++spi_transaction_id;
-  ESP_LOGI(TAG, "begin_transaction_: transaction mutex obtained");
+  ESP_LOGV(TAG, "begin_transaction_: transaction mutex obtained");
   return ESP_OK;
 }
 
 esp_err_t EPDHandler::end_transaction_(void) {
-  ESP_LOGI(TAG, "end_transaction_: releasing transaction mutex");
+  ESP_LOGV(TAG, "end_transaction_: releasing transaction mutex");
   if (xSemaphoreGive(spi_transaction_mutex_) != pdTRUE) {
     ESP_LOGE(TAG, "end_transaction_: failed to release transaction mutex");
     return ESP_FAIL;
   }
 
-  ESP_LOGI(TAG, "end_transaction_: transaction mutex released");
+  ESP_LOGV(TAG, "end_transaction_: transaction mutex released");
   return ESP_OK;
 }
 

main/display/lvgl_handler.cpp

@@ -26,6 +26,10 @@ LVGLHandler::~LVGLHandler() {
     lv_draw_buf_destroy(lvgl_draw_buf_);
     lvgl_draw_buf_ = nullptr;
   }
+  if (lvgl_draw_buf_2_ != nullptr) {
+    lv_draw_buf_destroy(lvgl_draw_buf_2_);
+    lvgl_draw_buf_2_ = nullptr;
+  }
 }
 
 esp_err_t LVGLHandler::initLVGL(EventGroupHandle_t system_event_group) {
@@ -217,17 +221,31 @@ esp_err_t LVGLHandler::initLVGLDisplay_() {
     return ESP_FAIL;
   }
 
-  // Create a draw buffer covering the entire display
+  // Create two draw buffers for double buffering to improve performance
   lvgl_draw_buf_ = lv_draw_buf_create(DISPLAY_WIDTH, DISPLAY_HEIGHT, LV_COLOR_FORMAT_I1, LV_STRIDE_AUTO);
   if (lvgl_draw_buf_ == nullptr) {
-    ESP_LOGE(TAG, "Failed to create LVGL draw buffer");
+    ESP_LOGE(TAG, "Failed to create LVGL draw buffer 1");
     lv_display_delete(lvgl_display_);
     lvgl_display_ = nullptr;
     lvgl_port_unlock();
     return ESP_FAIL;
   }
-  lv_display_set_draw_buffers(lvgl_display_, lvgl_draw_buf_, nullptr);
+
+  lvgl_draw_buf_2_ = lv_draw_buf_create(DISPLAY_WIDTH, DISPLAY_HEIGHT, LV_COLOR_FORMAT_I1, LV_STRIDE_AUTO);
+  if (lvgl_draw_buf_2_ == nullptr) {
+    ESP_LOGE(TAG, "Failed to create LVGL draw buffer 2");
+    lv_draw_buf_destroy(lvgl_draw_buf_);
+    lvgl_draw_buf_ = nullptr;
+    lv_display_delete(lvgl_display_);
+    lvgl_display_ = nullptr;
+    lvgl_port_unlock();
+    return ESP_FAIL;
+  }
+
+  // Set both buffers for double buffering
+  lv_display_set_draw_buffers(lvgl_display_, lvgl_draw_buf_, lvgl_draw_buf_2_);
   lv_display_set_render_mode(lvgl_display_, LV_DISPLAY_RENDER_MODE);
+
   //
   // Configure LVGL display
   lv_display_set_color_format(lvgl_display_, LV_COLOR_FORMAT_I1);

main/display/lvgl_handler.h

@@ -31,4 +31,5 @@ private:
   lv_display_t* lvgl_display_ = nullptr;
   lv_indev_t* lvgl_touch_indev_ = nullptr;
   lv_draw_buf_t* lvgl_draw_buf_ = nullptr;
+  lv_draw_buf_t* lvgl_draw_buf_2_ = nullptr;
 };

main/external/CMakeLists.txt

@@ -0,0 +1,6 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/mtr.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/station_info.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/line_info.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/arrival.cpp"
+)

main/external/mtr/arrival.cpp

@@ -11,8 +11,8 @@ StationArrivalInfo::StationArrivalInfo(
   const std::string& train_line_code,
   const std::string& train_station_code
 ) : _status(UNKNOWN_STATUS)
-, _train_line(train_line_code)
+  , _train_line(train_line_code)
-, _train_station(train_station_code) {
+  , _train_station(train_station_code) {
 
   if (!arrival_json) {
     ESP_LOGE(TAG, "arrival_json is null");
@@ -21,6 +21,8 @@ StationArrivalInfo::StationArrivalInfo(
     return;
   }
 
+  ESP_LOGD(TAG, "Parsing arrival JSON for %s-%s", train_line_code.c_str(), train_station_code.c_str());
+
   // Parse status
   cJSON* status_json = cJSON_GetObjectItem(arrival_json, "status");
   if (status_json && cJSON_IsNumber(status_json)) {
@@ -30,7 +32,7 @@ StationArrivalInfo::StationArrivalInfo(
     }
   }
 
-  // TODO: verify the arrival json parsing
+  ESP_LOGD(TAG, "Status: %d, Message: %s", (int)_status, _message.c_str());
 
       // Parse message (if present)
   cJSON* message_json = cJSON_GetObjectItem(arrival_json, "message");

main/external/mtr/arrival.h

@@ -1,7 +1,5 @@
 #pragma once
-#include "external/mtr/arrival.h"
 #include "cJSON.h"
-#include "external/mtr/mtr.h"
 #include <string>
 #include <vector>
 

main/external/mtr/line_info.cpp

@@ -17,6 +17,14 @@ LineInfo::LineInfo(cJSON* line_json) {
     ESP_LOGW(LINE_INFO_TAG, "Missing or invalid 'code' field");
   }
 
+  // Parse line name
+  cJSON* name_json = cJSON_GetObjectItem(line_json, "name");
+  if (name_json && cJSON_IsString(name_json)) {
+    _name = name_json->valuestring;
+  } else {
+    ESP_LOGW(LINE_INFO_TAG, "Missing or invalid 'name' field");
+  }
+
   // Parse line color (note: field is 'line_color' in JSON, not 'color')
   cJSON* color_json = cJSON_GetObjectItem(line_json, "line_color");
   if (color_json && cJSON_IsString(color_json)) {
@@ -43,3 +51,12 @@ LineInfo::LineInfo(cJSON* line_json) {
     ESP_LOGW(LINE_INFO_TAG, "Missing or invalid 'stations' array");
   }
 }
+
+const char* LineInfo::get_station_name(const std::string& station_code) const {
+  for (const auto& station : _stations) {
+    if (std::string(station.code()) == station_code) {
+      return station.name();
+    }
+  }
+  return "";
+}

main/external/mtr/line_info.h

@@ -20,6 +20,10 @@ public:
     return _code.c_str();
   }
   // caller does not own the returned char pointers
+  const char* name() const {
+    return _name.c_str();
+  }
+  // caller does not own the returned char pointers
   const char* color() const {
     return _color.c_str();
   }
@@ -31,6 +35,8 @@ public:
     return &_stations;
   }
 
+  const char* get_station_name(const std::string& station_code) const;
+
   friend class MTRNextTrainHandler;
 
 private:
@@ -40,6 +46,7 @@ private:
   );
 
   std::string _code;
+  std::string _name;
   std::string _color;
   std::vector<StationInfo> _stations;
 };

main/external/mtr/mtr.cpp

@@ -8,12 +8,13 @@
 #include "cJSON.h"
 #include "esp_log.h"
 #include <string>
-#include <sstream>
+#include <stdlib.h>
+#include <string.h>
+#include "esp_crt_bundle.h"
 
 static const char* TAG = "MTRNextTrainHandler";
 
 // MTR Next Train API endpoint
-// Note: This is a placeholder - replace with actual MTR API endpoint
 static const char* MTR_API_BASE = "https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php";
 
 MTRNextTrainHandler::MTRNextTrainHandler() {
@@ -102,43 +103,70 @@ MtrArrivalErrorCode MTRNextTrainHandler::get_next_arrival_info(
   }
 
   // Build API URL
-  std::ostringstream url;
+  std::string url_str = MTR_API_BASE;
-  url << MTR_API_BASE << "?line=" << line_code << "&sta=" << station_code;
+  url_str += "?line=";
+  url_str += line_code;
+  url_str += "&sta=";
+  url_str += station_code;
   if (lang == Language::EN) {
-    url << "&lang=en";
+    url_str += "&lang=en";
   }
-
-  std::string url_str = url.str();
   ESP_LOGI(TAG, "Fetching arrival info from: %s", url_str.c_str());
 
   // Create HTTP client configuration
   esp_http_client_config_t http_config = {};
   http_config.url = url_str.c_str();
-  http_config.timeout_ms = 10000;
+  http_config.timeout_ms = 15000;
   http_config.transport_type = HTTP_TRANSPORT_OVER_SSL;
-  http_config.use_global_ca_store = true;
+  http_config.crt_bundle_attach = esp_crt_bundle_attach;
-  http_config.skip_cert_common_name_check = false;
+
+  // Retry logic for connection failures
+  constexpr int MAX_RETRIES = 2;
+  esp_err_t err = ESP_FAIL;
+  char* buffer = nullptr;
+  int total_len = 0;
+
+  for (int retry = 0; retry <= MAX_RETRIES; retry++) {
+    if (retry > 0) {
+      ESP_LOGW(TAG, "Retrying HTTP request (%d/%d)", retry, MAX_RETRIES);
+      vTaskDelay(pdMS_TO_TICKS(500));
+    }
+
+    // Create HTTP client configuration for each attempt
+    esp_http_client_config_t http_config = {};
+    http_config.url = url_str.c_str();
+    http_config.timeout_ms = 15000;
+    http_config.transport_type = HTTP_TRANSPORT_OVER_SSL;
+    http_config.crt_bundle_attach = esp_crt_bundle_attach;
 
     // Get HTTP handler and perform request
     auto http_handler = network_handler->get_http_handler(std::move(http_config));
     if (!http_handler) {
       ESP_LOGE(TAG, "Failed to create HTTP handler");
-    return MtrArrivalErrorCode::UNKNOWN;
+      continue;
     }
 
-  esp_err_t err = http_handler->perform_request();
+    err = http_handler->perform_request();
     if (err != ESP_OK) {
       ESP_LOGE(TAG, "HTTP request failed: %s", esp_err_to_name(err));
-    return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
+      continue;
     }
 
     // Get response body
-  char* buffer = nullptr;
-  int total_len = 0;
     http_handler->get_body(buffer, total_len);
 
-  if (!buffer || total_len <= 0) {
+    if (buffer && total_len > 0) {
-    ESP_LOGE(TAG, "Empty response from MTR API");
+      break;
+    }
+
+    if (buffer) {
+      free(buffer);
+      buffer = nullptr;
+    }
+  }
+
+  if (err != ESP_OK || !buffer || total_len <= 0) {
+    ESP_LOGE(TAG, "Failed to get response after retries");
     if (buffer) {
       free(buffer);
     }
@@ -146,21 +174,49 @@ MtrArrivalErrorCode MTRNextTrainHandler::get_next_arrival_info(
   }
 
   ESP_LOGI(TAG, "Received %d bytes from MTR API", total_len);
-  ESP_LOGD(TAG, "Response: %s", buffer);
 
-  // Parse JSON response
+  ESP_LOGI(TAG, "Parsing full API response");
-  cJSON* arrival_json = cJSON_Parse(buffer);
+  cJSON* root_json = cJSON_Parse(buffer);
-  free(buffer);
+  delete[] buffer;
 
-  if (!arrival_json) {
+  if (!root_json) {
-    ESP_LOGE(TAG, "Failed to parse MTR API response");
+    const char* error_ptr = cJSON_GetErrorPtr();
+    if (error_ptr) {
+      ESP_LOGE(TAG, "Failed to parse MTR API response at position: %s", error_ptr);
+    } else {
+      ESP_LOGE(TAG, "Failed to parse MTR API response - unknown error");
+    }
     return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
   }
 
-  // Create StationArrivalInfo object
+  cJSON* data_json = cJSON_GetObjectItem(root_json, "data");
-  out_info = new StationArrivalInfo(mtr_data, arrival_json, line_code, station_code);
+  if (!data_json) {
+    ESP_LOGE(TAG, "Could not find 'data' object in response");
+    cJSON_Delete(root_json);
+    return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
+  }
 
-  cJSON_Delete(arrival_json);
+  std::string station_key = line_code + "-" + station_code;
+  cJSON* station_json = cJSON_GetObjectItem(data_json, station_key.c_str());
+  if (!station_json) {
+    ESP_LOGE(TAG, "Could not find station key '%s' in data object", station_key.c_str());
+    cJSON_Delete(root_json);
+    return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
+  }
+
+  cJSON* status_json = cJSON_GetObjectItem(root_json, "status");
+  if (status_json && cJSON_IsNumber(status_json)) {
+    cJSON_AddItemToObject(station_json, "status", cJSON_Duplicate(status_json, 1));
+  }
+
+  cJSON* message_json = cJSON_GetObjectItem(root_json, "message");
+  if (message_json && cJSON_IsString(message_json)) {
+    cJSON_AddItemToObject(station_json, "message", cJSON_Duplicate(message_json, 1));
+  }
+
+  out_info = new StationArrivalInfo(mtr_data, station_json, line_code, station_code);
+
+  cJSON_Delete(root_json);
 
   ESP_LOGI(TAG, "Successfully retrieved arrival info for %s/%s", line_code.c_str(), station_code.c_str());
   return MtrArrivalErrorCode::NONE;

main/info/CMakeLists.txt

@@ -0,0 +1,3 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/info.cpp"
+)

main/io/CMakeLists.txt

@@ -0,0 +1,4 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/fs_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/nvs_handler.cpp"
+)

main/io/fs_handler.cpp

@@ -0,0 +1,552 @@
+#include "io/fs_handler.h"
+#include <sys/stat.h>
+#include <dirent.h>
+#include <errno.h>
+#include <cstring>
+#include "esp_partition.h"
+
+#define TAG "LittleFSHandler"
+#define PARTITION_LABEL "storage"
+#define BLOCK_SIZE 512  // Match typical flash sector size
+
+//
+// FSGuard implementation
+//
+
+FSGuard::FSGuard(LittleFSHandler* fs_handler, const std::string& relative_path, const char* flags)
+  : fs_handler_(fs_handler), file_(nullptr) {
+  if (fs_handler_ != nullptr) {
+    fs_handler_->open_file_(relative_path, flags, file_);
+  } else {
+    ESP_LOGE("FSGuard", "FSGuard initialized with null LittleFSHandler");
+  }
+}
+
+FSGuard::~FSGuard() {
+  this->close();
+}
+
+esp_err_t FSGuard::close() {
+  if (file_ != nullptr && fs_handler_ != nullptr) {
+    esp_err_t err = fs_handler_->close_file_(file_);
+    file_ = nullptr;
+    fs_handler_ = nullptr;
+    if (err != ESP_OK) {
+      ESP_LOGE("FSGuard", "Error closing file: %s", esp_err_to_name(err));
+    }
+    return err;
+  }
+  return ESP_OK;
+}
+
+//
+// LittleFSHandler implementation
+//
+
+LittleFSHandler::LittleFSHandler() {
+  this->fs_mutex_ = xSemaphoreCreateMutex();
+  if (this->fs_mutex_ == nullptr) {
+    ESP_LOGE(TAG, "Failed to create filesystem mutex");
+  }
+}
+
+LittleFSHandler::~LittleFSHandler() {
+  if (this->is_initialized_()) {
+    esp_vfs_littlefs_unregister(PARTITION_LABEL);
+    this->initialized_ = false;
+  }
+  if (this->fs_mutex_ != nullptr) {
+    vSemaphoreDelete(this->fs_mutex_);
+    this->fs_mutex_ = nullptr;
+  }
+}
+
+esp_err_t LittleFSHandler::init(std::string base_path) {
+  // default config
+  esp_vfs_littlefs_conf_t config = {};
+  config.dont_mount = false;
+  config.partition_label = PARTITION_LABEL;
+  config.base_path = base_path.c_str();
+  config.format_if_mount_failed = true;
+  //
+  base_path_ = base_path;
+  return init(config);
+}
+
+esp_err_t LittleFSHandler::init(const esp_vfs_littlefs_conf_t& config) {
+  base_path_ = std::string(config.base_path);
+  if (this->is_initialized_()) {
+    ESP_LOGW(TAG, "LittleFS already initialized, skipping");
+    return ESP_OK;
+  }
+
+  esp_err_t err = esp_vfs_littlefs_register(&config);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize LittleFS: %s", esp_err_to_name(err));
+
+    if (err == ESP_ERR_NOT_FOUND) {
+      ESP_LOGE(TAG, "Listing all available partitions:");
+      esp_partition_iterator_t it = esp_partition_find(ESP_PARTITION_TYPE_ANY, ESP_PARTITION_SUBTYPE_ANY, NULL);
+      while (it != NULL) {
+        const esp_partition_t* part = esp_partition_get(it);
+        ESP_LOGE(TAG, "  - Label: '%s', Type: 0x%02x, Subtype: 0x%02x, Address: 0x%08x, Size: 0x%08x",
+          part->label, part->type, part->subtype, part->address, part->size);
+        it = esp_partition_next(it);
+      }
+      esp_partition_iterator_release(it);
+    }
+
+    return ESP_ERR_INVALID_STATE;
+  }
+  this->initialized_ = true;
+  return ESP_OK;
+}
+
+std::string LittleFSHandler::get_base_path() const {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized, cannot get base path");
+    return "";
+  }
+  return base_path_;
+}
+
+std::string LittleFSHandler::get_full_path(const std::string& relative_path) const {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized, cannot get full path");
+    return "";
+  }
+  return base_path_ + "/" + relative_path;
+}
+
+esp_err_t LittleFSHandler::write_file(const std::string& relative_path, const uint8_t* data, size_t size, size_t& out_bytes_written) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+  if (data == nullptr) {
+    ESP_LOGE(TAG, "Data pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  // Try to open with r+b first to preserve existing content for comparison
+  FSGuard file_guard(this, relative_path, "r+b");
+
+  // If file doesn't exist, open with wb
+  if (!file_guard.is_open()) {
+    FSGuard new_file_guard(this, relative_path, "wb");
+    if (!new_file_guard.is_open()) {
+      return ESP_ERR_NOT_FOUND;
+    }
+    return this->write_if_different_(new_file_guard.get_file(), data, size, out_bytes_written);
+  }
+  return this->write_if_different_(file_guard.get_file(), data, size, out_bytes_written);
+}
+
+
+// Caller is responsible for opening the file in appropriate mode
+// If the file doesn't exist, use write_file with "wb" mode
+// If the file exists, use "r+b" mode to read and write
+esp_err_t LittleFSHandler::write_file(FILE* file, const uint8_t* data, size_t size, size_t& out_bytes_written) {
+  return this->write_if_different_(file, data, size, out_bytes_written);
+}
+
+esp_err_t LittleFSHandler::append_file(const std::string& relative_path, const uint8_t* data, size_t size, size_t& out_bytes_written) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+  if (data == nullptr) {
+    ESP_LOGE(TAG, "Data pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  FSGuard file_guard(this, relative_path, "ab");
+  FILE* file = file_guard.get_file();
+  if (file == nullptr) {
+    return ESP_ERR_NOT_FOUND;
+  }
+  return this->append_file(file, data, size, out_bytes_written);
+}
+
+esp_err_t LittleFSHandler::append_file(FILE* file, const uint8_t* data, size_t size, size_t& out_bytes_written) {
+  if (file == nullptr) {
+    ESP_LOGE(TAG, "File pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+  if (data == nullptr) {
+    ESP_LOGE(TAG, "Data pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  if (fseek(file, 0, SEEK_END) != 0) {
+    ESP_LOGE(TAG, "Failed to seek to end of file");
+    return ESP_ERR_INVALID_STATE;
+  }
+  // write data with POSIX
+  size_t bytes_written = fwrite(data, 1, size, file);
+  if (bytes_written != size) {
+    ESP_LOGE(TAG, "Failed to write all data to file, expected %zu bytes, wrote %zu bytes", size, bytes_written);
+    return ESP_ERR_NO_MEM;
+  }
+  if (fflush(file) != 0) {
+    ESP_LOGE(TAG, "Failed to flush file");
+    return ESP_ERR_INVALID_STATE;
+  }
+  out_bytes_written = bytes_written;
+  return ESP_OK;
+}
+
+esp_err_t LittleFSHandler::read_file(const std::string& relative_path, const size_t max_size, uint8_t* out_data, size_t& out_size) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+  if (out_data == nullptr) {
+    ESP_LOGE(TAG, "Output data pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  FSGuard file_guard(this, relative_path, "rb");
+  FILE* file = file_guard.get_file();
+  if (file == nullptr) {
+    return ESP_ERR_NOT_FOUND;
+  }
+  return this->read_file(file, max_size, out_data, out_size);
+}
+
+esp_err_t LittleFSHandler::read_file(FILE* file, const size_t max_size, uint8_t* out_data, size_t& out_size) {
+  if (file == nullptr) {
+    ESP_LOGE(TAG, "File pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+  if (out_data == nullptr) {
+    ESP_LOGE(TAG, "Output data pointer is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  size_t bytes_read = fread(out_data, 1, max_size, file);
+  if (bytes_read == 0 && ferror(file)) {
+    ESP_LOGE(TAG, "Failed to read from file");
+    return ESP_ERR_INVALID_STATE;
+  }
+  out_size = bytes_read;
+  return ESP_OK;
+}
+
+esp_err_t LittleFSHandler::delete_file(const std::string& relative_path) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  std::string full_path = this->get_full_path(relative_path);
+  if (remove(full_path.c_str()) != 0) {
+    ESP_LOGE(TAG, "Failed to delete file %s: %s", full_path.c_str(), strerror(errno));
+    return ESP_ERR_NOT_FOUND;
+  }
+  return ESP_OK;
+}
+
+bool LittleFSHandler::file_exists(const std::string& relative_path) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return false;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return false;
+  }
+
+  std::string full_path = this->get_full_path(relative_path);
+  struct stat st;
+  return (stat(full_path.c_str(), &st) == 0 && S_ISREG(st.st_mode));
+}
+
+esp_err_t LittleFSHandler::get_file_size(const std::string& relative_path, size_t& out_size) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  std::string full_path = this->get_full_path(relative_path);
+  struct stat st;
+  if (stat(full_path.c_str(), &st) != 0) {
+    ESP_LOGE(TAG, "Failed to stat file %s", full_path.c_str());
+    return ESP_ERR_NOT_FOUND;
+  }
+  out_size = st.st_size;
+  return ESP_OK;
+}
+
+esp_err_t LittleFSHandler::create_directory(const std::string& relative_path) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  std::string full_path = this->get_full_path(relative_path);
+  if (mkdir(full_path.c_str(), 0755) != 0) {
+    if (errno == EEXIST) {
+      ESP_LOGW(TAG, "Directory %s already exists", full_path.c_str());
+      return ESP_OK;
+    }
+    ESP_LOGE(TAG, "Failed to create directory %s: %s", full_path.c_str(), strerror(errno));
+    return ESP_ERR_INVALID_STATE;
+  }
+  return ESP_OK;
+}
+
+esp_err_t LittleFSHandler::list_directory(const std::string& relative_path, std::vector<std::string>& out_entries) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  SemaphoreGuard guard(this->fs_mutex_);
+  if (guard.take() != pdTRUE) {
+    ESP_LOGE(TAG, "Failed to acquire filesystem mutex");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  std::string full_path = this->get_full_path(relative_path);
+  DIR* dir = opendir(full_path.c_str());
+  if (dir == nullptr) {
+    ESP_LOGE(TAG, "Failed to open directory %s", full_path.c_str());
+    return ESP_ERR_NOT_FOUND;
+  }
+
+  out_entries.clear();
+  struct dirent* entry;
+  while ((entry = readdir(dir)) != nullptr) {
+    // Skip . and ..
+    if (strcmp(entry->d_name, ".") == 0 || strcmp(entry->d_name, "..") == 0) {
+      continue;
+    }
+    out_entries.push_back(entry->d_name);
+  }
+  closedir(dir);
+  return ESP_OK;
+}
+
+//
+// Private methods
+//
+
+esp_err_t LittleFSHandler::open_file_(const std::string& relative_path, const char* flags, FILE*& out_file) {
+  if (!this->is_initialized_()) {
+    ESP_LOGE(TAG, "LittleFS is not initialized, cannot open file");
+    return ESP_ERR_INVALID_STATE;
+  }
+  std::string full_path = this->get_full_path(relative_path);
+  FILE* file = fopen(full_path.c_str(), flags);
+  if (file == nullptr) {
+    // Use debug level if file doesn't exist (ENOENT), warning level for other errors
+    if (errno == ENOENT) {
+      ESP_LOGD(TAG, "File %s does not exist (flags %s)", full_path.c_str(), flags);
+    } else {
+      ESP_LOGW(TAG, "Failed to open file %s with flags %s: %s", full_path.c_str(), flags, strerror(errno));
+    }
+    return ESP_ERR_NOT_FOUND;
+  }
+  out_file = file;
+  return ESP_OK;
+}
+
+esp_err_t LittleFSHandler::close_file_(FILE* file) {
+  if (file == nullptr) {
+    return ESP_OK;
+  }
+  if (fclose(file) != 0) {
+    ESP_LOGE(TAG, "Failed to close file: %s", strerror(errno));
+    return ESP_ERR_INVALID_STATE;
+  }
+  return ESP_OK;
+}
+
+esp_err_t LittleFSHandler::write_if_different_(FILE* file, const uint8_t* data, size_t size) {
+  size_t out_bytes_written = 0;
+  return this->write_if_different_(file, data, size, out_bytes_written);
+}
+
+esp_err_t LittleFSHandler::write_if_different_(FILE* file, const uint8_t* data, size_t size, size_t& out_bytes_written) {
+  if (file == nullptr || data == nullptr) {
+    ESP_LOGE(TAG, "Invalid parameters");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  // Get existing file size
+  if (fseek(file, 0, SEEK_END) != 0) {
+    ESP_LOGE(TAG, "Failed to seek to end of file");
+    return ESP_ERR_INVALID_STATE;
+  }
+  long file_size_long = ftell(file);
+  if (file_size_long < 0) {
+    ESP_LOGE(TAG, "Failed to get file size");
+    return ESP_ERR_INVALID_STATE;
+  }
+  size_t file_size = (size_t)file_size_long;
+
+  if (fseek(file, 0, SEEK_SET) != 0) {
+    ESP_LOGE(TAG, "Failed to seek to beginning of file");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  out_bytes_written = 0;
+  size_t compare_size = (file_size < size) ? file_size : size;
+
+  // Read entire file content for comparison
+  std::vector<uint8_t> existing_data;
+  if (file_size > 0) {
+    existing_data.resize(file_size);
+    size_t bytes_read = fread(existing_data.data(), 1, file_size, file);
+    if (bytes_read != file_size) {
+      ESP_LOGE(TAG, "Failed to read existing file data");
+      return ESP_ERR_INVALID_STATE;
+    }
+  }
+
+  // Compare and identify blocks that need updating
+  std::vector<bool> block_needs_update((size + BLOCK_SIZE - 1) / BLOCK_SIZE, false);
+  bool any_changes = false;
+
+  for (size_t offset = 0; offset < compare_size; offset += BLOCK_SIZE) {
+    size_t chunk_size = BLOCK_SIZE;
+    if (offset + chunk_size > compare_size) {
+      chunk_size = compare_size - offset;
+    }
+
+    if (memcmp(existing_data.data() + offset, data + offset, chunk_size) != 0) {
+      block_needs_update[offset / BLOCK_SIZE] = true;
+      any_changes = true;
+    }
+  }
+
+  // Check if size changed or there are additional blocks to write
+  if (size != file_size) {
+    any_changes = true;
+  }
+
+  if (!any_changes) {
+    ESP_LOGD(TAG, "File content unchanged, skipping write");
+    return ESP_OK;
+  }
+
+  // Seek to beginning to start writing
+  if (fseek(file, 0, SEEK_SET) != 0) {
+    ESP_LOGE(TAG, "Failed to seek to beginning for writing");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  // Write only changed blocks
+  for (size_t offset = 0; offset < compare_size; offset += BLOCK_SIZE) {
+    size_t block_index = offset / BLOCK_SIZE;
+    if (!block_needs_update[block_index]) {
+      // Skip unchanged block
+      if (fseek(file, offset + BLOCK_SIZE, SEEK_SET) != 0) {
+        // If at end of compare region, this is OK
+        if (offset + BLOCK_SIZE > compare_size) {
+          if (fseek(file, compare_size, SEEK_SET) != 0) {
+            ESP_LOGE(TAG, "Failed to seek past unchanged block");
+            return ESP_ERR_INVALID_STATE;
+          }
+        } else {
+          ESP_LOGE(TAG, "Failed to seek past unchanged block at %zu", offset);
+          return ESP_ERR_INVALID_STATE;
+        }
+      }
+      continue;
+    }
+
+    size_t chunk_size = BLOCK_SIZE;
+    if (offset + chunk_size > compare_size) {
+      chunk_size = compare_size - offset;
+    }
+
+    if (fseek(file, offset, SEEK_SET) != 0) {
+      ESP_LOGE(TAG, "Failed to seek to offset %zu", offset);
+      return ESP_ERR_INVALID_STATE;
+    }
+
+    size_t written = fwrite(data + offset, 1, chunk_size, file);
+    if (written != chunk_size) {
+      ESP_LOGE(TAG, "Failed to write block at offset %zu", offset);
+      return ESP_ERR_INVALID_STATE;
+    }
+    out_bytes_written += written;
+  }
+
+  // Handle size differences
+  if (size > file_size) {
+    // Write additional data beyond original file size
+    if (fseek(file, file_size, SEEK_SET) != 0) {
+      ESP_LOGE(TAG, "Failed to seek to end for appending");
+      return ESP_ERR_INVALID_STATE;
+    }
+    size_t written = fwrite(data + file_size, 1, size - file_size, file);
+    if (written != (size - file_size)) {
+      ESP_LOGE(TAG, "Failed to write additional data");
+      return ESP_ERR_INVALID_STATE;
+    }
+    out_bytes_written += written;
+  } else if (size < file_size) {
+    // Truncate file to new size
+    if (ftruncate(fileno(file), size) != 0) {
+      ESP_LOGE(TAG, "Failed to truncate file to size %zu", size);
+      return ESP_ERR_INVALID_STATE;
+    }
+  }
+
+  // Flush to ensure data is written to storage
+  if (fflush(file) != 0) {
+    ESP_LOGE(TAG, "Failed to flush file after write");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  return ESP_OK;
+}
+
+bool LittleFSHandler::is_initialized_() const {
+  return this->initialized_;
+}
+
+
+
+

main/io/fs_handler.h

@@ -0,0 +1,95 @@
+#pragma once
+#include "freertos/FreeRTOS.h"
+#include "freertos/semphr.h"
+#include "esp_littlefs.h"
+#include "esp_err.h"
+#include <string>
+#include <vector>
+#include <map>
+#include <memory>
+#include "esp_log.h"
+#include <semaphore_guard.h>
+
+// Forward declaration
+class LittleFSHandler;
+
+class FSGuard {
+public:
+  FSGuard(LittleFSHandler* fs_handler, const std::string& relative_path, const char* flags);
+  ~FSGuard();
+
+  esp_err_t close();
+
+  FILE* get_file() {
+    return file_;
+  }
+
+  bool is_open() const {
+    return file_ != nullptr;
+  }
+
+private:
+  LittleFSHandler* fs_handler_ = nullptr;
+  FILE* file_;
+
+  // prevent copying and moving
+  FSGuard(const FSGuard&) = delete;
+  FSGuard& operator=(const FSGuard&) = delete;
+  FSGuard(FSGuard&& other) = delete;
+  FSGuard& operator=(FSGuard&& other) = delete;
+};
+
+//LittleFSHandler interface
+// All paths are relative to the mounted filesystem root
+// Implementations should handle initialization of the filesystem, and mounting if necessary
+// When destroyed, implementations should unmount the filesystem if necessary
+// All paths are relative to the mounted filesystem root, e.g. if mounted at /littlefs, and file is /data.txt, the full path is /littlefs/data.txt
+// File operations use standard C FILE* wrapped in FSGuard for RAII
+class LittleFSHandler {
+public:
+  LittleFSHandler();
+  ~LittleFSHandler();
+
+  esp_err_t init(std::string base_path);
+  esp_err_t init(const esp_vfs_littlefs_conf_t& config);
+  std::string get_base_path() const;
+  std::string get_full_path(const std::string& relative_path) const;
+  // File operations
+  esp_err_t write_file(const std::string& relative_path, const uint8_t* data, size_t size, size_t& out_bytes_written);
+  esp_err_t write_file(FILE* file, const uint8_t* data, size_t size, size_t& out_bytes_written);
+  //
+  esp_err_t append_file(const std::string& relative_path, const uint8_t* data, size_t size, size_t& out_bytes_written);
+  esp_err_t append_file(FILE* file, const uint8_t* data, size_t size, size_t& out_bytes_written);
+  //
+  esp_err_t read_file(const std::string& relative_path, const size_t max_size, uint8_t* out_data, size_t& out_size);
+  esp_err_t read_file(FILE* file, const size_t max_size, uint8_t* out_data, size_t& out_size);
+  //
+  esp_err_t delete_file(const std::string& relative_path);
+  //
+  bool file_exists(const std::string& relative_path);
+  esp_err_t get_file_size(const std::string& relative_path, size_t& out_size);
+  // Directory operations
+  esp_err_t create_directory(const std::string& relative_path);
+  esp_err_t list_directory(const std::string& relative_path, std::vector<std::string>& out_entries);
+
+protected:
+
+  esp_err_t open_file_(const std::string& relative_path, const char* flags, FILE*& out_file);
+  esp_err_t close_file_(FILE* file);
+
+  // uses standard C FILE* for file operations
+  esp_err_t write_if_different_(FILE* file, const uint8_t* data, size_t size);
+  esp_err_t write_if_different_(FILE* file, const uint8_t* data, size_t size, size_t& out_bytes_written);
+
+  friend class FSGuard;
+
+private:
+  //
+  bool is_initialized_() const;
+
+  SemaphoreHandle_t fs_mutex_ = nullptr;
+  bool initialized_ = false;
+  std::string base_path_;
+};
+
+

main/io/nvs_handler.cpp

@@ -129,6 +129,7 @@ esp_err_t NVSStorageHandler::process_all(KeyValueProcessor processor, void* arg)
     // call the processor with the key and value
     std::string key_str = info.key;
     processor(arg, key_str, this->get(key_str));
+    nvs_close(temp_handle);
   }
   return ESP_OK;
 }
@@ -156,6 +157,7 @@ esp_err_t NVSStorageHandler::process_filtered(const std::string& key_prefix, Key
       }
       // call the processor with the key and value
       processor(arg, std::string(info.key), this->get(std::string(info.key)));
+      nvs_close(temp_handle);
     }
   }
   return ESP_OK;
@@ -186,6 +188,7 @@ esp_err_t NVSStorageHandler::process_filtered(FilterFunc filter_func, KeyValuePr
       }
       // call the processor with the key and value
       processor(arg, key_str, this->get(key_str));
+      nvs_close(temp_handle);
     }
   }
   return ESP_OK;

main/main.cpp

@@ -8,19 +8,19 @@
 #include "esp_flash.h"
 #include "esp_system.h"
 #include "esp_log.h"
+#include "esp_event.h"
 
 //
 #include "common/constants.h"
 #include "common/queue_defs.h"
+#include "common/system_context.h"
 #include "io/nvs_handler.h"
+#include "io/fs_handler.h"
 #include "info/info.h"
 #include "display/eink_display_handler.h"
 #include "display/lvgl_handler.h"
 #include "ui/ui_handler.h"
-#include "ui/app_registry.h"
+#include "ui/apps/registry.h"
-#include "ui/apps/shutdown_app.h"
-#include "ui/apps/discord_app.h"
-#include "ui/apps/mtr_app.h"
 #include <tick/lv_tick.h>
 #include "esp_lvgl_port.h"
 #include "lvgl.h"
@@ -28,10 +28,10 @@
 #include <esp_task_wdt.h>
 
 #include "lvgl.h"
+#include <esp_netif_sntp.h>
 
 // nvs storage namespaces, 15 characters max
 #define DEFAULT_STORAGE_NAMESPACE "storage"
-#define WIFI_CREDENTIALS_STORAGE_NAMESPACE "wifi_cred"
 #define TAG "Main"
 
 extern "C" void app_main(void);
@@ -44,6 +44,17 @@ void init_queues(
 
 void app_main(void) {
   display_chip_info();
+  // set to hkt
+  setenv("TZ", "HKT-8", 1);
+  tzset();
+  // Initialize default event loop early - required for UI events
+  esp_err_t err = esp_event_loop_create_default();
+  if (err != ESP_OK && err != ESP_ERR_INVALID_STATE) {
+    ESP_LOGE(TAG, "Failed to create default event loop: %s", esp_err_to_name(err));
+    vTaskDelay(5000 / portTICK_PERIOD_MS);
+    return esp_restart();
+  }
+  ESP_LOGI(TAG, "Default event loop created.\n");
 
   QueueHandle_t touch_event_queue = NULL;
   EventGroupHandle_t system_event_group = NULL, system_lifecycle_event_group = NULL;
@@ -61,9 +72,15 @@ void app_main(void) {
     DEFAULT_STORAGE_NAMESPACE
   );
 
-  auto wifi_handler = std::make_unique<WifiHandler>(
+  auto fs_handler = std::make_shared<LittleFSHandler>();
-    std::unique_ptr<KVStorageHandler>(new NVSStorageHandler(WIFI_CREDENTIALS_STORAGE_NAMESPACE))
+  esp_err_t fs_err = fs_handler->init("/littlefs");
-  );
+  if (fs_err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize LittleFS: %s", esp_err_to_name(fs_err));
+    vTaskDelay(5000 / portTICK_PERIOD_MS);
+    return esp_restart();
+  }
+
+  auto wifi_handler = std::make_unique<WifiHandler>(fs_handler);
   NetworkHandler* network_handler = new NetworkHandler(std::move(wifi_handler));
   EInkDisplayHandler* display_handler = new EInkDisplayHandler();
   // Initialize display and touch
@@ -73,7 +90,7 @@ void app_main(void) {
   // LVGL Handler
   std::unique_ptr<EInkDisplayHandler> display_uptr(display_handler);
   LVGLHandler lvgl_handler(std::move(display_uptr));
-  esp_err_t err = lvgl_handler.initLVGL(system_event_group);
+  err = lvgl_handler.initLVGL(system_event_group);
   if (err != ESP_OK) {
     ESP_LOGE(TAG, "Failed to initialize LVGL handler: %s", esp_err_to_name(err));
     vTaskDelay(5000 / portTICK_PERIOD_MS);
@@ -84,20 +101,31 @@ void app_main(void) {
   kv_storage_handler->init(system_event_group);
   network_handler->init(system_event_group);
 
+  // Make network handler available to apps
+  SystemContext::instance().set_network_handler(network_handler);
+
   //
   ESP_LOGI(TAG, "Waiting for system to be ready...\n");
   xEventGroupWaitBits(
     system_event_group,
-    // DISPLAY_READY_BIT | STORAGE_READY_BIT | NETWORK_READY_BIT,
+    DISPLAY_READY_BIT | NETWORK_READY_BIT,
-    DISPLAY_READY_BIT,
     // do not clear on exit, require explicit reset
     pdFALSE,
     pdTRUE,
     portMAX_DELAY
   );
+  esp_sntp_config_t config = ESP_NETIF_SNTP_DEFAULT_CONFIG("pool.ntp.org");
+  esp_netif_sntp_init(&config);
+
   ESP_LOGI(TAG, "System is ready. Starting main application...\n");
 
-  DiscordAppDescriptor::instance();
+  AppRegistry& app_registry = AppRegistry::instance();
+  err = app_registry.init();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize App Registry: %s", esp_err_to_name(err));
+    vTaskDelay(5000 / portTICK_PERIOD_MS);
+    return esp_restart();
+  }
   UIHandler ui_handler;
   err = ui_handler.init();
   if (err != ESP_OK) {
@@ -110,61 +138,6 @@ void app_main(void) {
   // Allow LVGL system to stabilize before creating objects
   vTaskDelay(pdMS_TO_TICKS(100));
 
-  // Create main screen and button for random rectangle demo
-  // lv_obj_t* scr = lv_scr_act();
-
-  // // Create a button
-  // lv_obj_t* btn = lv_btn_create(scr);
-  // lv_obj_set_size(btn, 200, 60);
-  // lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);
-  // lv_obj_set_style_border_width(btn, 2, 0);
-  // lv_obj_set_style_border_color(btn, lv_color_make(0, 0, 0), 0);
-
-  // // Add label to button
-  // lv_obj_t* label = lv_label_create(btn);
-  // lv_label_set_text(label, "Create Random Rect");
-  // lv_obj_center(label);
-  // lv_obj_set_style_text_color(label, lv_color_make(0, 0, 0), 0);
-
-  // // Event handler for button - creates random rectangles
-  // auto btn_event_cb = [](lv_event_t* e) {
-  //   lv_obj_t* scr = lv_scr_act();
-
-  //   // Create a random rectangle
-  //   lv_obj_t* rect = lv_obj_create(scr);
-
-  //   // Random size (30-100 pixels)
-  //   lv_coord_t width = 30 + (esp_random() % 70);
-  //   lv_coord_t height = 30 + (esp_random() % 70);
-  //   lv_obj_set_size(rect, width, height);
-
-  //   // Random position (avoid top 100px where button is)
-  //   lv_coord_t x = esp_random() % (LV_HOR_RES - width);
-  //   lv_coord_t y = 100 + (esp_random() % (LV_VER_RES - 100 - height));
-  //   lv_obj_set_pos(rect, x, y);
-
-  //   lv_obj_set_style_bg_color(rect, lv_color_make(0, 0, 0), 0);
-  //   lv_obj_set_style_bg_opa(rect, LV_OPA_COVER, 0);
-
-  //   // Make rectangle clickable
-  //   lv_obj_add_flag(rect, LV_OBJ_FLAG_CLICKABLE);
-
-  //   // Event handler to delete rectangle when clicked
-  //   auto rect_event_cb = [](lv_event_t* e) {
-  //     lv_obj_t* rect = static_cast<lv_obj_t*>(lv_event_get_target(e));
-  //     lv_obj_del(rect);
-  //     ESP_LOGI(TAG, "Rectangle deleted");
-  //     };
-
-  //   lv_obj_add_event_cb(rect, rect_event_cb, LV_EVENT_CLICKED, NULL);
-
-  //   ESP_LOGI(TAG, "Created rectangle at (%d, %d) with size %dx%d", x, y, width, height);
-  //   };
-
-  // lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);
-
-  // ESP_LOGI(TAG, "Random rectangle demo initialized. Tap button to create rectangles.\n");
-
   // wait for shutdown signal
   ESP_LOGI(TAG, "Waiting for shutdown signal...\n");
   EventBits_t bits = xEventGroupWaitBits(

main/network/CMakeLists.txt

@@ -0,0 +1,7 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/http_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/wifi_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/web_server_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/udp_client.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/network.cpp"
+)

main/network/http_handler.cpp

@@ -2,16 +2,55 @@
 #include "esp_http_client.h"
 #include "esp_log.h"
 #include "string.h"
+#include <cstring>
+#include <algorithm>
+
+esp_err_t http_event_handler(esp_http_client_event_t *evt) {
+  HttpHandler* handler = static_cast<HttpHandler*>(evt->user_data);
+  
+  switch (evt->event_id) {
+    case HTTP_EVENT_ON_DATA:
+      if (handler && evt->data_len > 0) {
+        // Pre-allocate with some extra capacity to reduce reallocations
+        size_t new_capacity = handler->response_size + evt->data_len + 1;
+        // Double capacity if we already have data, to amortize reallocation cost
+        if (handler->response_size > 0) {
+          new_capacity = std::max(new_capacity, (handler->response_size * 2) + 1);
+          new_capacity = std::min(new_capacity, (size_t)65536); // Cap at 64KB
+        }
+        char* new_buffer = new char[new_capacity];
+        if (handler->response_buffer && handler->response_size > 0) {
+          memcpy(new_buffer, handler->response_buffer, handler->response_size);
+          delete[] handler->response_buffer;
+        }
+        memcpy(new_buffer + handler->response_size, evt->data, evt->data_len);
+        handler->response_size += evt->data_len;
+        new_buffer[handler->response_size] = '\0';
+        handler->response_buffer = new_buffer;
+        handler->response_capacity = new_capacity;
+      }
+      break;
+    default:
+      break;
+  }
+  return ESP_OK;
+}
 
 HttpHandler::HttpHandler(const esp_http_client_config_t&& config, WifiHandler* wifiHandler)
-  : wifiHandler(wifiHandler) {
+  : wifiHandler(wifiHandler), response_buffer(nullptr), response_size(0) {
-  this->client = esp_http_client_init(&config);
+  esp_http_client_config_t modified_config = config;
+  modified_config.event_handler = http_event_handler;
+  modified_config.user_data = this;
+  this->client = esp_http_client_init(&modified_config);
 }
 
 HttpHandler::~HttpHandler() {
   if (this->client) {
     esp_http_client_cleanup(this->client);
   }
+  if (response_buffer) {
+    delete[] response_buffer;
+  }
 }
 
 esp_err_t HttpHandler::set_method(esp_http_client_method_t method) {
@@ -34,18 +73,13 @@ void HttpHandler::get_body(
   char*& buffer,
   int& total_len
 ) {
-  total_len = esp_http_client_get_content_length(this->client);
+  total_len = response_size;
-  buffer = new char[total_len + 1]; // +1 for null-terminator
+  if (response_buffer && response_size > 0) {
-  if (buffer) {
+    buffer = new char[response_size + 1];
-    int read_len = esp_http_client_read(this->client, buffer, total_len);
+    memcpy(buffer, response_buffer, response_size);
-    if (read_len >= 0) {
+    buffer[response_size] = '\0';
-      buffer[read_len] = '\0'; // null-terminate
   } else {
-      delete[] buffer;
     buffer = nullptr;
     total_len = 0;
   }
-  } else {
-    total_len = 0;
-  }
 }

main/network/http_handler.h

@@ -41,6 +41,7 @@ public:
 
   // only NetworkHandler can create HttpHandler instances
   friend class NetworkHandler;
+  friend esp_err_t http_event_handler(esp_http_client_event_t *evt);
   // disable copy constructor and assignment operator
   HttpHandler(const HttpHandler&) = delete;
   HttpHandler& operator=(const HttpHandler&) = delete;
@@ -52,4 +53,7 @@ private:
   esp_http_client_handle_t client;
   // backreference to WifiHandler to ensure WiFi is connected, DO NOT DELETE
   WifiHandler* wifiHandler;
+  char* response_buffer;
+  size_t response_size;
+  size_t response_capacity = 0;
 };

main/network/udp_client.cpp

@@ -19,7 +19,7 @@ UDPClient::~UDPClient() {
     close();
 }
 
-esp_err_t UDPClient::init() {
+esp_err_t UDPClient::init(uint16_t local_port) {
     if (initialized_) {
         ESP_LOGW(TAG, "Already initialized");
         return ESP_OK;
@@ -31,6 +31,23 @@ esp_err_t UDPClient::init() {
         return ESP_FAIL;
     }
 
+    // Bind to local port if specified
+    if (local_port > 0) {
+        struct sockaddr_in local_addr;
+        memset(&local_addr, 0, sizeof(local_addr));
+        local_addr.sin_family = AF_INET;
+        local_addr.sin_addr.s_addr = htonl(INADDR_ANY);
+        local_addr.sin_port = htons(local_port);
+
+        if (bind(sock_fd_, (struct sockaddr*)&local_addr, sizeof(local_addr)) < 0) {
+            ESP_LOGE(TAG, "Failed to bind to port %u: errno %d", local_port, errno);
+            ::close(sock_fd_);
+            sock_fd_ = -1;
+            return ESP_FAIL;
+        }
+        ESP_LOGI(TAG, "Bound to local port %u", local_port);
+    }
+
     // Set socket to non-blocking mode
     esp_err_t err = set_nonblocking();
     if (err != ESP_OK) {

main/network/udp_client.h

@@ -19,9 +19,10 @@ public:
 
     /**
      * @brief Initialize UDP socket
+     * @param local_port Local port to bind to (0 = system assigns port)
      * @return ESP_OK on success, error code otherwise
      */
-    esp_err_t init();
+    esp_err_t init(uint16_t local_port = 0);
 
     /**
      * @brief Configure remote endpoint

main/network/web_server_handler.cpp

@@ -0,0 +1,113 @@
+#include "web_server_handler.h"
+#include "esp_log.h"
+#include <cstring>
+#include <sys/socket.h>
+#include <netinet/in.h>
+#include <unistd.h>
+
+static const char* TAG = "WebServerHandler";
+
+WebServerHandler::WebServerHandler() { }
+
+WebServerHandler::~WebServerHandler() {
+  stop();
+}
+
+uint16_t WebServerHandler::start(const std::string& auth_key, uint16_t base_port) {
+  if (server_ != nullptr) {
+    ESP_LOGW(TAG, "Server already running on port %d", current_port_);
+    return current_port_;
+  }
+
+  auth_key_ = auth_key;
+
+  // Try to find a free port
+  uint16_t port = base_port;
+  const uint16_t max_attempts = 100;
+
+  for (uint16_t attempt = 0; attempt < max_attempts; attempt++) {
+    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
+    config.server_port = port;
+    config.ctrl_port = port + 1000; // Control port
+    config.max_open_sockets = 7;
+    config.lru_purge_enable = true;
+
+    esp_err_t err = httpd_start(&server_, &config);
+
+    if (err == ESP_OK) {
+      current_port_ = port;
+      ESP_LOGI(TAG, "Web server started successfully on port %d", current_port_);
+      return current_port_;
+    } else if (err == ESP_ERR_HTTPD_ALLOC_MEM) {
+      ESP_LOGE(TAG, "Failed to allocate memory for web server");
+      return 0;
+    } else {
+      // Port likely in use, try next port
+      ESP_LOGD(TAG, "Port %d in use, trying next port", port);
+      port++;
+    }
+  }
+
+  ESP_LOGE(TAG, "Failed to find free port after %d attempts", max_attempts);
+  return 0;
+}
+
+esp_err_t WebServerHandler::stop() {
+  if (server_ == nullptr) {
+    return ESP_OK;
+  }
+
+  esp_err_t err = httpd_stop(server_);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to stop web server: %s", esp_err_to_name(err));
+    return err;
+  }
+
+  server_ = nullptr;
+  current_port_ = 0;
+  auth_key_.clear();
+
+  ESP_LOGI(TAG, "Web server stopped");
+  return ESP_OK;
+}
+
+esp_err_t WebServerHandler::register_uri_handler(const httpd_uri_t* uri_handler) {
+  if (server_ == nullptr) {
+    ESP_LOGE(TAG, "Server not running, cannot register URI handler");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  esp_err_t err = httpd_register_uri_handler(server_, uri_handler);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register URI handler: %s", esp_err_to_name(err));
+    return err;
+  }
+
+  return ESP_OK;
+}
+
+bool WebServerHandler::validate_auth(const char* query_string) const {
+  if (!query_string || auth_key_.empty()) {
+    return false;
+  }
+
+  // Look for "auth=<key>" in query string
+  const char* auth_param = strstr(query_string, "auth=");
+  if (!auth_param) {
+    return false;
+  }
+
+  // Skip "auth="
+  auth_param += 5;
+
+  // Find end of auth value (& or end of string)
+  const char* end = strchr(auth_param, '&');
+  size_t auth_len = end ? (size_t)(end - auth_param) : strlen(auth_param);
+
+  // Compare with stored auth key
+  if (auth_len != auth_key_.length()) {
+    return false;
+  }
+
+  return strncmp(auth_param, auth_key_.c_str(), auth_len) == 0;
+}

main/network/web_server_handler.h

@@ -0,0 +1,42 @@
+#pragma once
+#include "esp_http_server.h"
+#include "esp_err.h"
+#include <string>
+#include <functional>
+
+class WebServerHandler {
+public:
+  WebServerHandler();
+  ~WebServerHandler();
+
+  // Start web server, finds a free port starting from base_port
+  // Returns the actual port used, or 0 on failure
+  uint16_t start(const std::string& auth_key, uint16_t base_port = 8080);
+
+  // Stop web server
+  esp_err_t stop();
+
+  // Check if server is running
+  bool is_running() const { return server_ != nullptr; }
+
+  // Get the current port
+  uint16_t get_port() const { return current_port_; }
+
+  // Get the auth key
+  std::string get_auth_key() const { return auth_key_; }
+
+  // Register a URI handler
+  esp_err_t register_uri_handler(const httpd_uri_t* uri_handler);
+
+  // Validate auth key from query string
+  bool validate_auth(const char* query_string) const;
+
+private:
+  // Prevent copying
+  WebServerHandler(const WebServerHandler&) = delete;
+  WebServerHandler& operator=(const WebServerHandler&) = delete;
+
+  httpd_handle_t server_ = nullptr;
+  uint16_t current_port_ = 0;
+  std::string auth_key_;
+};

main/network/wifi_handler.cpp

@@ -8,16 +8,27 @@
 #include "common/semaphore_guard.h"
 #include "cJSON.h"
 
-static const char* TAG = "WifiHandler";
+#define TAG "WifiHandler"
-static const char* WIFI_SSID_KEY = "ssid";
+#define WIFI_CRED_FILE_PATH "wifi_credentials.json"
-static const char* WIFI_PASSWORD_STORE_KEY = "psw";
+
+/*
+ * WiFi Credentials JSON Structure:
+ * {
+ *   "current_ssid": "MyWiFi",
+ *   "credentials": {
+ *     "MyWiFi": {
+ *       "password": "mypassword123"
+ *     },
+ *     "OtherNetwork": {
+ *       "password": "otherpass456"
+ *     }
+ *   }
+ * }
+ */
 
 WifiHandler::WifiHandler(
-  // this handler is used to store/retrieve WiFi credentials
+  std::shared_ptr<LittleFSHandler> fs_handler_
-  // should have a unique namespace for WiFi credentials
+) : fs_handler_(std::move(fs_handler_)) {
-  // it will be owned by WifiHandler and deleted in its destructor
-  std::unique_ptr<KVStorageHandler> kvs
-) : kvs(std::move(kvs)) {
   this->s_wifi_event_group = xEventGroupCreate();
   if (!this->s_wifi_event_group) {
     ESP_LOGE(TAG, "Failed to create WiFi event group");
@@ -34,10 +45,13 @@ WifiHandler::WifiHandler(
   if (!this->credential_mutex) {
     ESP_LOGE(TAG, "Failed to create credential mutex");
   }
-  if (this->kvs == nullptr) {
+  if (this->fs_handler_ == nullptr) {
-    ESP_LOGW(TAG, "KVStorageHandler is null, WiFi credentials will not be stored");
+    ESP_LOGW(TAG, "FSHandler is null, WiFi credentials will not be stored");
   } else {
-    this->kvs->init(nullptr);
+    esp_err_t err = this->fs_handler_->init("/littlefs");
+    if (err != ESP_OK) {
+      ESP_LOGE(TAG, "Failed to initialize FSHandler: %s", esp_err_to_name(err));
+    }
   }
 }
 
@@ -55,8 +69,8 @@ WifiHandler::~WifiHandler() {
     esp_event_handler_unregister(WIFI_EVENT, ESP_EVENT_ANY_ID, &WifiHandler::wifi_event_handler);
     esp_event_handler_unregister(IP_EVENT, IP_EVENT_STA_GOT_IP, &WifiHandler::wifi_event_handler);
     this->initialized = false;
-    // unique_ptr will automatically delete the object
+    //
-    this->kvs = nullptr;
+    this->fs_handler_ = nullptr;
   }
 }
 
@@ -323,8 +337,8 @@ void WifiHandler::wifi_event_handler(void* arg, esp_event_base_t event_base, int
 //
 
 void WifiHandler::store_wifi_credentials(const std::string& ssid, const std::string& password) {
-  if (!kvs) {
+  if (!fs_handler_) {
-    ESP_LOGW(TAG, "KVStorageHandler not set, cannot store WiFi credentials");
+    ESP_LOGW(TAG, "FSHandler not set, cannot store WiFi credentials");
     return;
   }
   SemaphoreGuard guard(this->credential_mutex);
@@ -334,36 +348,52 @@ void WifiHandler::store_wifi_credentials(const std::string& ssid, const std::str
     return;
   }
 
-  // Store current SSID
-  kvs->put(WIFI_SSID_KEY, ssid);
-
-  // Store the password according to the JSON structure
-  std::string password_key_store = kvs->get(WIFI_PASSWORD_STORE_KEY);
   cJSON* json = nullptr;
-  if (password_key_store.empty()) {
+
-    // create new JSON object
+  // Try to read existing credentials file
-    json = cJSON_CreateObject();
+  if (fs_handler_->file_exists(WIFI_CRED_FILE_PATH)) {
-  } else {
+    // Read existing file
-    // parse existing JSON
+    size_t file_size = 0;
-    json = cJSON_Parse(password_key_store.c_str());
+    esp_err_t err = fs_handler_->get_file_size(WIFI_CRED_FILE_PATH, file_size);
+    if (err == ESP_OK && file_size > 0) {
+      std::vector<uint8_t> file_data(file_size + 1); // +1 for null terminator
+      size_t bytes_read = 0;
+      err = fs_handler_->read_file(WIFI_CRED_FILE_PATH, file_size, file_data.data(), bytes_read);
+      if (err == ESP_OK) {
+        file_data[bytes_read] = '\0'; // Null terminate
+        json = cJSON_Parse(reinterpret_cast<const char*>(file_data.data()));
+        if (json == nullptr) {
+          ESP_LOGE(TAG, "Failed to parse existing WiFi credentials JSON, creating new");
+        }
+      }
+    }
+  }
+
+  // Create new JSON if parsing failed or file doesn't exist
   if (json == nullptr) {
-      ESP_LOGE(TAG, "Failed to parse existing WiFi password JSON, creating new");
     json = cJSON_CreateObject();
   }
+
+  // Set current SSID
+  cJSON* current_ssid_item = cJSON_GetObjectItem(json, "current_ssid");
+  if (current_ssid_item != nullptr) {
+    cJSON_SetValuestring(current_ssid_item, ssid.c_str());
+  } else {
+    cJSON_AddStringToObject(json, "current_ssid", ssid.c_str());
   }
+
+  // Get or create credentials object
   cJSON* credentials = cJSON_GetObjectItem(json, "credentials");
   if (credentials == nullptr || !cJSON_IsObject(credentials)) {
-    // create credentials object if it doesn't exist
     credentials = cJSON_CreateObject();
     cJSON_AddItemToObject(json, "credentials", credentials);
   }
 
-  // Limit stored credentials to prevent NVS overflow (keep max 10 SSIDs)
+  // Limit stored credentials to prevent excessive file size (keep max 10 SSIDs)
   int credential_count = cJSON_GetArraySize(credentials);
   if (credential_count >= 10) {
-    ESP_LOGW(TAG, "Too many stored credentials (%d), clearing old ones", credential_count);
+    ESP_LOGW(TAG, "Too many stored credentials (%d), keeping only current SSID", credential_count);
-    // Keep only the current SSID's credentials, clear others
+    // Keep only the current SSID's credentials
-    cJSON_DeleteItemFromObject(credentials, ssid.c_str()); // Remove if exists
     cJSON* new_credentials = cJSON_CreateObject();
     cJSON_ReplaceItemInObject(json, "credentials", new_credentials);
     credentials = new_credentials;
@@ -372,20 +402,27 @@ void WifiHandler::store_wifi_credentials(const std::string& ssid, const std::str
   // Remove existing entry for this SSID to update it
   cJSON_DeleteItemFromObject(credentials, ssid.c_str());
 
-  // create SSID object
+  // Create SSID object with password
   cJSON* ssid_item = cJSON_CreateObject();
-  // add password field
   cJSON_AddStringToObject(ssid_item, "password", password.c_str());
-  // add SSID object to credentials
   cJSON_AddItemToObject(credentials, ssid.c_str(), ssid_item);
 
-  // store updated JSON string
+  // Serialize and write to file
-  char* updated_json_str = cJSON_PrintUnformatted(json);
+  char* json_str = cJSON_PrintUnformatted(json);
-  if (updated_json_str) {
+  if (json_str) {
-    esp_err_t err = ESP_OK;
+    size_t bytes_written = 0;
-    kvs->put(WIFI_PASSWORD_STORE_KEY, std::string(updated_json_str));
+    esp_err_t err = fs_handler_->write_file(
-    // Note: Error handling is done in nvs_handler.cpp put() method
+      WIFI_CRED_FILE_PATH,
-    cJSON_free(updated_json_str);
+      reinterpret_cast<const uint8_t*>(json_str),
+      strlen(json_str),
+      bytes_written
+    );
+    if (err != ESP_OK) {
+      ESP_LOGE(TAG, "Failed to write WiFi credentials to file: %s", esp_err_to_name(err));
+    } else {
+      ESP_LOGI(TAG, "Stored WiFi credentials for SSID: %s", ssid.c_str());
+    }
+    cJSON_free(json_str);
   } else {
     ESP_LOGE(TAG, "Failed to serialize WiFi credentials JSON");
   }
@@ -393,59 +430,104 @@ void WifiHandler::store_wifi_credentials(const std::string& ssid, const std::str
 }
 
 void WifiHandler::get_wifi_credentials(std::string& out_ssid, std::string& out_password) {
-  if (!kvs) {
+  if (!fs_handler_) {
-    ESP_LOGW(TAG, "KVStorageHandler not set, cannot get WiFi credentials");
+    ESP_LOGW(TAG, "FSHandler not set, cannot get WiFi credentials");
-    return;
-  }
-  SemaphoreGuard guard(this->credential_mutex);
-  // wait up to 5 seconds to take the mutex
-  if (!guard.take(5000 / portTICK_PERIOD_MS)) {
-    ESP_LOGE(TAG, "Failed to take credential mutex");
-    return;
-  }
-  out_ssid = kvs->get(WIFI_SSID_KEY);
-  if (out_ssid.empty()) {
     out_ssid = "";
     out_password = "";
     return;
   }
-  // password is from KV storage, may be nullptr
+
-  std::string password_key_store = kvs->get(WIFI_PASSWORD_STORE_KEY);
+  SemaphoreGuard guard(this->credential_mutex);
-  if (password_key_store.empty()) {
+  // wait up to 5 seconds to take the mutex
+  if (!guard.take(5000 / portTICK_PERIOD_MS)) {
+    ESP_LOGE(TAG, "Failed to take credential mutex");
+    out_ssid = "";
     out_password = "";
     return;
   }
-  // parse from json
+
-  cJSON* json = cJSON_Parse(password_key_store.c_str());
+  // Check if credentials file exists
+  if (!fs_handler_->file_exists(WIFI_CRED_FILE_PATH)) {
+    ESP_LOGD(TAG, "WiFi credentials file does not exist");
+    out_ssid = "";
+    out_password = "";
+    return;
+  }
+
+  // Read credentials file
+  size_t file_size = 0;
+  esp_err_t err = fs_handler_->get_file_size(WIFI_CRED_FILE_PATH, file_size);
+  if (err != ESP_OK || file_size == 0) {
+    ESP_LOGE(TAG, "Failed to get WiFi credentials file size");
+    out_ssid = "";
+    out_password = "";
+    return;
+  }
+
+  std::vector<uint8_t> file_data(file_size + 1); // +1 for null terminator
+  size_t bytes_read = 0;
+  err = fs_handler_->read_file(WIFI_CRED_FILE_PATH, file_size, file_data.data(), bytes_read);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to read WiFi credentials file: %s", esp_err_to_name(err));
+    out_ssid = "";
+    out_password = "";
+    return;
+  }
+  file_data[bytes_read] = '\0'; // Null terminate
+
+  // Parse JSON
+  cJSON* json = cJSON_Parse(reinterpret_cast<const char*>(file_data.data()));
   if (json == nullptr) {
-    ESP_LOGE(TAG, "Failed to parse WiFi password JSON");
+    ESP_LOGE(TAG, "Failed to parse WiFi credentials JSON");
+    out_ssid = "";
     out_password = "";
     return;
   }
+
+  // Get current SSID
+  cJSON* current_ssid_item = cJSON_GetObjectItem(json, "current_ssid");
+  if (current_ssid_item == nullptr || !cJSON_IsString(current_ssid_item)) {
+    ESP_LOGE(TAG, "WiFi credentials JSON does not contain valid 'current_ssid' field");
+    out_ssid = "";
+    out_password = "";
+    cJSON_Delete(json);
+    return;
+  }
+  out_ssid = current_ssid_item->valuestring;
+
+  // Get credentials object
   cJSON* credentials = cJSON_GetObjectItem(json, "credentials");
   if (credentials == nullptr || !cJSON_IsObject(credentials)) {
-    ESP_LOGE(TAG, "WiFi password JSON does not contain valid 'credentials' object");
+    ESP_LOGE(TAG, "WiFi credentials JSON does not contain valid 'credentials' object");
+    out_ssid = "";
     out_password = "";
     cJSON_Delete(json);
     return;
   }
-  // get the ssid value
+
+  // Get SSID entry
   cJSON* ssid_item = cJSON_GetObjectItem(credentials, out_ssid.c_str());
   if (ssid_item == nullptr || !cJSON_IsObject(ssid_item)) {
-    ESP_LOGE(TAG, "WiFi password JSON does not contain valid SSID field for SSID: %s", out_ssid.c_str());
+    ESP_LOGE(TAG, "WiFi credentials JSON does not contain entry for SSID: %s", out_ssid.c_str());
+    out_ssid = "";
     out_password = "";
     cJSON_Delete(json);
     return;
   }
-  cJSON* password = cJSON_GetObjectItem(ssid_item, "password");
+
-  if (password == nullptr || !cJSON_IsString(password)) {
+  // Get password
-    ESP_LOGE(TAG, "WiFi password JSON does not contain valid 'password' field for SSID: %s", out_ssid.c_str());
+  cJSON* password_item = cJSON_GetObjectItem(ssid_item, "password");
+  if (password_item == nullptr || !cJSON_IsString(password_item)) {
+    ESP_LOGE(TAG, "WiFi credentials JSON does not contain valid 'password' field for SSID: %s", out_ssid.c_str());
+    out_ssid = "";
     out_password = "";
     cJSON_Delete(json);
     return;
   }
-  out_password = password->valuestring;
+  out_password = password_item->valuestring;
+
   cJSON_Delete(json);
+  ESP_LOGD(TAG, "Retrieved WiFi credentials for SSID: %s", out_ssid.c_str());
 }
 
 EventBits_t WifiHandler::wait_for_connection(TickType_t ticks_to_wait) {
@@ -457,3 +539,23 @@ EventBits_t WifiHandler::wait_for_connection(TickType_t ticks_to_wait) {
     ticks_to_wait
   );
 }
+
+std::string WifiHandler::get_current_ip() const {
+  esp_netif_t* netif = esp_netif_get_handle_from_ifkey("WIFI_STA_DEF");
+  if (!netif) {
+    ESP_LOGW(TAG, "Failed to get netif handle");
+    return "";
+  }
+
+  esp_netif_ip_info_t ip_info;
+  esp_err_t err = esp_netif_get_ip_info(netif, &ip_info);
+  if (err != ESP_OK) {
+    ESP_LOGW(TAG, "Failed to get IP info: %s", esp_err_to_name(err));
+    return "";
+  }
+
+  // Convert IP address to string
+  char ip_str[16];
+  snprintf(ip_str, sizeof(ip_str), IPSTR, IP2STR(&ip_info.ip));
+  return std::string(ip_str);
+}

main/network/wifi_handler.h

@@ -1,5 +1,6 @@
 #pragma once
-#include "io/io.h"
+#include "freertos/FreeRTOS.h"
+#include "io/fs_handler.h"
 #include "esp_wifi.h"
 #include "freertos/event_groups.h"
 
@@ -13,7 +14,7 @@ public:
     // this handler is used to store/retrieve WiFi credentials
     // should have a unique namespace for WiFi credentials
     // it will be owned by WifiHandler and deleted in its destructor
-    std::unique_ptr<KVStorageHandler> kvs
+    std::shared_ptr<LittleFSHandler> fs_handler_
   );
   ~WifiHandler();
 
@@ -30,6 +31,9 @@ public:
     uint16_t& ap_count
   );
 
+  // Get current IP address (empty string if not connected)
+  std::string get_current_ip() const;
+
   static void wifi_event_handler(void* arg, esp_event_base_t event_base, int32_t event_id, void* event_data);
 
 private:
@@ -44,7 +48,7 @@ private:
   void get_wifi_credentials(std::string& out_ssid, std::string& out_password);
 
   bool initialized = false;
-  std::unique_ptr<KVStorageHandler> kvs = nullptr;
+  std::shared_ptr<LittleFSHandler> fs_handler_ = nullptr;
   EventGroupHandle_t s_wifi_event_group = 0;
   SemaphoreHandle_t scan_mutex = nullptr;
   SemaphoreHandle_t connection_mutex = nullptr;

main/ui/CMakeLists.txt

@@ -0,0 +1,14 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/ui_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/root_layout.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/interaction_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/events.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/apps/registry.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/widgets/textarea.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/widgets/button.cpp"
+)
+
+# Apps control: include apps/CMakeLists.txt which selects which apps to add
+if(EXISTS "${CMAKE_CURRENT_LIST_DIR}/apps/CMakeLists.txt")
+    include("${CMAKE_CURRENT_LIST_DIR}/apps/CMakeLists.txt")
+endif()

main/ui/app_registry.h

@@ -1,39 +0,0 @@
-#pragma once
-#include "ui/ui_app.h"
-#include <vector>
-
-/**
- * @brief Registry for all available apps
- *
- * This singleton class maintains a list of all registered
- * AppDescriptor instances, allowing the UIHandler or other
- * components to query available apps.
- */
-class AppRegistry {
-public:
-  static AppRegistry& instance() {
-    static AppRegistry registry;
-    return registry;
-  }
-
-  AppRegistry(const AppRegistry&) = delete;
-  void operator=(const AppRegistry&) = delete;
-  AppRegistry(AppRegistry&&) = delete;
-  void operator=(AppRegistry&&) = delete;
-
-
-  // Register a new app descriptor
-  // The registry takes ownership of the descriptor pointer.
-  void register_app(AppDescriptor* app_descriptor) {
-    _app_descriptors.push_back(app_descriptor);
-  }
-
-  const std::vector<AppDescriptor*>& get_app_descriptors() const {
-    return _app_descriptors;
-  }
-
-private:
-  AppRegistry() = default;
-  ~AppRegistry() = default;
-  std::vector<AppDescriptor*> _app_descriptors = {};
-};

main/ui/apps/CMakeLists.txt

@@ -0,0 +1,19 @@
+# Control which apps are included in the build.
+# Override `ENABLED_APPS` from the top-level CMake command line to change apps.
+if(NOT DEFINED ENABLED_APPS)
+    set(ENABLED_APPS "iotdis" "travel")
+    endif()
+message(STATUS "Enabled apps: ${ENABLED_APPS}")
+
+foreach(app IN LISTS ENABLED_APPS)
+    set(APP_DIR "${CMAKE_CURRENT_LIST_DIR}/${app}")
+    if(EXISTS "${APP_DIR}/CMakeLists.txt")
+        include("${APP_DIR}/CMakeLists.txt")
+    else()
+        message(WARNING "App '${app}' has no CMakeLists.txt — attempting to add any sources directly")
+        file(GLOB APP_SRCS "${APP_DIR}/*.c" "${APP_DIR}/*.cpp" "${APP_DIR}/*/*.c" "${APP_DIR}/*/*.cpp")
+        if(APP_SRCS)
+            list(APPEND SRCS ${APP_SRCS})
+        endif()
+    endif()
+endforeach()

main/ui/apps/app.h

@@ -3,6 +3,10 @@
 #include "lvgl.h"
 #include "esp_err.h"
 #include <string>
+#include <memory>
+
+// Forward declaration
+class InteractionHandler;
 
 /**
  * @brief Base class for all UI applications
@@ -24,9 +28,10 @@ public:
    * between the header and navigation bar.
    *
    * @param container LVGL container object for this app
+   * @param interaction_handler Pointer to interaction handler for keyboard support
    * @return ESP_OK on success, error code otherwise
    */
-  virtual esp_err_t init(lv_obj_t* container) = 0;
+  virtual esp_err_t init(lv_obj_t* container, InteractionHandler* interaction_handler) = 0;
 
   /**
    * @brief Deinitialize and clean up app resources
@@ -48,51 +53,39 @@ public:
   virtual std::string get_name(void) const = 0;
 
   /**
-   * @brief Handle system events passed from UIHandler
+   * @brief Handle back button press
    *
-   * System events include network status changes, storage ready,
+   * Called when the back button is pressed.
-   * display refresh, and other system-level events.
+   * The app can choose to handle it (e.g., close a dialog)
+   * or return false to let UIHandler handle it (e.g., return to main screen).
    *
-   * @param event_type Type/ID of the event
+   * @return true if the event was handled, false otherwise
-   * @param event_data Optional event data payload
    */
-  virtual void handle_event(uint32_t event_type, void* event_data = nullptr) { }
-
   virtual bool on_back_button_pressed(void) {
     return false; // default: not handled
   }
 
-  /**
-   * @brief Get the app's root container
-   *
-   * @return lv_obj_t* pointer to the app's container
-   */
-  lv_obj_t* get_container(void) const {
-    return _container;
-  }
-
 protected:
-  lv_obj_t* _container = nullptr;  ///< LVGL container provided by UIHandler
+  lv_obj_t* container_ = nullptr;  ///< LVGL container provided by UIHandler
 };
 
-
 class AppDescriptor {
 public:
   virtual ~AppDescriptor() = default;
   virtual void draw_icon(lv_obj_t* parent) = 0;
 
   std::string get_name() const {
-    return _name;
+    return name_;
   }
 
   UIApp* get_app_instance() const {
-    return _app_instance;
+    return app_instance_.get();
   }
 
 protected:
-  AppDescriptor(std::string name, UIApp* app_instance)
+  AppDescriptor(std::string name, std::unique_ptr<UIApp> app_instance)
-    : _name(name), _app_instance(app_instance) { }
+    : name_(name), app_instance_(std::move(app_instance)) { }
 
-  std::string _name;
+  std::string name_;
-  UIApp* _app_instance;
+  std::unique_ptr<UIApp> app_instance_;
 };

main/ui/apps/discord_app.cpp

@@ -1,652 +0,0 @@
-#include "discord_app.h"
-#include "esp_log.h"
-#include "network/network.h"
-#include <sstream>
-
-static const char* TAG = "DiscordApp";
-
-// ============================================================================
-// DiscordApp Implementation
-// ============================================================================
-
-DiscordApp::DiscordApp()
-  : page_stack_(nullptr)
-  , status_icon_label_(nullptr)
-  , status_text_label_(nullptr)
-  , mute_button_(nullptr)
-  , error_notification_(nullptr)
-  , ip_textarea_(nullptr)
-  , port_textarea_(nullptr)
-  , test_result_label_(nullptr)
-  , remote_port_(0)
-  , settings_configured_(false)
-  , current_state_(VoiceState::UNKNOWN)
-  , state_mutex_(nullptr)
-  , poll_task_handle_(nullptr)
-  , stop_polling_(false)
-  , consecutive_failures_(0)
-  , storage_(nullptr) {
-
-  // Create mutex for thread-safe state access
-  state_mutex_ = xSemaphoreCreateMutex();
-
-  // Initialize storage
-  storage_ = new NVSStorageHandler(NVS_NAMESPACE);
-}
-
-DiscordApp::~DiscordApp() {
-  stop_polling_task();
-
-  if (state_mutex_) {
-    vSemaphoreDelete(state_mutex_);
-  }
-
-  if (storage_) {
-    delete storage_;
-  }
-}
-
-esp_err_t DiscordApp::init(lv_obj_t* container) {
-  ESP_LOGI(TAG, "Initializing Discord app");
-
-  _container = container;
-
-  // Initialize storage
-  storage_->init(nullptr);
-
-  // Load saved settings
-  load_settings();
-
-  // Initialize UDP client
-  udp_client_.init();
-
-  // Configure UDP if settings are available
-  if (settings_configured_) {
-    udp_client_.configure(remote_ip_, remote_port_);
-  }
-
-  // Create page stack
-  page_stack_ = new PageStack(container);
-
-  // Build main page
-  page_stack_->push([this](lv_obj_t* page) {
-    build_main_page(page);
-    });
-
-  // Start polling task
-  start_polling_task();
-
-  return ESP_OK;
-}
-
-esp_err_t DiscordApp::deinit() {
-  ESP_LOGI(TAG, "Deinitializing Discord app");
-
-  // Stop polling
-  stop_polling_task();
-
-  // Clean up page stack
-  if (page_stack_) {
-    delete page_stack_;
-    page_stack_ = nullptr;
-  }
-
-  // Close UDP client
-  udp_client_.close();
-
-  // Reset widget pointers
-  status_icon_label_ = nullptr;
-  status_text_label_ = nullptr;
-  mute_button_ = nullptr;
-  error_notification_ = nullptr;
-  ip_textarea_ = nullptr;
-  port_textarea_ = nullptr;
-  test_result_label_ = nullptr;
-
-  return ESP_OK;
-}
-
-void DiscordApp::handle_event(uint32_t event_type, void* event_data) {
-  // Handle system events if needed
-}
-
-bool DiscordApp::on_back_button_pressed() {
-  // If on settings page, go back to main page
-  if (page_stack_ && page_stack_->depth() > 1) {
-    page_stack_->pop();
-    return true;
-  }
-
-  // Let system handle back (return to app icons)
-  return false;
-}
-
-// ============================================================================
-// Main Page UI
-// ============================================================================
-
-void DiscordApp::build_main_page(lv_obj_t* page) {
-  // Set up main page with flex column layout
-  lv_obj_set_flex_flow(page, LV_FLEX_FLOW_COLUMN);
-  lv_obj_set_flex_align(page, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
-  lv_obj_set_style_pad_all(page, 10, 0);
-
-  // === Top Section: Error Notification ===
-  error_notification_ = lv_obj_create(page);
-  lv_obj_set_width(error_notification_, LV_PCT(90));
-  lv_obj_set_height(error_notification_, LV_SIZE_CONTENT);
-  lv_obj_set_style_bg_color(error_notification_, lv_color_hex(0xFF0000), 0);
-  lv_obj_set_style_bg_opa(error_notification_, LV_OPA_70, 0);
-  lv_obj_set_style_pad_all(error_notification_, 10, 0);
-  lv_obj_set_style_radius(error_notification_, 8, 0);
-  lv_obj_add_flag(error_notification_, LV_OBJ_FLAG_HIDDEN);
-  lv_obj_set_flex_flow(error_notification_, LV_FLEX_FLOW_ROW);
-  lv_obj_set_flex_align(error_notification_, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
-
-  lv_obj_t* error_label = lv_label_create(error_notification_);
-  lv_label_set_text(error_label, LV_SYMBOL_WARNING " Connection Lost");
-  lv_obj_set_style_text_color(error_label, lv_color_white(), 0);
-
-  // === Center Section: Main Content ===
-  lv_obj_t* center_container = lv_obj_create(page);
-  lv_obj_set_size(center_container, LV_PCT(100), LV_SIZE_CONTENT);
-  lv_obj_set_style_bg_opa(center_container, LV_OPA_TRANSP, 0);
-  lv_obj_set_style_border_width(center_container, 0, 0);
-  lv_obj_set_style_pad_all(center_container, 0, 0);
-  lv_obj_set_flex_flow(center_container, LV_FLEX_FLOW_COLUMN);
-  lv_obj_set_flex_align(center_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
-  lv_obj_set_style_pad_row(center_container, 15, 0);
-  lv_obj_set_flex_grow(center_container, 1);
-
-  // Status icon (large, centered)
-  status_icon_label_ = lv_label_create(center_container);
-  lv_label_set_text(status_icon_label_, LV_SYMBOL_MUTE);
-
-  // Status text
-  status_text_label_ = lv_label_create(center_container);
-  lv_label_set_text(status_text_label_, "Unknown Status");
-
-  // Mute button
-  mute_button_ = lv_btn_create(center_container);
-  lv_obj_set_size(mute_button_, 200, 60);
-  lv_obj_add_event_cb(mute_button_, on_mute_button_clicked, LV_EVENT_CLICKED, this);
-
-  lv_obj_t* mute_label = lv_label_create(mute_button_);
-  lv_label_set_text(mute_label, "MUTE");
-  lv_obj_center(mute_label);
-
-  // === Bottom Section: Settings and Config Prompt ===
-  lv_obj_t* bottom_container = lv_obj_create(page);
-  lv_obj_set_size(bottom_container, LV_PCT(100), LV_SIZE_CONTENT);
-  lv_obj_set_style_bg_opa(bottom_container, LV_OPA_TRANSP, 0);
-  lv_obj_set_style_border_width(bottom_container, 0, 0);
-  lv_obj_set_style_pad_all(bottom_container, 0, 0);
-  lv_obj_set_flex_flow(bottom_container, LV_FLEX_FLOW_ROW);
-  lv_obj_set_flex_align(bottom_container, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
-
-  // Config prompt (left side)
-  if (!settings_configured_) {
-    lv_obj_t* config_prompt = lv_label_create(bottom_container);
-    lv_label_set_text(config_prompt, "Tap " LV_SYMBOL_SETTINGS " to configure");
-    lv_obj_set_style_text_color(config_prompt, lv_color_hex(0x888888), 0);
-  } else {
-    // Empty spacer if configured
-    lv_obj_t* spacer = lv_obj_create(bottom_container);
-    lv_obj_set_size(spacer, 0, 0);
-    lv_obj_set_style_bg_opa(spacer, LV_OPA_TRANSP, 0);
-    lv_obj_set_style_border_width(spacer, 0, 0);
-  }
-
-  // Settings button (right side)
-  lv_obj_t* settings_btn = lv_btn_create(bottom_container);
-  lv_obj_set_size(settings_btn, 60, 60);
-  lv_obj_add_event_cb(settings_btn, on_settings_button_clicked, LV_EVENT_CLICKED, this);
-
-  lv_obj_t* settings_icon = lv_label_create(settings_btn);
-  lv_label_set_text(settings_icon, LV_SYMBOL_SETTINGS);
-  lv_obj_center(settings_icon);
-
-  // Update display with current state
-  update_status_display();
-}
-
-// ============================================================================
-// Settings Page UI
-// ============================================================================
-
-void DiscordApp::build_settings_page(lv_obj_t* page) {
-  // Title
-  lv_obj_t* title = lv_label_create(page);
-  lv_label_set_text(title, "Discord Bridge Settings");
-  // Using default font
-  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);
-
-  // IP address label
-  lv_obj_t* ip_label = lv_label_create(page);
-  lv_label_set_text(ip_label, "Bridge IP Address:");
-  lv_obj_align(ip_label, LV_ALIGN_TOP_LEFT, 20, 70);
-
-  // IP address textarea
-  ip_textarea_ = lv_textarea_create(page);
-  lv_obj_set_size(ip_textarea_, 300, 50);
-  lv_obj_align(ip_textarea_, LV_ALIGN_TOP_LEFT, 20, 100);
-  lv_textarea_set_one_line(ip_textarea_, true);
-  lv_textarea_set_placeholder_text(ip_textarea_, "e.g., 192.168.1.100");
-
-  if (!remote_ip_.empty()) {
-    lv_textarea_set_text(ip_textarea_, remote_ip_.c_str());
-  }
-
-  // Port label
-  lv_obj_t* port_label = lv_label_create(page);
-  lv_label_set_text(port_label, "Bridge Port:");
-  lv_obj_align(port_label, LV_ALIGN_TOP_LEFT, 20, 170);
-
-  // Port textarea
-  port_textarea_ = lv_textarea_create(page);
-  lv_obj_set_size(port_textarea_, 150, 50);
-  lv_obj_align(port_textarea_, LV_ALIGN_TOP_LEFT, 20, 200);
-  lv_textarea_set_one_line(port_textarea_, true);
-  lv_textarea_set_placeholder_text(port_textarea_, "e.g., 4211");
-  lv_textarea_set_accepted_chars(port_textarea_, "0123456789");
-  lv_textarea_set_max_length(port_textarea_, 5);
-
-  if (remote_port_ > 0) {
-    char port_str[8];
-    snprintf(port_str, sizeof(port_str), "%u", remote_port_);
-    lv_textarea_set_text(port_textarea_, port_str);
-  }
-
-  // Test connection button
-  lv_obj_t* test_btn = lv_btn_create(page);
-  lv_obj_set_size(test_btn, 200, 50);
-  lv_obj_align(test_btn, LV_ALIGN_TOP_MID, 0, 270);
-  lv_obj_add_event_cb(test_btn, on_test_connection_clicked, LV_EVENT_CLICKED, this);
-
-  lv_obj_t* test_label = lv_label_create(test_btn);
-  lv_label_set_text(test_label, "Test Connection");
-  lv_obj_center(test_label);
-
-  // Test result label
-  test_result_label_ = lv_label_create(page);
-  lv_label_set_text(test_result_label_, "");
-  lv_obj_align(test_result_label_, LV_ALIGN_TOP_MID, 0, 330);
-
-  // Save button
-  lv_obj_t* save_btn = lv_btn_create(page);
-  lv_obj_set_size(save_btn, 150, 50);
-  lv_obj_align(save_btn, LV_ALIGN_BOTTOM_MID, 0, -20);
-  lv_obj_add_event_cb(save_btn, on_save_settings_clicked, LV_EVENT_CLICKED, this);
-  lv_obj_set_style_bg_color(save_btn, lv_color_hex(0x00AA00), 0);
-
-  lv_obj_t* save_label = lv_label_create(save_btn);
-  lv_label_set_text(save_label, LV_SYMBOL_SAVE " Save");
-  lv_obj_set_style_text_color(save_label, lv_color_white(), 0);
-  lv_obj_center(save_label);
-}
-
-void DiscordApp::show_settings_page() {
-  page_stack_->push([this](lv_obj_t* page) {
-    build_settings_page(page);
-    });
-}
-
-// ============================================================================
-// Event Callbacks
-// ============================================================================
-
-void DiscordApp::on_mute_button_clicked(lv_event_t* e) {
-  DiscordApp* app = static_cast<DiscordApp*>(lv_event_get_user_data(e));
-  if (app) {
-    app->send_mute_command();
-  }
-}
-
-void DiscordApp::on_settings_button_clicked(lv_event_t* e) {
-  DiscordApp* app = static_cast<DiscordApp*>(lv_event_get_user_data(e));
-  if (app) {
-    app->show_settings_page();
-  }
-}
-
-void DiscordApp::on_save_settings_clicked(lv_event_t* e) {
-  DiscordApp* app = static_cast<DiscordApp*>(lv_event_get_user_data(e));
-  if (app) {
-    app->save_settings();
-
-    // Go back to main page
-    if (app->page_stack_->depth() > 1) {
-      app->page_stack_->pop();
-    }
-  }
-}
-
-void DiscordApp::on_test_connection_clicked(lv_event_t* e) {
-  DiscordApp* app = static_cast<DiscordApp*>(lv_event_get_user_data(e));
-  if (!app || !app->test_result_label_) return;
-
-  // Get values from textareas
-  const char* ip = lv_textarea_get_text(app->ip_textarea_);
-  const char* port_str = lv_textarea_get_text(app->port_textarea_);
-
-  if (strlen(ip) == 0 || strlen(port_str) == 0) {
-    lv_label_set_text(app->test_result_label_, LV_SYMBOL_CLOSE " Please fill all fields");
-    lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0xFF0000), 0);
-    return;
-  }
-
-  uint16_t port = atoi(port_str);
-  if (port == 0) {
-    lv_label_set_text(app->test_result_label_, LV_SYMBOL_CLOSE " Invalid port");
-    lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0xFF0000), 0);
-    return;
-  }
-
-  // Configure UDP temporarily
-  UDPClient test_client;
-  test_client.init();
-  esp_err_t err = test_client.configure(ip, port);
-
-  if (err != ESP_OK) {
-    lv_label_set_text(app->test_result_label_, LV_SYMBOL_CLOSE " Invalid IP address");
-    lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0xFF0000), 0);
-    return;
-  }
-
-  lv_label_set_text(app->test_result_label_, "Testing...");
-  lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0x0000FF), 0);
-
-  // Send STATUS command
-  err = test_client.send_command("STATUS");
-  if (err != ESP_OK) {
-    lv_label_set_text(app->test_result_label_, LV_SYMBOL_CLOSE " Failed to send");
-    lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0xFF0000), 0);
-    return;
-  }
-
-  // Wait for response
-  std::string response;
-  err = test_client.receive_response(response, 3000);
-
-  if (err == ESP_OK && (response == "MUTED" || response == "UNMUTED")) {
-    lv_label_set_text(app->test_result_label_, LV_SYMBOL_OK " Connection successful!");
-    lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0x00AA00), 0);
-  } else {
-    lv_label_set_text(app->test_result_label_, LV_SYMBOL_CLOSE " No response from bridge");
-    lv_obj_set_style_text_color(app->test_result_label_, lv_color_hex(0xFF0000), 0);
-  }
-}
-
-// ============================================================================
-// UDP Communication
-// ============================================================================
-
-void DiscordApp::send_mute_command() {
-  if (!settings_configured_) {
-    ESP_LOGW(TAG, "Cannot send command: not configured");
-    return;
-  }
-
-  esp_err_t err = udp_client_.send_command("MUTE");
-  if (err != ESP_OK) {
-    ESP_LOGE(TAG, "Failed to send MUTE command");
-  }
-}
-
-bool DiscordApp::test_connection() {
-  if (!settings_configured_) {
-    return false;
-  }
-
-  esp_err_t err = udp_client_.send_command("STATUS");
-  if (err != ESP_OK) {
-    return false;
-  }
-
-  std::string response;
-  err = udp_client_.receive_response(response, RESPONSE_TIMEOUT_MS);
-
-  return (err == ESP_OK && (response == "MUTED" || response == "UNMUTED"));
-}
-
-void DiscordApp::update_status_display() {
-  if (!status_icon_label_ || !status_text_label_) {
-    return;
-  }
-
-  // Thread-safe state access
-  VoiceState state;
-  if (xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
-    state = current_state_;
-    xSemaphoreGive(state_mutex_);
-  } else {
-    return;
-  }
-
-  switch (state) {
-    case VoiceState::MUTED:
-      lv_label_set_text(status_icon_label_, LV_SYMBOL_MUTE);
-      lv_label_set_text(status_text_label_, "Muted");
-      lv_obj_set_style_text_color(status_icon_label_, lv_color_hex(0xFF0000), 0);
-      break;
-
-    case VoiceState::UNMUTED:
-      lv_label_set_text(status_icon_label_, LV_SYMBOL_VOLUME_MAX);
-      lv_label_set_text(status_text_label_, "Unmuted");
-      lv_obj_set_style_text_color(status_icon_label_, lv_color_hex(0x00AA00), 0);
-      break;
-
-    case VoiceState::ERROR:
-      lv_label_set_text(status_icon_label_, LV_SYMBOL_WARNING);
-      lv_label_set_text(status_text_label_, "Connection Error");
-      lv_obj_set_style_text_color(status_icon_label_, lv_color_hex(0xFF8800), 0);
-      break;
-
-    case VoiceState::UNKNOWN:
-    default:
-      lv_label_set_text(status_icon_label_, LV_SYMBOL_BLUETOOTH);
-      lv_label_set_text(status_text_label_, "Unknown Status");
-      lv_obj_set_style_text_color(status_icon_label_, lv_color_hex(0x888888), 0);
-      break;
-  }
-}
-
-void DiscordApp::show_error_notification(bool show) {
-  if (error_notification_) {
-    if (show) {
-      lv_obj_clear_flag(error_notification_, LV_OBJ_FLAG_HIDDEN);
-    } else {
-      lv_obj_add_flag(error_notification_, LV_OBJ_FLAG_HIDDEN);
-    }
-  }
-}
-
-// ============================================================================
-// Settings Management
-// ============================================================================
-
-void DiscordApp::load_settings() {
-  remote_ip_ = storage_->get(NVS_KEY_IP);
-  std::string port_str = storage_->get(NVS_KEY_PORT);
-
-  if (!remote_ip_.empty() && !port_str.empty()) {
-    remote_port_ = atoi(port_str.c_str());
-    settings_configured_ = (remote_port_ > 0);
-    ESP_LOGI(TAG, "Loaded settings: %s:%u", remote_ip_.c_str(), remote_port_);
-  } else {
-    settings_configured_ = false;
-    ESP_LOGI(TAG, "No settings found, user setup required");
-  }
-}
-
-void DiscordApp::save_settings() {
-  if (!ip_textarea_ || !port_textarea_) {
-    return;
-  }
-
-  const char* ip = lv_textarea_get_text(ip_textarea_);
-  const char* port_str = lv_textarea_get_text(port_textarea_);
-
-  if (strlen(ip) == 0 || strlen(port_str) == 0) {
-    ESP_LOGW(TAG, "Cannot save: empty fields");
-    return;
-  }
-
-  uint16_t port = atoi(port_str);
-  if (port == 0) {
-    ESP_LOGW(TAG, "Cannot save: invalid port");
-    return;
-  }
-
-  // Save to NVS
-  storage_->put(NVS_KEY_IP, ip);
-  storage_->put(NVS_KEY_PORT, port_str);
-
-  // Update local config
-  remote_ip_ = ip;
-  remote_port_ = port;
-  settings_configured_ = true;
-
-  // Reconfigure UDP client
-  udp_client_.configure(remote_ip_, remote_port_);
-
-  // Reset failure counter
-  consecutive_failures_ = 0;
-
-  ESP_LOGI(TAG, "Settings saved: %s:%u", remote_ip_.c_str(), remote_port_);
-}
-
-// ============================================================================
-// Polling Task
-// ============================================================================
-
-void DiscordApp::poll_task(void* param) {
-  DiscordApp* app = static_cast<DiscordApp*>(param);
-
-  ESP_LOGI(TAG, "Polling task started");
-
-  while (!app->stop_polling_) {
-    app->poll_status();
-
-    // Use longer interval if in error state
-    int interval = (app->consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR)
-      ? ERROR_POLL_INTERVAL_MS
-      : POLL_INTERVAL_MS;
-
-    vTaskDelay(pdMS_TO_TICKS(interval));
-  }
-
-  ESP_LOGI(TAG, "Polling task stopped");
-  app->poll_task_handle_ = nullptr;
-  vTaskDelete(nullptr);
-}
-
-void DiscordApp::start_polling_task() {
-  if (poll_task_handle_) {
-    ESP_LOGW(TAG, "Polling task already running");
-    return;
-  }
-
-  stop_polling_ = false;
-  xTaskCreate(poll_task, "discord_poll", 4096, this, 5, &poll_task_handle_);
-}
-
-void DiscordApp::stop_polling_task() {
-  if (!poll_task_handle_) {
-    return;
-  }
-
-  ESP_LOGI(TAG, "Stopping polling task");
-  stop_polling_ = true;
-
-  // Wait for task to finish (max 2 seconds)
-  int wait_count = 0;
-  while (poll_task_handle_ && wait_count < 20) {
-    vTaskDelay(pdMS_TO_TICKS(100));
-    wait_count++;
-  }
-
-  if (poll_task_handle_) {
-    ESP_LOGW(TAG, "Force deleting polling task");
-    vTaskDelete(poll_task_handle_);
-    poll_task_handle_ = nullptr;
-  }
-}
-
-void DiscordApp::poll_status() {
-  if (!settings_configured_) {
-    // Don't poll if not configured
-    return;
-  }
-
-  // Send STATUS command
-  esp_err_t err = udp_client_.send_command("STATUS");
-  if (err != ESP_OK) {
-    ESP_LOGW(TAG, "Failed to send STATUS command");
-    consecutive_failures_++;
-
-    if (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR) {
-      if (xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
-        current_state_ = VoiceState::ERROR;
-        xSemaphoreGive(state_mutex_);
-      }
-      show_error_notification(true);
-    }
-    return;
-  }
-
-  // Wait for response
-  std::string response;
-  err = udp_client_.receive_response(response, RESPONSE_TIMEOUT_MS);
-
-  if (err == ESP_OK) {
-    // Success - reset failure counter
-    consecutive_failures_ = 0;
-    show_error_notification(false);
-
-    // Update state
-    VoiceState new_state = VoiceState::UNKNOWN;
-    if (response == "MUTED") {
-      new_state = VoiceState::MUTED;
-    } else if (response == "UNMUTED") {
-      new_state = VoiceState::UNMUTED;
-    }
-
-    if (xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
-      current_state_ = new_state;
-      xSemaphoreGive(state_mutex_);
-    }
-
-    update_status_display();
-
-  } else {
-    // Timeout or error
-    consecutive_failures_++;
-    ESP_LOGW(TAG, "No response (failures: %d)", consecutive_failures_);
-
-    if (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR) {
-      if (xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
-        current_state_ = VoiceState::ERROR;
-        xSemaphoreGive(state_mutex_);
-      }
-      update_status_display();
-      show_error_notification(true);
-    }
-  }
-}
-
-// ============================================================================
-// DiscordAppDescriptor Implementation
-// ============================================================================
-
-DiscordAppDescriptor::DiscordAppDescriptor()
-  : AppDescriptor("Discord", new DiscordApp()) {
-  // Auto-register on construction
-  AppRegistry::instance().register_app(this);
-}
-
-void DiscordAppDescriptor::draw_icon(lv_obj_t* parent) {
-  lv_obj_t* icon = lv_label_create(parent);
-  lv_label_set_text(icon, LV_SYMBOL_CALL);
-  lv_obj_center(icon);
-}

main/ui/apps/discord_app.h

@@ -1,123 +0,0 @@
-#pragma once
-
-#include "ui/ui_app.h"
-#include "ui/page_stack.h"
-#include "ui/app_registry.h"
-#include "network/udp_client.h"
-#include "io/nvs_handler.h"
-#include "freertos/FreeRTOS.h"
-#include "freertos/task.h"
-#include "freertos/semphr.h"
-#include <string>
-
-/**
- * @brief Discord voice control app
- *
- * Allows control of Discord voice settings (mute/unmute) via UDP communication
- * with the IotDis Node.js bridge. Features:
- * - Main page: Status icon + mute button
- * - Settings page: IP/port configuration with connection test
- * - Periodic status polling with automatic retry
- * - Error notification when remote is unreachable
- */
-class DiscordApp : public UIApp {
-public:
-    DiscordApp();
-    ~DiscordApp() override;
-
-    // UIApp interface
-    esp_err_t init(lv_obj_t* container) override;
-    esp_err_t deinit() override;
-    std::string get_name() const override { return "Discord"; }
-    void handle_event(uint32_t event_type, void* event_data = nullptr) override;
-    bool on_back_button_pressed() override;
-
-private:
-    // Voice state enum
-    enum class VoiceState {
-        UNKNOWN,
-        MUTED,
-        UNMUTED,
-        ERROR
-    };
-
-    // Page management
-    PageStack* page_stack_;
-    void build_main_page(lv_obj_t* page);
-    void build_settings_page(lv_obj_t* page);
-    void show_settings_page();
-
-    // Main page widgets
-    lv_obj_t* status_icon_label_;
-    lv_obj_t* status_text_label_;
-    lv_obj_t* mute_button_;
-    lv_obj_t* error_notification_;
-
-    // Settings page widgets
-    lv_obj_t* ip_textarea_;
-    lv_obj_t* port_textarea_;
-    lv_obj_t* test_result_label_;
-
-    // UDP client and configuration
-    UDPClient udp_client_;
-    std::string remote_ip_;
-    uint16_t remote_port_;
-    bool settings_configured_;
-
-    // Voice state
-    VoiceState current_state_;
-    SemaphoreHandle_t state_mutex_;
-
-    // Polling task
-    TaskHandle_t poll_task_handle_;
-    bool stop_polling_;
-    int consecutive_failures_;
-    static constexpr int MAX_FAILURES_BEFORE_ERROR = 3;
-    static constexpr int POLL_INTERVAL_MS = 5000;
-    static constexpr int ERROR_POLL_INTERVAL_MS = 15000;
-    static constexpr int RESPONSE_TIMEOUT_MS = 2000;
-
-    // NVS storage
-    NVSStorageHandler* storage_;
-    static constexpr const char* NVS_NAMESPACE = "discord";
-    static constexpr const char* NVS_KEY_IP = "remote_ip";
-    static constexpr const char* NVS_KEY_PORT = "remote_port";
-
-    // Event callbacks
-    static void on_mute_button_clicked(lv_event_t* e);
-    static void on_settings_button_clicked(lv_event_t* e);
-    static void on_save_settings_clicked(lv_event_t* e);
-    static void on_test_connection_clicked(lv_event_t* e);
-
-    // UDP communication
-    void send_mute_command();
-    bool test_connection();
-    void update_status_display();
-    void show_error_notification(bool show);
-
-    // Settings management
-    void load_settings();
-    void save_settings();
-
-    // Polling task
-    static void poll_task(void* param);
-    void start_polling_task();
-    void stop_polling_task();
-    void poll_status();
-};
-
-/**
- * @brief Discord app descriptor for registration
- */
-class DiscordAppDescriptor : public AppDescriptor {
-public:
-    static DiscordAppDescriptor& instance() {
-        static DiscordAppDescriptor instance;
-        return instance;
-    }
-
-    void draw_icon(lv_obj_t* parent) override;
-
-private:
-    DiscordAppDescriptor();
-};

main/ui/apps/iotdis/CMakeLists.txt

@@ -0,0 +1,12 @@
+# Explicit list of iotdis app sources
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/web/web_handlers.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/descriptor.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/settings/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/app.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/bridge/bridge.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main.cpp"
+)

main/ui/apps/iotdis/app.cpp

@@ -0,0 +1,131 @@
+#include "ui/apps/iotdis/app.h"
+#include "ui/apps/iotdis/ui/main_handler.h"
+#include "ui/apps/iotdis/ui/settings_handler.h"
+#include "common/system_context.h"
+#include "esp_log.h"
+
+static const char* TAG = "IotDisApp";
+
+// ============================================================================
+// IotDisApp Implementation
+// ============================================================================
+
+IotDisApp::IotDisApp()
+  : main_ui_handler_(nullptr)
+  , settings_ui_handler_(nullptr)
+  , current_page_(Page::MAIN)
+  , setting_handler_(nullptr)
+  , interaction_handler_(nullptr) {
+  setting_handler_ = std::make_unique<SettingHandler>(
+    std::make_unique<NVSStorageHandler>(IotDisApp::NVS_NAMESPACE)
+  );
+}
+
+IotDisApp::~IotDisApp() { }
+
+esp_err_t IotDisApp::init(lv_obj_t* container, InteractionHandler* interaction_handler) {
+  ESP_LOGI(TAG, "Initializing Discord app");
+
+  container_ = container;
+  interaction_handler_ = interaction_handler;
+
+  // Initialize storage
+  setting_handler_->init(nullptr);
+
+  // Load saved settings
+  setting_handler_->load_settings();
+
+  // Create main UI handler
+  main_ui_handler_ = std::make_unique<MainUIHandler>();
+  main_ui_handler_->init(container, interaction_handler_, setting_handler_.get());
+
+  // Register settings button callback
+  main_ui_handler_->register_on_settings_button_clicked(on_settings_button_clicked_static, this);
+
+  current_page_ = Page::MAIN;
+
+  return ESP_OK;
+}
+
+esp_err_t IotDisApp::deinit() {
+  ESP_LOGI(TAG, "Deinitializing Discord app");
+
+  // Clean up UI handlers
+  if (settings_ui_handler_) {
+    settings_ui_handler_->deinit();
+    settings_ui_handler_.reset();
+  }
+
+  if (main_ui_handler_) {
+    main_ui_handler_->deinit();
+    main_ui_handler_.reset();
+  }
+
+  return ESP_OK;
+}
+
+std::string IotDisApp::get_name() const {
+  return "Discord";
+}
+
+bool IotDisApp::on_back_button_pressed() {
+  // If on settings page, go back to main page
+  if (current_page_ == Page::SETTINGS) {
+    // Clean up settings handler
+    if (settings_ui_handler_) {
+      settings_ui_handler_->deinit();
+      settings_ui_handler_.reset();
+    }
+
+    // Reload settings in case they were updated
+    setting_handler_->load_settings();
+
+    // Recreate main UI handler with updated settings
+    if (!main_ui_handler_) {
+      main_ui_handler_ = std::make_unique<MainUIHandler>();
+      main_ui_handler_->init(container_, interaction_handler_, setting_handler_.get());
+      main_ui_handler_->register_on_settings_button_clicked(on_settings_button_clicked_static, this);
+    }
+
+    // Update UI with configuration status
+    main_ui_handler_->update_config_prompt(setting_handler_->is_configured());
+
+    current_page_ = Page::MAIN;
+    return true;
+  }
+
+  // Let system handle back (return to app icons)
+  return false;
+}
+
+// ============================================================================
+// Private Methods
+// ============================================================================
+
+// Settings page with web server and QR code
+void IotDisApp::show_settings_page() {
+  ESP_LOGI(TAG, "Showing settings page");
+
+  // Hide main UI handler
+  if (main_ui_handler_) {
+    main_ui_handler_->deinit();
+    main_ui_handler_.reset();
+  }
+
+  // Create settings UI handler
+  settings_ui_handler_ = std::make_unique<SettingsUIHandler>();
+  settings_ui_handler_->init(container_, interaction_handler_, setting_handler_.get());
+
+  current_page_ = Page::SETTINGS;
+}
+
+// ============================================================================
+// Static Callbacks
+// ============================================================================
+
+void IotDisApp::on_settings_button_clicked_static(lv_event_t* e) {
+  IotDisApp* app = static_cast<IotDisApp*>(lv_event_get_user_data(e));
+  if (app) {
+    app->show_settings_page();
+  }
+}

main/ui/apps/iotdis/app.h

@@ -0,0 +1,61 @@
+#pragma once
+
+#include "ui/apps/app.h"
+#include "ui/apps/iotdis/settings/settings_handler.h"
+#include "ui/apps/iotdis/ui/main_handler.h"
+#include "ui/apps/iotdis/ui/settings_handler.h"
+#include "io/nvs_handler.h"
+#include <string>
+#include <memory>
+
+// Forward declarations
+class MainUIHandler;
+class SettingsUIHandler;
+
+/**
+ * @brief IotDis (Discord Integration) App
+ *
+ * Manages Discord voice state monitoring and control via UDP bridge.
+ * Features:
+ * - Real-time voice state monitoring (muted/unmuted)
+ * - Manual mute/unmute control
+ * - Settings for bridge IP/port configuration
+ * - Connection error detection and notification
+ * - NVS storage for persistent settings
+ */
+class IotDisApp : public UIApp {
+public:
+  IotDisApp();
+  ~IotDisApp() override;
+
+  esp_err_t init(lv_obj_t* container, InteractionHandler* interaction_handler) override;
+  esp_err_t deinit(void) override;
+  std::string get_name(void) const override;
+  bool on_back_button_pressed(void) override;
+
+private:
+  // UI handlers
+  std::unique_ptr<MainUIHandler> main_ui_handler_;
+  std::unique_ptr<SettingsUIHandler> settings_ui_handler_;
+
+  // Current page tracking
+  enum class Page {
+    MAIN,
+    SETTINGS
+  };
+  Page current_page_;
+
+  // Settings handler (shared across handlers)
+  std::unique_ptr<SettingHandler> setting_handler_;
+
+  // Interaction handler (not owned)
+  InteractionHandler* interaction_handler_;
+
+  static constexpr const char* NVS_NAMESPACE = "discord_app";
+
+  // Private methods
+  void show_settings_page();
+
+  // UI callback forwarders
+  static void on_settings_button_clicked_static(lv_event_t* e);
+};

main/ui/apps/iotdis/bridge/bridge.cpp

@@ -0,0 +1,223 @@
+#include "ui/apps/iotdis/bridge/bridge.h"
+#include "esp_err.h"
+#include "esp_log.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "freertos/semphr.h"
+
+#define TAG "IotDisBridge"
+#define MUTE_COMMAND "MUTE"
+#define STATUS_COMMAND "STATUS"
+#define MUTED_RESPONSE "MUTED"
+#define UNMUTED_RESPONSE "UNMUTED"
+
+IotDisBridge::~IotDisBridge() {
+  stop_polling_task();
+}
+
+void IotDisBridge::start_polling_task() {
+  if (poll_task_handle_) {
+    ESP_LOGW(TAG, "Polling task already running");
+    return;
+  }
+
+  udp_client_.init(setting_handler_->get_local_port());
+  udp_client_.configure(
+    setting_handler_->get_remote_ip(),
+    setting_handler_->get_remote_port()
+  );
+
+  stop_polling_ = false;
+  xTaskCreate(poll_task_, "discord_poll", 4096, this, 5, &poll_task_handle_);
+}
+
+void IotDisBridge::stop_polling_task() {
+  if (!poll_task_handle_) {
+    if (udp_client_.is_configured()) {
+      udp_client_.close();
+    }
+    return;
+  }
+
+  ESP_LOGI(TAG, "Stopping polling task");
+  stop_polling_ = true;
+
+  // Wait for task to finish (max 2 seconds)
+  int wait_count = 0;
+  while (poll_task_handle_ && wait_count < 20) {
+    vTaskDelay(pdMS_TO_TICKS(100));
+    wait_count++;
+  }
+
+  if (poll_task_handle_) {
+    ESP_LOGW(TAG, "Force deleting polling task");
+    vTaskDelete(poll_task_handle_);
+    poll_task_handle_ = nullptr;
+  }
+
+  if (udp_client_.is_configured()) {
+    udp_client_.close();
+  }
+  on_status_update_callback_ = nullptr;
+  status_event_user_data_ = nullptr;
+  consecutive_failures_ = 0;
+}
+
+
+esp_err_t IotDisBridge::send_mute_command() {
+  if (!setting_handler_->is_configured()) {
+    ESP_LOGW(TAG, "Cannot send command: not configured");
+    return ESP_FAIL;
+  }
+
+  ESP_LOGI(TAG, "Sending MUTE command");
+  esp_err_t err = udp_client_.send_command(MUTE_COMMAND);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to send MUTE command");
+    return err;
+  }
+  return ESP_OK;
+}
+
+bool IotDisBridge::test_connection(const std::string& ip, uint16_t port, uint16_t local_port) {
+  ESP_LOGI(TAG, "Testing connection to %s:%u (local port: %u)", ip.c_str(), port, local_port);
+
+  // Create temporary UDP client for testing
+  UDPClient test_client;
+  esp_err_t err = test_client.init(local_port);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize test UDP client");
+    return false;
+  }
+
+  err = test_client.configure(ip, port);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to configure test UDP client");
+    return false;
+  }
+
+  err = test_client.send_command(STATUS_COMMAND);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to send STATUS command");
+    return false;
+  }
+
+  ESP_LOGI(TAG, "STATUS command sent, waiting for response (timeout: %dms)", RESPONSE_TIMEOUT_MS);
+
+  std::string response;
+  err = test_client.receive_response(response, RESPONSE_TIMEOUT_MS);
+
+  if (err == ESP_OK) {
+    ESP_LOGI(TAG, "Received response: %s", response.c_str());
+    bool valid = (response == MUTED_RESPONSE || response == UNMUTED_RESPONSE);
+    if (!valid) {
+      ESP_LOGW(TAG, "Unexpected response (expected MUTED or UNMUTED)");
+    }
+    test_client.close();
+    return valid;
+  } else if (err == ESP_ERR_TIMEOUT) {
+    ESP_LOGW(TAG, "Timeout waiting for response");
+  } else {
+    ESP_LOGE(TAG, "Error receiving response: %d", err);
+  }
+
+  test_client.close();
+  return false;
+}
+
+//
+// private methods
+//
+
+void IotDisBridge::poll_task_(void* param) {
+  IotDisBridge* bridge = static_cast<IotDisBridge*>(param);
+
+  ESP_LOGI(TAG, "Polling task started");
+
+  while (!bridge->stop_polling_) {
+    bridge->poll_status_();
+    // Yield to allow other tasks to run
+    taskYIELD();
+  }
+
+  ESP_LOGI(TAG, "Polling task stopped");
+  bridge->poll_task_handle_ = nullptr;
+  vTaskDelete(nullptr);
+}
+
+void IotDisBridge::poll_status_() {
+  if (!setting_handler_->is_configured()) {
+    // Don't poll if not configured
+    return;
+  }
+
+  // Continuously listen for messages (blocking with timeout)
+  // Use longer timeout if in error state
+  int listen_timeout = (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR)
+    ? ERROR_POLL_INTERVAL_MS
+    : POLL_INTERVAL_MS;
+
+  ESP_LOGI(TAG, "Listening for messages (timeout: %dms)", listen_timeout);
+  std::string message;
+  esp_err_t err = udp_client_.receive_response(message, listen_timeout);
+
+  if (err == ESP_OK && !message.empty()) {
+    // Received a message (either push update or status response)
+    ESP_LOGI(TAG, "Received message: %s", message.c_str());
+
+    StatusUpdateEventData event_data {
+      .state = StatusUpdateEventData::VoiceState::UNKNOWN
+    };
+
+    if (message == MUTED_RESPONSE) {
+      event_data.state = StatusUpdateEventData::VoiceState::MUTED;
+    } else if (message == UNMUTED_RESPONSE) {
+      event_data.state = StatusUpdateEventData::VoiceState::UNMUTED;
+    }
+
+    // Reset failure counter on successful message
+    if (event_data.state != StatusUpdateEventData::VoiceState::UNKNOWN) {
+      consecutive_failures_ = 0;
+
+      ESP_LOGI(TAG, "Invoking status update callback with state: %d", event_data.state);
+      if (on_status_update_callback_) {
+        on_status_update_callback_(event_data, status_event_user_data_);
+      }
+    } else {
+      ESP_LOGW(TAG, "Received unknown message: %s", message.c_str());
+    }
+  } else if (err == ESP_ERR_TIMEOUT) {
+    // Timeout - send STATUS command to verify connection is still alive
+    ESP_LOGI(TAG, "Listen timeout, sending STATUS command to verify connection");
+    err = udp_client_.send_command(STATUS_COMMAND);
+
+    if (err != ESP_OK) {
+      consecutive_failures_++;
+      ESP_LOGW(TAG, "Failed to send STATUS command. Consecutive failures: %d",
+        consecutive_failures_);
+
+      if (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR) {
+        if (on_status_update_callback_) {
+          on_status_update_callback_(
+            StatusUpdateEventData { .state = StatusUpdateEventData::VoiceState::ERROR },
+            status_event_user_data_
+          );
+        }
+      }
+    }
+    // The response to STATUS command will be received in the next iteration
+  } else {
+    // Error receiving
+    consecutive_failures_++;
+    ESP_LOGW(TAG, "Error receiving message: %d (failures: %d)", err, consecutive_failures_);
+
+    if (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR) {
+      if (on_status_update_callback_) {
+        on_status_update_callback_(
+          StatusUpdateEventData { .state = StatusUpdateEventData::VoiceState::ERROR },
+          status_event_user_data_
+        );
+      }
+    }
+  }
+}

main/ui/apps/iotdis/bridge/bridge.h

@@ -0,0 +1,67 @@
+#pragma once
+
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "ui/apps/iotdis/settings/settings_handler.h"
+#include <string>
+#include <cstdint>
+#include <memory>
+#include "esp_err.h"
+#include "network/udp_client.h"
+
+struct StatusUpdateEventData {
+  enum class VoiceState {
+    UNKNOWN,
+    MUTED,
+    UNMUTED,
+    ERROR
+  } state;
+};
+
+using StatusEventCallback = void(*)(StatusUpdateEventData, void*);
+
+
+class IotDisBridge {
+public:
+  IotDisBridge(
+    SettingHandler* setting_handler
+  ) : setting_handler_(setting_handler) { }
+  ~IotDisBridge();
+
+  void start_polling_task();
+  void stop_polling_task();
+
+  esp_err_t send_mute_command();
+  bool test_connection(const std::string& ip, uint16_t port) {
+    return test_connection(ip, port, setting_handler_->get_local_port());
+  }
+  bool test_connection(const std::string& ip, uint16_t port, uint16_t local_port);
+  void register_on_status_update_callback(
+    StatusEventCallback callback,
+    void* status_event_user_data
+  ) {
+    on_status_update_callback_ = callback;
+    status_event_user_data_ = status_event_user_data;
+  }
+
+private:
+  static constexpr int POLL_INTERVAL_MS = 10000;
+  static constexpr int ERROR_POLL_INTERVAL_MS = 20000;
+  static constexpr int RESPONSE_TIMEOUT_MS = 1000;
+  static constexpr int MAX_FAILURES_BEFORE_ERROR = 3;
+
+  void poll_status_();
+
+  // Polling task
+  static void poll_task_(void* param);
+
+  TaskHandle_t poll_task_handle_ = nullptr;
+  bool stop_polling_ = false;
+  int consecutive_failures_ = 0;
+  SettingHandler* setting_handler_ = nullptr;
+  UDPClient udp_client_;
+
+  StatusEventCallback on_status_update_callback_ = nullptr;
+  void* status_event_user_data_ = nullptr;
+
+};

main/ui/apps/iotdis/descriptor.cpp

@@ -0,0 +1,11 @@
+#include "ui/apps/iotdis/descriptor.h"
+
+IotDisDescriptor::IotDisDescriptor()
+  : AppDescriptor("IotDis", std::make_unique<IotDisApp>()) { }
+
+void IotDisDescriptor::draw_icon(lv_obj_t* parent) {
+  // Draw Discord icon (call/phone symbol)
+  lv_obj_t* icon = lv_label_create(parent);
+  lv_label_set_text(icon, LV_SYMBOL_CALL);
+  lv_obj_center(icon);
+}

main/ui/apps/iotdis/descriptor.h

@@ -0,0 +1,12 @@
+#pragma once
+
+#include "ui/apps/app.h"
+#include "ui/apps/iotdis/app.h"
+
+class IotDisDescriptor : public AppDescriptor {
+public:
+  IotDisDescriptor();
+  ~IotDisDescriptor() override = default;
+
+  void draw_icon(lv_obj_t* parent) override;
+};

main/ui/apps/iotdis/settings/settings_handler.cpp

@@ -0,0 +1,52 @@
+#include "ui/apps/iotdis/settings/settings_handler.h"
+
+#include "esp_log.h"
+
+#define TAG "SettingHandler"
+
+void SettingHandler::load_settings() {
+  remote_ip_ = storage_->get(NVS_KEY_IP);
+  std::string port_str = storage_->get(NVS_KEY_PORT);
+  std::string local_port_str = storage_->get(NVS_KEY_LOCAL_PORT);
+
+  if (!remote_ip_.empty() && !port_str.empty()) {
+    remote_port_ = static_cast<uint16_t>(atoi(port_str.c_str()));
+
+    // Load local port, default to DEFAULT_LOCAL_PORT if not configured
+    if (!local_port_str.empty()) {
+      local_port_ = static_cast<uint16_t>(atoi(local_port_str.c_str()));
+    } else {
+      local_port_ = DEFAULT_LOCAL_PORT;
+    }
+
+    ESP_LOGI(TAG, "Loaded settings: %s:%u (local port: %u)", remote_ip_.c_str(), remote_port_, local_port_);
+  } else {
+    local_port_ = DEFAULT_LOCAL_PORT;
+    ESP_LOGI(TAG, "No settings found, user setup required");
+  }
+}
+
+
+void SettingHandler::save_settings(const std::string& ip, uint16_t port, uint16_t local_port) {
+  if (ip.empty() || port == 0 || local_port == 0) {
+    ESP_LOGW(TAG, "Cannot save: invalid settings");
+    return;
+  }
+
+  // Save to NVS
+  storage_->put(NVS_KEY_IP, ip);
+  char port_str[8];
+  snprintf(port_str, sizeof(port_str), "%u", port);
+  storage_->put(NVS_KEY_PORT, port_str);
+  char local_port_str[8];
+  snprintf(local_port_str, sizeof(local_port_str), "%u", local_port);
+  storage_->put(NVS_KEY_LOCAL_PORT, local_port_str);
+
+  // Update local config
+  remote_ip_ = ip;
+  remote_port_ = port;
+  local_port_ = local_port;
+
+  ESP_LOGI(TAG, "Settings saved: %s:%u (local port: %u)", remote_ip_.c_str(), remote_port_, local_port_);
+}
+

main/ui/apps/iotdis/settings/settings_handler.h

@@ -0,0 +1,45 @@
+#pragma once
+
+#include "freertos/FreeRTOS.h"
+#include <string>
+#include <memory>
+#include "io/nvs_handler.h"
+
+class SettingHandler {
+public:
+  SettingHandler(std::unique_ptr<NVSStorageHandler> storage) :
+    remote_ip_(""),
+    remote_port_(0),
+    local_port_(0),
+    storage_(std::move(storage)) { }
+  ~SettingHandler() = default;
+
+  esp_err_t init(const EventGroupHandle_t& system_event_group) {
+    storage_->init(system_event_group);
+    return ESP_OK;
+  }
+
+  void load_settings();
+  void save_settings(const std::string& ip, uint16_t port) {
+    save_settings(ip, port, local_port_);
+  }
+  void save_settings(const std::string& ip, uint16_t port, uint16_t local_port);
+
+  bool is_configured() const { return !remote_ip_.empty() && remote_port_ != 0 && local_port_ != 0; }
+
+  std::string get_remote_ip() const { return remote_ip_; }
+  uint16_t get_remote_port() const { return remote_port_; }
+  uint16_t get_local_port() const { return local_port_; }
+
+private:
+  static constexpr uint16_t DEFAULT_LOCAL_PORT = 4212;
+
+  static constexpr const char* NVS_KEY_IP = "bridge_ip";
+  static constexpr const char* NVS_KEY_PORT = "bridge_port";
+  static constexpr const char* NVS_KEY_LOCAL_PORT = "local_port";
+
+  std::string remote_ip_;
+  uint16_t remote_port_;
+  uint16_t local_port_;
+  std::unique_ptr<NVSStorageHandler> storage_;
+};

main/ui/apps/iotdis/ui/main.cpp

@@ -0,0 +1,209 @@
+#include "ui/apps/iotdis/ui/main.h"
+#include "ui/apps/iotdis/app.h"
+#include "ui/interaction_handler.h"
+#include "ui/widgets/button.h"
+#include "esp_log.h"
+#include "esp_lvgl_port.h"
+
+#define LVGL_LOCK_TIMEOUT 4000  // milliseconds
+static const char* TAG = "MainUI";
+
+MainUI::~MainUI() {
+  deinit();
+}
+
+esp_err_t MainUI::init(lv_obj_t* parent, InteractionHandler* interaction_handler) {
+  container_ = parent;
+  create_ui_(parent);
+  return ESP_OK;
+}
+
+esp_err_t MainUI::deinit(void) {
+  // LVGL will clean up children automatically when parent is deleted
+  error_notification_ = nullptr;
+  status_icon_label_ = nullptr;
+  status_text_label_ = nullptr;
+  mute_button_ = nullptr;
+  settings_button_ = nullptr;
+  config_prompt_ = nullptr;
+  container_ = nullptr;
+  return ESP_OK;
+}
+
+void MainUI::create_ui_(lv_obj_t* parent) {
+  if (!parent) {
+    ESP_LOGE(TAG, "Parent LVGL object is null");
+    return;
+  }
+
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock for UI creation");
+    return;
+  }
+  // Set up main page with flex column layout
+  lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_COLUMN);
+  lv_obj_set_flex_align(parent, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+  lv_obj_set_style_pad_all(parent, 10, 0);
+
+  // === Top Section: Error Notification ===
+  error_notification_ = lv_obj_create(parent);
+  lv_obj_set_width(error_notification_, LV_PCT(90));
+  lv_obj_set_height(error_notification_, LV_SIZE_CONTENT);
+  lv_obj_set_style_bg_color(error_notification_, lv_color_white(), 0);
+  lv_obj_set_style_bg_opa(error_notification_, LV_OPA_COVER, 0);
+  lv_obj_set_style_border_color(error_notification_, lv_color_black(), 0);
+  lv_obj_set_style_border_width(error_notification_, 2, 0);
+  lv_obj_set_style_pad_all(error_notification_, 10, 0);
+  lv_obj_set_style_radius(error_notification_, 8, 0);
+  lv_obj_add_flag(error_notification_, LV_OBJ_FLAG_HIDDEN);
+  lv_obj_set_flex_flow(error_notification_, LV_FLEX_FLOW_ROW);
+  lv_obj_set_flex_align(error_notification_, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+
+  lv_obj_t* error_label = lv_label_create(error_notification_);
+  lv_label_set_text(error_label, LV_SYMBOL_WARNING " Connection Lost");
+  lv_obj_set_style_text_color(error_label, lv_color_black(), 0);
+
+  // === Center Section: Main Content ===
+  lv_obj_t* center_container = lv_obj_create(parent);
+  lv_obj_set_size(center_container, LV_PCT(100), LV_SIZE_CONTENT);
+  lv_obj_set_style_bg_opa(center_container, LV_OPA_TRANSP, 0);
+  lv_obj_set_style_border_width(center_container, 0, 0);
+  lv_obj_set_style_pad_all(center_container, 0, 0);
+  lv_obj_set_flex_flow(center_container, LV_FLEX_FLOW_COLUMN);
+  lv_obj_set_flex_align(center_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+  lv_obj_set_style_pad_row(center_container, 15, 0);
+  lv_obj_set_flex_grow(center_container, 1);
+
+  // Status icon (large, centered)
+  status_icon_label_ = lv_label_create(center_container);
+  lv_label_set_text(status_icon_label_, LV_SYMBOL_MUTE);
+
+  // Status text
+  status_text_label_ = lv_label_create(center_container);
+  lv_label_set_text(status_text_label_, "Unknown Status");
+
+  // Mute button
+  mute_button_ = button_create(center_container);
+  lv_obj_set_size(mute_button_, 200, 60);
+  lv_obj_t* mute_label = lv_label_create(mute_button_);
+  lv_label_set_text(mute_label, "MUTE");
+  lv_obj_center(mute_label);
+  lv_obj_set_style_text_color(mute_label, lv_color_black(), 0);
+
+  // === Bottom Section: Settings and Config Prompt ===
+  lv_obj_t* bottom_container = lv_obj_create(parent);
+  lv_obj_set_size(bottom_container, LV_PCT(100), LV_SIZE_CONTENT);
+  lv_obj_set_style_bg_opa(bottom_container, LV_OPA_TRANSP, 0);
+  lv_obj_set_style_border_width(bottom_container, 0, 0);
+  lv_obj_set_style_pad_all(bottom_container, 0, 0);
+  lv_obj_set_flex_flow(bottom_container, LV_FLEX_FLOW_ROW);
+  lv_obj_set_flex_align(bottom_container, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+
+  // Config prompt (left side)
+  config_prompt_ = lv_label_create(bottom_container);
+  lv_label_set_text(config_prompt_, "Tap " LV_SYMBOL_SETTINGS " to configure");
+  lv_obj_set_style_text_color(config_prompt_, lv_color_black(), 0);
+
+  // Settings button (right side)
+  settings_button_ = button_create(bottom_container);
+  lv_obj_set_size(settings_button_, 60, 60);
+
+  lv_obj_t* settings_icon = lv_label_create(settings_button_);
+  lv_label_set_text(settings_icon, LV_SYMBOL_SETTINGS);
+  lv_obj_center(settings_icon);
+  lv_obj_set_style_text_color(settings_icon, lv_color_black(), 0);
+
+  ESP_LOGI(TAG, "Main UI created");
+  lvgl_port_unlock();
+}
+
+esp_err_t MainUI::register_on_settings_button_clicked(lv_event_cb_t cb, void* user_data) {
+  if (!settings_button_) {
+    return ESP_ERR_INVALID_STATE;
+  }
+  lv_obj_add_event_cb(settings_button_, cb, LV_EVENT_CLICKED, user_data);
+  return ESP_OK;
+}
+
+esp_err_t MainUI::register_on_mute_button_clicked(lv_event_cb_t cb, void* user_data) {
+  if (!mute_button_) {
+    return ESP_ERR_INVALID_STATE;
+  }
+  lv_obj_add_event_cb(mute_button_, cb, LV_EVENT_CLICKED, user_data);
+  return ESP_OK;
+}
+
+bool MainUI::update_status(VoiceState state) {
+  if (!status_icon_label_ || !status_text_label_) {
+    return false;
+  }
+
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
+    ESP_LOGW(TAG, "Failed to acquire LVGL lock for status update");
+    return false;
+  }
+
+  switch (state) {
+    case VoiceState::MUTED:
+      lv_label_set_text(status_icon_label_, LV_SYMBOL_MUTE);
+      lv_label_set_text(status_text_label_, "Muted");
+      lv_obj_set_style_text_color(status_icon_label_, lv_color_black(), 0);
+      break;
+
+    case VoiceState::UNMUTED:
+      lv_label_set_text(status_icon_label_, LV_SYMBOL_VOLUME_MAX);
+      lv_label_set_text(status_text_label_, "Unmuted");
+      lv_obj_set_style_text_color(status_icon_label_, lv_color_black(), 0);
+      break;
+
+    case VoiceState::ERROR:
+      lv_label_set_text(status_icon_label_, LV_SYMBOL_WARNING);
+      lv_label_set_text(status_text_label_, "Connection Error");
+      lv_obj_set_style_text_color(status_icon_label_, lv_color_black(), 0);
+      break;
+
+    case VoiceState::UNKNOWN:
+    default:
+      lv_label_set_text(status_icon_label_, LV_SYMBOL_BLUETOOTH);
+      lv_label_set_text(status_text_label_, "Unknown Status");
+      lv_obj_set_style_text_color(status_icon_label_, lv_color_black(), 0);
+      break;
+  }
+  lvgl_port_unlock();
+  return true;
+}
+
+void MainUI::show_error_notification(bool show) {
+  if (!error_notification_) {
+    return;
+  }
+
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
+    ESP_LOGW(TAG, "Failed to acquire LVGL lock for error notification update");
+    return;
+  }
+  if (show) {
+    lv_obj_clear_flag(error_notification_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    lv_obj_add_flag(error_notification_, LV_OBJ_FLAG_HIDDEN);
+  }
+  lvgl_port_unlock();
+}
+
+void MainUI::update_config_prompt(bool configured) {
+  if (!config_prompt_) {
+    return;
+  }
+
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
+    ESP_LOGW(TAG, "Failed to acquire LVGL lock for config prompt update");
+    return;
+  }
+  if (configured) {
+    lv_obj_add_flag(config_prompt_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    lv_obj_clear_flag(config_prompt_, LV_OBJ_FLAG_HIDDEN);
+  }
+  lvgl_port_unlock();
+
+}

main/ui/apps/iotdis/ui/main.h

@@ -0,0 +1,85 @@
+#pragma once
+
+#include "lvgl.h"
+#include "esp_err.h"
+#include <string>
+#include "ui/events.h"
+#include "ui/apps/iotdis/bridge/bridge.h"
+#include "ui/interaction_handler.h"
+
+// Voice state enumeration
+enum class VoiceState {
+  UNKNOWN,
+  MUTED,
+  UNMUTED,
+  ERROR
+};
+
+// Forward declarations
+class InteractionHandler;
+
+/**
+ * @brief Main UI for Discord app
+ *
+ * Displays:
+ * - Current voice state (muted/unmuted/error/unknown)
+ * - Large status icon
+ * - Status text
+ * - Mute toggle button
+ * - Error notification banner (when connection lost)
+ * - Settings button
+ * - Configuration prompt (if not configured)
+ */
+class MainUI {
+public:
+  MainUI() = default;
+  ~MainUI();
+
+  esp_err_t init(lv_obj_t* parent, InteractionHandler* interaction_handler);
+  esp_err_t deinit(void);
+
+  /**
+   * @brief Register callback for settings button clicks
+   * @param cb Callback function
+   * @param user_data User data to pass to callback
+   */
+  esp_err_t register_on_settings_button_clicked(lv_event_cb_t cb, void* user_data);
+
+  /**
+   * @brief Register callback for mute button clicks
+   * @param cb Callback function
+   * @param user_data User data to pass to callback
+   */
+  esp_err_t register_on_mute_button_clicked(lv_event_cb_t cb, void* user_data);
+
+  /**
+   * @brief Update status display with current voice state
+   * @param state Current voice state
+   */
+  bool update_status(VoiceState state);
+
+  /**
+   * @brief Show or hide error notification banner
+   * @param show true to show, false to hide
+   */
+  void show_error_notification(bool show);
+
+  /**
+   * @brief Update configuration prompt visibility
+   * @param configured true if settings are configured
+   */
+  void update_config_prompt(bool configured);
+
+private:
+  void create_ui_(lv_obj_t* parent);
+
+  lv_obj_t* container_ = nullptr;
+
+  // UI elements
+  lv_obj_t* error_notification_ = nullptr;
+  lv_obj_t* status_icon_label_ = nullptr;
+  lv_obj_t* status_text_label_ = nullptr;
+  lv_obj_t* mute_button_ = nullptr;
+  lv_obj_t* settings_button_ = nullptr;
+  lv_obj_t* config_prompt_ = nullptr;
+};

main/ui/apps/iotdis/ui/main_handler.cpp

@@ -0,0 +1,199 @@
+#include "ui/apps/iotdis/ui/main_handler.h"
+#include "esp_log.h"
+
+static const char* TAG = "MainUIHandler";
+
+MainUIHandler::MainUIHandler() {
+  state_mutex_ = xSemaphoreCreateMutex();
+}
+
+MainUIHandler::~MainUIHandler() {
+  deinit();
+
+  if (state_mutex_) {
+    vSemaphoreDelete(state_mutex_);
+    state_mutex_ = nullptr;
+  }
+}
+
+esp_err_t MainUIHandler::init(lv_obj_t* parent, InteractionHandler* interaction_handler, SettingHandler* setting_handler) {
+  ESP_LOGI(TAG, "Initializing Main UI Handler");
+
+  setting_handler_ = setting_handler;
+
+  // Create unique bridge instance for this handler
+  bridge_ = std::make_unique<IotDisBridge>(setting_handler_);
+
+  // Register status update callback
+  bridge_->register_on_status_update_callback(on_status_update_static_, this);
+
+  // Create main UI
+  main_ui_ = std::make_unique<MainUI>();
+  main_ui_->init(parent, interaction_handler);
+
+  // Register mute button callback
+  main_ui_->register_on_mute_button_clicked(on_mute_button_clicked_static_, this);
+
+  // Update UI with current configuration
+  main_ui_->update_config_prompt(setting_handler_->is_configured());
+  update_ui_();
+
+  // Start polling task
+  bridge_->start_polling_task();
+
+  return ESP_OK;
+}
+
+esp_err_t MainUIHandler::deinit(void) {
+  ESP_LOGI(TAG, "Deinitializing Main UI Handler");
+
+  // Stop polling
+  if (bridge_) {
+    bridge_->stop_polling_task();
+    bridge_.reset();
+  }
+
+  // Clean up UI
+  if (main_ui_) {
+    main_ui_->deinit();
+    main_ui_.reset();
+  }
+
+  return ESP_OK;
+}
+
+esp_err_t MainUIHandler::register_on_settings_button_clicked(lv_event_cb_t cb, void* user_data) {
+  on_settings_callback_ = cb;
+  settings_callback_user_data_ = user_data;
+
+  if (main_ui_) {
+    main_ui_->register_on_settings_button_clicked(cb, user_data);
+  } else {
+    ESP_LOGE(TAG, "Main UI not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  return ESP_OK;
+}
+
+void MainUIHandler::update_config_prompt(bool is_configured) {
+  if (main_ui_) {
+    main_ui_->update_config_prompt(is_configured);
+  } else {
+    ESP_LOGE(TAG, "Main UI not initialized");
+  }
+}
+
+void MainUIHandler::update_status() {
+  update_ui_();
+}
+
+// ============================================================================
+// Private Methods
+// ============================================================================
+
+void MainUIHandler::send_mute_command_() {
+  if (!setting_handler_->is_configured()) {
+    ESP_LOGW(TAG, "Cannot send command: not configured");
+    return;
+  }
+
+  ESP_LOGI(TAG, "Sending MUTE command");
+  esp_err_t err = bridge_->send_mute_command();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to send MUTE command");
+  }
+}
+
+void MainUIHandler::on_status_update_(StatusUpdateEventData data) {
+  ESP_LOGI(TAG, "on_status_update_ called with state: %d, current_state_: %d", data.state, current_state_);
+
+  // Update state in thread-safe manner
+  bool update_ui = false;
+  if (state_mutex_ && xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
+    if (data.state != current_state_) {
+      update_ui = true;
+    }
+    xSemaphoreGive(state_mutex_);
+    ESP_LOGI(TAG, "State updated in mutex");
+  }
+
+  // Update UI
+  if (!update_ui) {
+    ESP_LOGI(TAG, "State unchanged, skipping UI update");
+    return;
+  }
+  ESP_LOGI(TAG, "Calling update_ui_()");
+  update_ui_(&data.state);
+  ESP_LOGI(TAG, "on_status_update_ complete");
+}
+
+void MainUIHandler::update_ui_(StatusUpdateEventData::VoiceState* state_ptr) {
+  ESP_LOGI(TAG, "update_ui_ called");
+
+  if (main_ui_) {
+    StatusUpdateEventData::VoiceState state;
+    if (state_mutex_ && xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
+
+      state = state_ptr ? *state_ptr : current_state_;
+      xSemaphoreGive(state_mutex_);
+    } else {
+      state = StatusUpdateEventData::VoiceState::UNKNOWN;
+    }
+
+    ESP_LOGI(TAG, "Converting state: %d", state);
+
+    // Convert to MainUI VoiceState
+    VoiceState ui_state;
+    switch (state) {
+      case StatusUpdateEventData::VoiceState::MUTED:
+        ui_state = VoiceState::MUTED;
+        break;
+      case StatusUpdateEventData::VoiceState::UNMUTED:
+        ui_state = VoiceState::UNMUTED;
+        break;
+      case StatusUpdateEventData::VoiceState::ERROR:
+        ui_state = VoiceState::ERROR;
+        break;
+      default:
+        ui_state = VoiceState::UNKNOWN;
+        break;
+    }
+
+    ESP_LOGI(TAG, "Calling main_ui_->update_status() with ui_state: %d", ui_state);
+
+    // Lock LVGL before calling UI functions from another task
+    bool success = main_ui_->update_status(ui_state);
+    if (!success) {
+      ESP_LOGW(TAG, "main_ui_->update_status() failed");
+    } else {
+      // Update current state only on successful UI update
+      current_state_ = state;
+    }
+    ESP_LOGI(TAG, "main_ui_->update_status() returned");
+  }
+
+  ESP_LOGI(TAG, "update_ui_ complete");
+}
+
+// ============================================================================
+// Static Callbacks
+// ============================================================================
+
+void MainUIHandler::on_mute_button_clicked_static_(lv_event_t* e) {
+  MainUIHandler* handler = static_cast<MainUIHandler*>(lv_event_get_user_data(e));
+  if (handler) {
+    handler->on_mute_button_clicked_();
+  }
+}
+
+void MainUIHandler::on_mute_button_clicked_() {
+  send_mute_command_();
+}
+
+void MainUIHandler::on_status_update_static_(StatusUpdateEventData data, void* user_data) {
+  MainUIHandler* handler = static_cast<MainUIHandler*>(user_data);
+  if (handler) {
+    handler->on_status_update_(data);
+  }
+}

main/ui/apps/iotdis/ui/main_handler.h

@@ -0,0 +1,51 @@
+#pragma once
+
+#include "ui/apps/iotdis/ui/main.h"
+#include "ui/interaction_handler.h"
+#include "ui/apps/iotdis/bridge/bridge.h"
+#include "ui/apps/iotdis/settings/settings_handler.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/semphr.h"
+#include "esp_err.h"
+#include <memory>
+
+/**
+ * @brief Main UI Handler for Discord App
+ *
+ * Manages the MainUI instance and interaction with the InteractionHandler.
+ * Each handler instance has its own IotDisBridge to prevent conflicts.
+ */
+class MainUIHandler {
+public:
+
+  MainUIHandler();
+  ~MainUIHandler();
+
+  esp_err_t init(lv_obj_t* parent, InteractionHandler* interaction_handler, SettingHandler* setting_handler);
+  esp_err_t deinit(void);
+
+  esp_err_t register_on_settings_button_clicked(lv_event_cb_t cb, void* user_data);
+  void update_config_prompt(bool is_configured);
+  void update_status();
+
+private:
+  static void on_mute_button_clicked_static_(lv_event_t* e);
+  static void on_status_update_static_(StatusUpdateEventData data, void* user_data);
+
+  void on_mute_button_clicked_();
+  void on_status_update_(StatusUpdateEventData data);
+  void send_mute_command_();
+  void update_ui_(StatusUpdateEventData::VoiceState* state = nullptr);
+
+  std::unique_ptr<MainUI> main_ui_ = nullptr;
+  std::unique_ptr<IotDisBridge> bridge_ = nullptr;
+  SettingHandler* setting_handler_ = nullptr;  // Not owned
+
+  // Voice state tracking
+  StatusUpdateEventData::VoiceState current_state_ = StatusUpdateEventData::VoiceState::UNKNOWN;
+  SemaphoreHandle_t state_mutex_ = nullptr;
+
+  // Callback for settings button
+  lv_event_cb_t on_settings_callback_ = nullptr;
+  void* settings_callback_user_data_ = nullptr;
+};

main/ui/apps/iotdis/ui/settings.cpp

@@ -0,0 +1,74 @@
+#include "ui/apps/iotdis/ui/settings.h"
+#include "ui/interaction_handler.h"
+#include "esp_log.h"
+#include <cstring>
+
+static const char* TAG = "SettingsUI";
+
+SettingsUI::~SettingsUI() {
+  deinit();
+}
+
+esp_err_t SettingsUI::init(lv_obj_t* parent, InteractionHandler* interaction_handler) {
+  container_ = parent;
+  create_ui_(parent, interaction_handler);
+  return ESP_OK;
+}
+
+esp_err_t SettingsUI::deinit(void) {
+  // LVGL will clean up children automatically when parent is deleted
+  qr_code_ = nullptr;
+  status_label_ = nullptr;
+  container_ = nullptr;
+  return ESP_OK;
+}
+
+void SettingsUI::create_ui_(lv_obj_t* parent, InteractionHandler* interaction_handler) {
+  // Title
+  lv_obj_t* title = lv_label_create(parent);
+  lv_label_set_text(title, "Scan to Configure");
+  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);
+  lv_obj_set_style_text_font(title, &lv_font_montserrat_14, 0);
+
+  // Instruction text
+  lv_obj_t* instruction = lv_label_create(parent);
+  lv_label_set_text(instruction, "Scan this QR code with your mobile\ndevice to configure settings");
+  lv_obj_align(instruction, LV_ALIGN_TOP_MID, 0, 60);
+  lv_obj_set_style_text_align(instruction, LV_TEXT_ALIGN_CENTER, 0);
+
+  // QR code (centered)
+  qr_code_ = lv_qrcode_create(parent);
+  lv_qrcode_set_size(qr_code_, 250);
+  lv_qrcode_set_dark_color(qr_code_, lv_color_black());
+  lv_qrcode_set_light_color(qr_code_, lv_color_white());
+  lv_obj_align(qr_code_, LV_ALIGN_CENTER, 0, 0);
+
+  // Status label below QR code
+  status_label_ = lv_label_create(parent);
+  lv_label_set_text(status_label_, "Initializing...");
+  lv_obj_align(status_label_, LV_ALIGN_BOTTOM_MID, 0, -40);
+  lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
+
+  ESP_LOGI(TAG, "Settings UI created with QR code display");
+}
+
+void SettingsUI::set_config_url(const std::string& url) {
+  if (!qr_code_ || url.empty()) {
+    ESP_LOGW(TAG, "Cannot set config URL: qr_code=%p, url=%s", qr_code_, url.c_str());
+    return;
+  }
+
+  lv_result_t result = lv_qrcode_update(qr_code_, url.c_str(), url.length());
+  if (result != LV_RESULT_OK) {
+    ESP_LOGE(TAG, "Failed to update QR code");
+    set_status_message("Error: Failed to generate QR code");
+  } else {
+    ESP_LOGI(TAG, "QR code updated with URL: %s", url.c_str());
+  }
+}
+
+void SettingsUI::set_status_message(const std::string& message) {
+  if (status_label_) {
+    lv_label_set_text(status_label_, message.c_str());
+  }
+}

main/ui/apps/iotdis/ui/settings.h

@@ -0,0 +1,41 @@
+#pragma once
+
+#include "lvgl.h"
+#include "esp_err.h"
+#include <string>
+
+// Forward declaration
+class InteractionHandler;
+
+/**
+ * @brief Settings UI for Discord app
+ *
+ * Displays a QR code that links to a web-based configuration interface
+ */
+class SettingsUI {
+public:
+  SettingsUI() = default;
+  ~SettingsUI();
+
+  esp_err_t init(lv_obj_t* parent, InteractionHandler* interaction_handler);
+  esp_err_t deinit(void);
+
+  /**
+   * @brief Set the configuration URL to display in QR code
+   * @param url Full URL including IP, port, and auth key
+   */
+  void set_config_url(const std::string& url);
+
+  /**
+   * @brief Update status message below QR code
+   * @param message Status message to display
+   */
+  void set_status_message(const std::string& message);
+
+private:
+  void create_ui_(lv_obj_t* parent, InteractionHandler* interaction_handler);
+
+  lv_obj_t* container_ = nullptr;
+  lv_obj_t* qr_code_ = nullptr;
+  lv_obj_t* status_label_ = nullptr;
+};

main/ui/apps/iotdis/ui/settings_handler.cpp

@@ -0,0 +1,90 @@
+#include "ui/apps/iotdis/ui/settings_handler.h"
+#include "network/network.h"
+#include "esp_log.h"
+#include <sstream>
+#include <iomanip>
+
+static const char* TAG = "SettingsUIHandler";
+
+SettingsUIHandler::SettingsUIHandler() { }
+
+SettingsUIHandler::~SettingsUIHandler() {
+  deinit();
+}
+
+esp_err_t SettingsUIHandler::init(lv_obj_t* parent, InteractionHandler* interaction_handler, SettingHandler* setting_handler) {
+  ESP_LOGI(TAG, "Initializing Settings UI Handler");
+
+  setting_handler_ = setting_handler;
+
+  // Create unique bridge instance for this handler
+  bridge_ = std::make_unique<IotDisBridge>(setting_handler_);
+
+  // Create web handler with unique bridge
+  web_handler_ = std::make_unique<WebHandler>(setting_handler_, bridge_.get());
+
+  // Create settings UI
+  settings_ui_ = std::make_unique<SettingsUI>();
+  settings_ui_->init(parent, interaction_handler);
+
+  // Start web server and setup
+  setup_web_server_();
+
+  return ESP_OK;
+}
+
+esp_err_t SettingsUIHandler::deinit(void) {
+  ESP_LOGI(TAG, "Deinitializing Settings UI Handler");
+
+  // Stop web server
+  if (web_handler_) {
+    web_handler_->stop_web_server();
+    web_handler_.reset();
+  }
+
+  // Stop bridge
+  if (bridge_) {
+    bridge_->stop_polling_task();
+    bridge_.reset();
+  }
+
+  // Clean up UI
+  if (settings_ui_) {
+    settings_ui_->deinit();
+    settings_ui_.reset();
+  }
+
+  return ESP_OK;
+}
+
+// ============================================================================
+// Private Methods
+// ============================================================================
+
+void SettingsUIHandler::setup_web_server_() {
+  // Start web server
+  web_handler_->start_web_server();
+
+  if (web_handler_->is_running()) {
+    std::string device_ip = web_handler_->get_device_ip();
+    uint16_t port = web_handler_->get_port();
+
+    if (!device_ip.empty()) {
+      std::string url = web_handler_->get_url();
+
+      settings_ui_->set_config_url(url);
+
+      std::ostringstream status;
+      status << "Server running on " << device_ip << ":" << port;
+      settings_ui_->set_status_message(status.str());
+
+      ESP_LOGI(TAG, "QR code URL: %s", url.c_str());
+    } else {
+      settings_ui_->set_status_message("Error: No IP address");
+      ESP_LOGE(TAG, "Failed to get device IP address");
+    }
+  } else {
+    settings_ui_->set_status_message("Error: Failed to start server");
+    ESP_LOGE(TAG, "Web server failed to start");
+  }
+}

main/ui/apps/iotdis/ui/settings_handler.h

@@ -0,0 +1,33 @@
+#pragma once
+
+#include "ui/apps/iotdis/ui/settings.h"
+#include "ui/interaction_handler.h"
+#include "ui/apps/iotdis/bridge/bridge.h"
+#include "ui/apps/iotdis/settings/settings_handler.h"
+#include "ui/apps/iotdis/web/web_handlers.h"
+#include "esp_err.h"
+#include <memory>
+
+/**
+ * @brief Settings UI Handler for Discord App
+ *
+ * Manages the SettingsUI instance, web server, and interaction with the InteractionHandler.
+ * Each handler instance has its own IotDisBridge to prevent conflicts.
+ */
+class SettingsUIHandler {
+public:
+
+  SettingsUIHandler();
+  ~SettingsUIHandler();
+
+  esp_err_t init(lv_obj_t* parent, InteractionHandler* interaction_handler, SettingHandler* setting_handler);
+  esp_err_t deinit(void);
+
+private:
+  void setup_web_server_();
+
+  std::unique_ptr<SettingsUI> settings_ui_ = nullptr;
+  std::unique_ptr<IotDisBridge> bridge_ = nullptr;
+  std::unique_ptr<WebHandler> web_handler_ = nullptr;
+  SettingHandler* setting_handler_ = nullptr;  // Not owned
+};

main/ui/apps/iotdis/web/web_handlers.cpp

@@ -0,0 +1,362 @@
+#include "web_handlers.h"
+#include "../app.h"
+#include "esp_log.h"
+#include "network/network.h"
+#include "common/system_context.h"
+#include "esp_random.h"
+#include <sstream>
+#include <iomanip>
+
+static const char* TAG = "DiscordWebHandler";
+
+WebHandler::~WebHandler() {
+  stop_web_server();
+}
+
+esp_err_t WebHandler::start_web_server() {
+  if (web_server_ && web_server_->is_running()) {
+    ESP_LOGI(TAG, "Web server already running");
+    return ESP_OK;
+  }
+
+  auth_key_ = generate_auth_key_();
+
+  uint16_t port = web_server_->start(
+    auth_key_,
+    8080
+  );
+  if (port == 0) {
+    ESP_LOGE(TAG, "Failed to start web server");
+    return ESP_FAIL;
+  }
+
+  esp_err_t ret = register_web_endpoints_();
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register web endpoints");
+    web_server_->stop();
+    return ret;
+  }
+
+  ESP_LOGI(TAG, "Web server started");
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::stop_web_server() {
+  if (web_server_) {
+    web_server_->stop();
+    ESP_LOGI(TAG, "Web server stopped");
+  }
+  auth_key_.clear();
+  return ESP_OK;
+}
+
+std::string WebHandler::get_url() const {
+  if (web_server_ && web_server_->is_running()) {
+    NetworkHandler* network_handler = SystemContext::instance().get_network_handler();
+    if (!network_handler) {
+      ESP_LOGE(TAG, "Network handler not available in system context");
+      return "";
+    }
+    WifiHandler& wifi_handler = network_handler->get_wifi_handler();
+    std::string device_ip = wifi_handler.get_current_ip();
+    if (device_ip.empty()) {
+      ESP_LOGW(TAG, "Device not connected to WiFi");
+      return "";
+    }
+    uint16_t port = web_server_->get_port();
+
+    std::ostringstream url;
+    url << "http://" << device_ip << ":" << port << "/?auth=" << auth_key_;
+    return url.str();
+  }
+  return "";
+}
+
+std::string WebHandler::get_device_ip() const {
+  if (web_server_ && web_server_->is_running()) {
+    NetworkHandler* network_handler = SystemContext::instance().get_network_handler();
+    if (!network_handler) {
+      ESP_LOGE(TAG, "Network handler not available in system context");
+      return "";
+    }
+    WifiHandler& wifi_handler = network_handler->get_wifi_handler();
+    return wifi_handler.get_current_ip();
+  }
+  return "";
+}
+
+uint16_t WebHandler::get_port() const {
+  if (web_server_ && web_server_->is_running()) {
+    return web_server_->get_port();
+  }
+  return 0;
+}
+
+//
+//
+//
+
+
+std::string WebHandler::generate_auth_key_() {
+  // Generate 128-bit random key using ESP32 hardware RNG
+  uint32_t rand_values[4];
+  for (int i = 0; i < 4; i++) {
+    rand_values[i] = esp_random();
+  }
+
+  // Convert to hex string
+  std::ostringstream oss;
+  oss << std::hex << std::setfill('0');
+  for (int i = 0; i < 4; i++) {
+    oss << std::setw(8) << rand_values[i];
+  }
+
+  return oss.str();
+}
+
+
+esp_err_t WebHandler::register_web_endpoints_() {
+  if (!web_server_ || !web_server_->is_running()) {
+    return ESP_FAIL;
+  }
+
+  // GET / - Serve settings page
+  httpd_uri_t settings_page_uri = {
+    .uri = "/",
+    .method = HTTP_GET,
+    .handler = settings_page_handler_,
+    .user_ctx = this
+  };
+  web_server_->register_uri_handler(&settings_page_uri);
+
+  // POST /save - Save settings
+  httpd_uri_t save_settings_uri = {
+    .uri = "/save",
+    .method = HTTP_POST,
+    .handler = save_settings_handler_,
+    .user_ctx = this
+  };
+  web_server_->register_uri_handler(&save_settings_uri);
+
+  // POST /test - Test connection
+  httpd_uri_t test_connection_uri = {
+    .uri = "/test",
+    .method = HTTP_POST,
+    .handler = test_connection_handler_,
+    .user_ctx = this
+  };
+  web_server_->register_uri_handler(&test_connection_uri);
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::settings_page_handler_(httpd_req_t* req) {
+  WebHandler* self = static_cast<WebHandler*>(req->user_ctx);
+
+  // Validate auth
+  size_t query_len = httpd_req_get_url_query_len(req);
+  if (query_len == 0) {
+    httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Unauthorized");
+    return ESP_FAIL;
+  }
+
+  char* query = new char[query_len + 1];
+  if (httpd_req_get_url_query_str(req, query, query_len + 1) != ESP_OK) {
+    delete[] query;
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Bad Request");
+    return ESP_FAIL;
+  }
+
+  if (!self->web_server_->validate_auth(query)) {
+    delete[] query;
+    httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Unauthorized");
+    return ESP_FAIL;
+  }
+  delete[] query;
+
+  // Get current settings (access private members via friend)
+  std::string current_ip = self->setting_handler_->get_remote_ip();
+  uint16_t current_port = self->setting_handler_->get_remote_port();
+  uint16_t current_local_port = self->setting_handler_->get_local_port();
+
+  // Build HTML page
+  std::ostringstream html;
+  html << "<!DOCTYPE html><html><head>"
+    << "<meta name='viewport' content='width=device-width, initial-scale=1'>"
+    << "<title>Discord Bridge Settings</title>"
+    << "<style>"
+    << "body{font-family:Arial,sans-serif;max-width:600px;margin:50px auto;padding:20px;}"
+    << "h1{color:#333;}"
+    << "label{display:block;margin-top:15px;font-weight:bold;}"
+    << "input{width:100%;padding:10px;margin-top:5px;box-sizing:border-box;font-size:16px;}"
+    << "button{width:100%;padding:12px;margin-top:20px;font-size:16px;cursor:pointer;}"
+    << ".btn-primary{background:#4CAF50;color:white;border:none;}"
+    << ".btn-secondary{background:#008CBA;color:white;border:none;}"
+    << "#result{margin-top:20px;padding:10px;border-radius:5px;display:none;}"
+    << ".success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;}"
+    << ".error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}"
+    << "</style></head><body>"
+    << "<h1>Discord Bridge Settings</h1>"
+    << "<form id='settingsForm'>"
+    << "<label for='ip'>Bridge IP Address:</label>"
+    << "<input type='text' id='ip' name='ip' placeholder='e.g., 192.168.1.100' value='" << current_ip << "' required>"
+    << "<label for='port'>Bridge Port:</label>"
+    << "<input type='number' id='port' name='port' placeholder='e.g., 4211' value='" << current_port << "' required min='1' max='65535'>"
+    << "<label for='localPort'>ESP32 Local Port:</label>"
+    << "<input type='number' id='localPort' name='localPort' placeholder='e.g., 4212' value='" << current_local_port << "' required min='1' max='65535'>"
+    << "<button type='button' class='btn-secondary' onclick='testConnection()'>Test Connection</button>"
+    << "<button type='submit' class='btn-primary'>Save Settings</button>"
+    << "</form>"
+    << "<div id='result'></div>"
+    << "<script>"
+    << "const form=document.getElementById('settingsForm');"
+    << "const result=document.getElementById('result');"
+    << "function showResult(msg,isSuccess){"
+    << "result.textContent=msg;"
+    << "result.className=isSuccess?'success':'error';"
+    << "result.style.display='block';"
+    << "}"
+    << "function testConnection(){"
+    << "const ip=document.getElementById('ip').value;"
+    << "const port=document.getElementById('port').value;"
+    << "const localPort=document.getElementById('localPort').value;"
+    << "if(!ip||!port||!localPort){showResult('Please fill all fields',false);return;}"
+    << "showResult('Testing connection...',false);"
+    << "fetch('/test',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},"
+    << "body:'ip='+encodeURIComponent(ip)+'&port='+encodeURIComponent(port)+'&localPort='+encodeURIComponent(localPort)})"
+    << ".then(r=>r.json()).then(data=>showResult(data.message,data.success))"
+    << ".catch(()=>showResult('Request failed',false));"
+    << "}"
+    << "form.addEventListener('submit',function(e){"
+    << "e.preventDefault();"
+    << "const ip=document.getElementById('ip').value;"
+    << "const port=document.getElementById('port').value;"
+    << "const localPort=document.getElementById('localPort').value;"
+    << "if(!ip||!port||!localPort){showResult('Please fill all fields',false);return;}"
+    << "fetch('/save',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},"
+    << "body:'ip='+encodeURIComponent(ip)+'&port='+encodeURIComponent(port)+'&localPort='+encodeURIComponent(localPort)})"
+    << ".then(r=>r.json()).then(data=>{showResult(data.message,data.success);"
+    << "if(data.success)setTimeout(()=>result.style.display='none',3000);})"
+    << ".catch(()=>showResult('Request failed',false));"
+    << "});"
+    << "</script></body></html>";
+
+  std::string html_str = html.str();
+  httpd_resp_set_type(req, "text/html");
+  httpd_resp_send(req, html_str.c_str(), html_str.length());
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::save_settings_handler_(httpd_req_t* req) {
+  WebHandler* self = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read POST data
+  char* buf = new char[req->content_len + 1];
+  int ret = httpd_req_recv(req, buf, req->content_len);
+  if (ret <= 0) {
+    delete[] buf;
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+    return ESP_FAIL;
+  }
+  buf[ret] = '\0';
+
+  // Parse form data
+  char ip[64] = { 0 };
+  char port_str[8] = { 0 };
+  char local_port_str[8] = { 0 };
+
+  httpd_query_key_value(buf, "ip", ip, sizeof(ip));
+  httpd_query_key_value(buf, "port", port_str, sizeof(port_str));
+  httpd_query_key_value(buf, "localPort", local_port_str, sizeof(local_port_str));
+  delete[] buf;
+
+  if (strlen(ip) == 0 || strlen(port_str) == 0 || strlen(local_port_str) == 0) {
+    const char* resp = "{\"success\":false,\"message\":\"Missing fields\"}";
+    httpd_resp_set_type(req, "application/json");
+    httpd_resp_send(req, resp, strlen(resp));
+    return ESP_OK;
+  }
+
+  uint16_t port = static_cast<uint16_t>(atoi(port_str));
+  uint16_t local_port = static_cast<uint16_t>(atoi(local_port_str));
+  if (port == 0 || local_port == 0) {
+    const char* resp = "{\"success\":false,\"message\":\"Invalid port\"}";
+    httpd_resp_set_type(req, "application/json");
+    httpd_resp_send(req, resp, strlen(resp));
+    return ESP_OK;
+  }
+
+  // Save settings
+  if (self && self->setting_handler_) {
+    self->setting_handler_->save_settings(std::string(ip), port, local_port);
+  }
+
+  const char* resp = "{\"success\":true,\"message\":\"Settings saved successfully\"}";
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, resp, strlen(resp));
+
+  ESP_LOGI(TAG, "Settings saved via web interface: %s:%u (local port: %u)", ip, port, local_port);
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::test_connection_handler_(httpd_req_t* req) {
+  WebHandler* self = static_cast<WebHandler*>(req->user_ctx);
+  IotDisBridge* bridge = self ? self->bridge_ : nullptr;
+
+  // Read POST data
+  char* buf = new char[req->content_len + 1];
+  int ret = httpd_req_recv(req, buf, req->content_len);
+  if (ret <= 0) {
+    delete[] buf;
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+    return ESP_FAIL;
+  }
+  buf[ret] = '\0';
+
+  // Parse form data
+  char ip[64] = { 0 };
+  char port_str[8] = { 0 };
+  char local_port_str[8] = { 0 };
+
+  httpd_query_key_value(buf, "ip", ip, sizeof(ip));
+  httpd_query_key_value(buf, "port", port_str, sizeof(port_str));
+  httpd_query_key_value(buf, "localPort", local_port_str, sizeof(local_port_str));
+  delete[] buf;
+
+  if (strlen(ip) == 0 || strlen(port_str) == 0 || strlen(local_port_str) == 0) {
+    const char* resp = "{\"success\":false,\"message\":\"Missing fields\"}";
+    httpd_resp_set_type(req, "application/json");
+    httpd_resp_send(req, resp, strlen(resp));
+    return ESP_OK;
+  }
+
+  uint16_t port = static_cast<uint16_t>(atoi(port_str));
+  uint16_t local_port = static_cast<uint16_t>(atoi(local_port_str));
+  if (port == 0 || local_port == 0) {
+    const char* resp = "{\"success\":false,\"message\":\"Invalid port\"}";
+    httpd_resp_set_type(req, "application/json");
+    httpd_resp_send(req, resp, strlen(resp));
+    return ESP_OK;
+  }
+
+  // Test connection
+  bool success = false;
+  if (bridge) {
+    success = bridge->test_connection(std::string(ip), port, local_port);
+  } else {
+    ESP_LOGE(TAG, "IotDisBridge pointer is null, cannot test connection");
+  }
+
+  const char* resp = success
+    ? "{\"success\":true,\"message\":\"Connection successful!\"}"
+    : "{\"success\":false,\"message\":\"No response from bridge\"}";
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, resp, strlen(resp));
+
+  ESP_LOGI(TAG, "Connection test via web interface: %s:%u (local port: %u) - %s", ip, port, local_port, success ? "SUCCESS" : "FAILED");
+
+  return ESP_OK;
+}

main/ui/apps/iotdis/web/web_handlers.h

@@ -0,0 +1,81 @@
+#pragma once
+
+#include "esp_http_server.h"
+#include <string>
+#include "network/web_server_handler.h"
+#include "ui/apps/iotdis/settings/settings_handler.h"
+#include "ui/apps/iotdis/bridge/bridge.h"
+
+/**
+ * @brief HTTP request handlers for Discord Bridge settings web interface
+ *
+ * These handlers serve the web configuration page and process
+ * settings updates and connection tests.
+ */
+class WebHandler {
+public:
+  WebHandler(
+    SettingHandler* setting_handler,
+    IotDisBridge* bridge
+  ) :
+    web_server_(std::make_unique<WebServerHandler>())
+    , setting_handler_(setting_handler)
+    , bridge_(bridge) { }
+  ~WebHandler();
+
+  esp_err_t start_web_server();
+  esp_err_t stop_web_server();
+
+  std::string get_url() const;
+  std::string get_device_ip() const;
+  uint16_t get_port() const;
+
+  bool is_running() const {
+    return web_server_ && web_server_->is_running();
+  }
+
+private:
+
+  std::string generate_auth_key_();
+
+  esp_err_t register_web_endpoints_();
+
+  /**
+   * @brief Serve the main settings configuration page
+   *
+   * Validates authentication and serves an HTML form with current settings.
+   * Requires auth query parameter matching the session key.
+   *
+   * @param req HTTP request object
+   * @return ESP_OK on success
+   */
+  static esp_err_t settings_page_handler_(httpd_req_t* req);
+
+  /**
+   * @brief Save bridge connection settings
+   *
+   * Parses POST data containing ip, port, and localPort fields.
+   * Validates and persists settings to NVS storage.
+   *
+   * @param req HTTP request object
+   * @return ESP_OK on success
+   */
+  static esp_err_t save_settings_handler_(httpd_req_t* req);
+
+  /**
+   * @brief Test connection to Discord bridge
+   *
+   * Creates temporary UDP client to test connectivity with provided settings.
+   * Returns JSON response indicating success or failure.
+   *
+   * @param req HTTP request object
+   * @return ESP_OK on success
+   */
+  static esp_err_t test_connection_handler_(httpd_req_t* req);
+
+  std::unique_ptr<WebServerHandler> web_server_;
+  SettingHandler* setting_handler_ = nullptr;  ///< Pointer to settings handler (not owned)
+
+  std::string auth_key_;
+  IotDisBridge* bridge_ = nullptr;      ///< Pointer to IotDisBridge (not owned)
+};

main/ui/apps/mtr_app.cpp

@@ -1,399 +0,0 @@
-#include "apps/mtr_app.h"
-#include "external/mtr/arrival.h"
-#include "esp_log.h"
-#include "freertos/FreeRTOS.h"
-#include "freertos/task.h"
-
-#define TAG "MtrApp"
-
-// Event type for network ready
-#define EVENT_NETWORK_READY 1
-
-MtrApp::MtrApp() {
-  _mtr_handler = std::make_unique<MTRNextTrainHandler>();
-}
-
-esp_err_t MtrApp::init(lv_obj_t* container) {
-  if (!container) {
-    ESP_LOGE(TAG, "Container is null");
-    return ESP_ERR_INVALID_ARG;
-  }
-
-  _container = container;
-  ESP_LOGI(TAG, "Initializing MTR app...");
-
-  // Create page stack
-  _page_stack = std::make_unique<PageStack>(container);
-
-  // Load all lines
-  _all_lines = _mtr_handler->get_lines();
-  ESP_LOGI(TAG, "Loaded %zu MTR lines", _all_lines.size());
-
-  // Build initial line selection page
-  _page_stack->push([this](lv_obj_t* page) {
-    this->build_line_selection_page(page);
-    });
-
-  ESP_LOGI(TAG, "MTR app initialized successfully");
-  return ESP_OK;
-}
-
-esp_err_t MtrApp::deinit(void) {
-  ESP_LOGI(TAG, "Deinitializing MTR app");
-
-  // Clear page stack
-  if (_page_stack) {
-    _page_stack->clear();
-    _page_stack.reset();
-  }
-
-  // Clear state
-  _selected_line_code.clear();
-  _selected_station_code.clear();
-  _selected_line_info = nullptr;
-  _all_lines.clear();
-
-  return ESP_OK;
-}
-
-std::string MtrApp::get_name(void) const {
-  return "MTR";
-}
-
-bool MtrApp::on_back_button_pressed(void) {
-  if (_page_stack && _page_stack->depth() > 1) {
-    _page_stack->pop();
-    return true;  // Handled
-  }
-  return false;  // Not handled, go back to main menu
-}
-
-void MtrApp::handle_event(uint32_t event_type, void* event_data) {
-  if (event_type == EVENT_NETWORK_READY) {
-    ESP_LOGI(TAG, "Network ready event received");
-  }
-}
-
-void MtrApp::build_line_selection_page(lv_obj_t* page_container) {
-  ESP_LOGI(TAG, "Building line selection page");
-
-  // Title
-  lv_obj_t* title = lv_label_create(page_container);
-  lv_label_set_text(title, "選擇路綫 Select Line");
-  lv_obj_set_style_text_color(title, lv_color_black(), 0);
-  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);
-
-  // Scrollable container for line buttons
-  lv_obj_t* scroll_container = lv_obj_create(page_container);
-  lv_obj_set_size(scroll_container, lv_pct(95), lv_pct(85));
-  lv_obj_align(scroll_container, LV_ALIGN_TOP_MID, 0, 40);
-  lv_obj_set_flex_flow(scroll_container, LV_FLEX_FLOW_COLUMN);
-  lv_obj_set_flex_align(scroll_container, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
-  lv_obj_set_style_pad_all(scroll_container, 5, 0);
-  lv_obj_set_style_pad_row(scroll_container, 8, 0);
-
-  // Create button for each line
-  for (size_t i = 0; i < _all_lines.size(); i++) {
-    LineInfo* line = &_all_lines[i];
-
-    lv_obj_t* btn = lv_btn_create(scroll_container);
-    lv_obj_set_size(btn, lv_pct(95), 60);
-
-    // Set button color based on line color
-    uint32_t color = parse_color_hex(line->color());
-    lv_obj_set_style_bg_color(btn, lv_color_hex(color), 0);
-
-    // Button label
-    lv_obj_t* label = lv_label_create(btn);
-    lv_label_set_text_fmt(label, "%s", line->code());
-    lv_obj_set_style_text_color(label, lv_color_white(), 0);
-    lv_obj_center(label);
-
-    // Store line pointer in user data
-    lv_obj_add_event_cb(btn, line_button_event_cb, LV_EVENT_CLICKED, this);
-    lv_obj_set_user_data(btn, (void*)line);
-  }
-
-  ESP_LOGI(TAG, "Created %zu line buttons", _all_lines.size());
-}
-
-void MtrApp::build_station_selection_page(lv_obj_t* page_container) {
-  ESP_LOGI(TAG, "Building station selection page for line: %s", _selected_line_code.c_str());
-
-  if (!_selected_line_info) {
-    ESP_LOGE(TAG, "No line info selected");
-    return;
-  }
-
-  // Title with line code
-  lv_obj_t* title = lv_label_create(page_container);
-  lv_label_set_text_fmt(title, "%s 路綫車站", _selected_line_code.c_str());
-  lv_obj_set_style_text_color(title, lv_color_black(), 0);
-  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);
-
-  // Scrollable container for station buttons
-  lv_obj_t* scroll_container = lv_obj_create(page_container);
-  lv_obj_set_size(scroll_container, lv_pct(95), lv_pct(85));
-  lv_obj_align(scroll_container, LV_ALIGN_TOP_MID, 0, 40);
-  lv_obj_set_flex_flow(scroll_container, LV_FLEX_FLOW_COLUMN);
-  lv_obj_set_flex_align(scroll_container, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
-  lv_obj_set_style_pad_all(scroll_container, 5, 0);
-  lv_obj_set_style_pad_row(scroll_container, 6, 0);
-
-  // Create button for each station
-  const std::vector<StationInfo>* stations = _selected_line_info->stations();
-  for (size_t i = 0; i < stations->size(); i++) {
-    const StationInfo* station = &(*stations)[i];
-
-    lv_obj_t* btn = lv_btn_create(scroll_container);
-    lv_obj_set_size(btn, lv_pct(95), 50);
-    lv_obj_set_style_bg_color(btn, lv_color_hex(0x4CAF50), 0);
-
-    // Button label with station name and code
-    lv_obj_t* label = lv_label_create(btn);
-    lv_label_set_text_fmt(label, "%s (%s)", station->name(), station->code());
-    lv_obj_set_style_text_color(label, lv_color_white(), 0);
-    lv_obj_center(label);
-
-    // Store station pointer in user data
-    lv_obj_add_event_cb(btn, station_button_event_cb, LV_EVENT_CLICKED, this);
-    lv_obj_set_user_data(btn, (void*)station);
-  }
-
-  ESP_LOGI(TAG, "Created %zu station buttons", stations->size());
-}
-
-void MtrApp::build_arrival_page(lv_obj_t* page_container) {
-  ESP_LOGI(TAG, "Building arrival page");
-
-  // Title
-  lv_obj_t* title = lv_label_create(page_container);
-  lv_label_set_text_fmt(title, "%s - %s", _selected_line_code.c_str(), _selected_station_code.c_str());
-  lv_obj_set_style_text_color(title, lv_color_black(), 0);
-  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);
-
-  // Loading message
-  lv_obj_t* loading_label = lv_label_create(page_container);
-  lv_label_set_text(loading_label, "載入中... Loading...");
-  lv_obj_set_style_text_color(loading_label, lv_color_black(), 0);
-  lv_obj_center(loading_label);
-
-  // Refresh button
-  lv_obj_t* refresh_btn = lv_btn_create(page_container);
-  lv_obj_set_size(refresh_btn, 120, 50);
-  lv_obj_align(refresh_btn, LV_ALIGN_BOTTOM_MID, 0, -10);
-  lv_obj_add_event_cb(refresh_btn, refresh_button_event_cb, LV_EVENT_CLICKED, this);
-
-  lv_obj_t* refresh_label = lv_label_create(refresh_btn);
-  lv_label_set_text(refresh_label, LV_SYMBOL_REFRESH " 重新整理");
-  lv_obj_set_style_text_color(refresh_label, lv_color_white(), 0);
-  lv_obj_center(refresh_label);
-
-  // Load arrival data asynchronously
-  load_arrival_data(page_container);
-}
-
-void MtrApp::load_arrival_data(lv_obj_t* page_container) {
-  if (!_network_handler) {
-    ESP_LOGW(TAG, "Network handler not set, cannot fetch arrival data");
-    // Update UI to show error
-    lv_obj_t* error_label = lv_label_create(page_container);
-    lv_label_set_text(error_label, "網絡未就緒\nNetwork not ready");
-    lv_obj_set_style_text_color(error_label, lv_color_black(), 0);
-    lv_obj_align(error_label, LV_ALIGN_CENTER, 0, -30);
-    return;
-  }
-
-  ESP_LOGI(TAG, "Fetching arrival data for %s/%s", _selected_line_code.c_str(), _selected_station_code.c_str());
-
-  StationArrivalInfo* arrival_info = nullptr;
-  MtrArrivalErrorCode error_code = _mtr_handler->get_next_arrival_info(
-    _network_handler,
-    _selected_line_code,
-    _selected_station_code,
-    arrival_info,
-    Language::TC
-  );
-
-  // Clear loading message
-  lv_obj_clean(page_container);
-
-  // Recreate title
-  lv_obj_t* title = lv_label_create(page_container);
-  lv_label_set_text_fmt(title, "%s - %s", _selected_line_code.c_str(), _selected_station_code.c_str());
-  lv_obj_set_style_text_color(title, lv_color_black(), 0);
-  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);
-
-  if (error_code != MtrArrivalErrorCode::NONE || !arrival_info) {
-    ESP_LOGE(TAG, "Failed to fetch arrival info, error code: %d", (int)error_code);
-
-    lv_obj_t* error_label = lv_label_create(page_container);
-    lv_label_set_text(error_label, "無法取得班次資料\nFailed to fetch arrival data");
-    lv_obj_set_style_text_color(error_label, lv_color_black(), 0);
-    lv_obj_center(error_label);
-    return;
-  }
-
-  // Create scrollable container for arrivals
-  lv_obj_t* scroll_container = lv_obj_create(page_container);
-  lv_obj_set_size(scroll_container, lv_pct(95), lv_pct(75));
-  lv_obj_align(scroll_container, LV_ALIGN_TOP_MID, 0, 45);
-  lv_obj_set_style_pad_all(scroll_container, 10, 0);
-
-  int y_offset = 0;
-
-  // Display UP direction trains
-  lv_obj_t* up_header = lv_label_create(scroll_container);
-  lv_label_set_text(up_header, "上行 UP:");
-  lv_obj_set_style_text_color(up_header, lv_color_black(), 0);
-  lv_obj_set_pos(up_header, 0, y_offset);
-  y_offset += 30;
-
-  const std::vector<ArrivalInfo>* up_arrivals = arrival_info->up_arrivals();
-  if (up_arrivals->empty()) {
-    lv_obj_t* no_train = lv_label_create(scroll_container);
-    lv_label_set_text(no_train, "  暫無班次 No trains");
-    lv_obj_set_style_text_color(no_train, lv_color_hex(0x666666), 0);
-    lv_obj_set_pos(no_train, 10, y_offset);
-    y_offset += 25;
-  } else {
-    for (const auto& arrival : *up_arrivals) {
-      lv_obj_t* arrival_label = lv_label_create(scroll_container);
-      lv_label_set_text_fmt(arrival_label, "  %s → %s", arrival.arrival_time(), arrival.destination());
-      lv_obj_set_style_text_color(arrival_label, lv_color_black(), 0);
-      lv_obj_set_pos(arrival_label, 10, y_offset);
-      y_offset += 25;
-    }
-  }
-
-  y_offset += 10;
-
-  // Display DOWN direction trains
-  lv_obj_t* down_header = lv_label_create(scroll_container);
-  lv_label_set_text(down_header, "下行 DOWN:");
-  lv_obj_set_style_text_color(down_header, lv_color_black(), 0);
-  lv_obj_set_pos(down_header, 0, y_offset);
-  y_offset += 30;
-
-  const std::vector<ArrivalInfo>* down_arrivals = arrival_info->down_arrivals();
-  if (down_arrivals->empty()) {
-    lv_obj_t* no_train = lv_label_create(scroll_container);
-    lv_label_set_text(no_train, "  暫無班次 No trains");
-    lv_obj_set_style_text_color(no_train, lv_color_hex(0x666666), 0);
-    lv_obj_set_pos(no_train, 10, y_offset);
-    y_offset += 25;
-  } else {
-    for (const auto& arrival : *down_arrivals) {
-      lv_obj_t* arrival_label = lv_label_create(scroll_container);
-      lv_label_set_text_fmt(arrival_label, "  %s → %s", arrival.arrival_time(), arrival.destination());
-      lv_obj_set_style_text_color(arrival_label, lv_color_black(), 0);
-      lv_obj_set_pos(arrival_label, 10, y_offset);
-      y_offset += 25;
-    }
-  }
-
-  // Clean up
-  if (arrival_info != nullptr) {
-    delete arrival_info;
-  }
-
-  // Refresh button
-  lv_obj_t* refresh_btn = lv_btn_create(page_container);
-  lv_obj_set_size(refresh_btn, 120, 50);
-  lv_obj_align(refresh_btn, LV_ALIGN_BOTTOM_MID, 0, -10);
-  lv_obj_add_event_cb(refresh_btn, refresh_button_event_cb, LV_EVENT_CLICKED, this);
-
-  lv_obj_t* refresh_label = lv_label_create(refresh_btn);
-  lv_label_set_text(refresh_label, LV_SYMBOL_REFRESH " 重新整理");
-  lv_obj_set_style_text_color(refresh_label, lv_color_white(), 0);
-  lv_obj_center(refresh_label);
-
-  ESP_LOGI(TAG, "Arrival data displayed successfully");
-}
-
-uint32_t MtrApp::parse_color_hex(const char* hex_str) {
-  if (!hex_str || hex_str[0] != '#') {
-    return 0x808080;  // Default gray
-  }
-
-  // Skip the '#' character
-  hex_str++;
-
-  uint32_t color = 0;
-  sscanf(hex_str, "%" SCNx32, &color);
-  return color;
-}
-
-void MtrApp::line_button_event_cb(lv_event_t* e) {
-  lv_event_code_t code = lv_event_get_code(e);
-  if (code == LV_EVENT_CLICKED) {
-    MtrApp* app = (MtrApp*)lv_event_get_user_data(e);
-    lv_obj_t* btn = (lv_obj_t*)lv_event_get_target(e);
-    LineInfo* line = (LineInfo*)lv_obj_get_user_data(btn);
-
-    if (app && line) {
-      ESP_LOGI(TAG, "Line selected: %s", line->code());
-      app->_selected_line_code = line->code();
-      app->_selected_line_info = line;
-
-      // Push station selection page
-      app->_page_stack->push([app](lv_obj_t* page) {
-        app->build_station_selection_page(page);
-        });
-    }
-  }
-}
-
-void MtrApp::station_button_event_cb(lv_event_t* e) {
-  lv_event_code_t code = lv_event_get_code(e);
-  if (code == LV_EVENT_CLICKED) {
-    MtrApp* app = (MtrApp*)lv_event_get_user_data(e);
-    lv_obj_t* btn = (lv_obj_t*)lv_event_get_target(e);
-    const StationInfo* station = (const StationInfo*)lv_obj_get_user_data(btn);
-
-    if (app && station) {
-      ESP_LOGI(TAG, "Station selected: %s (%s)", station->name(), station->code());
-      app->_selected_station_code = station->code();
-
-      // Push arrival page
-      app->_page_stack->push([app](lv_obj_t* page) {
-        app->build_arrival_page(page);
-        });
-    }
-  }
-}
-
-void MtrApp::refresh_button_event_cb(lv_event_t* e) {
-  lv_event_code_t code = lv_event_get_code(e);
-  if (code == LV_EVENT_CLICKED) {
-    MtrApp* app = (MtrApp*)lv_event_get_user_data(e);
-    if (app && app->_page_stack && app->_page_stack->current_page()) {
-      ESP_LOGI(TAG, "Refresh button clicked");
-      app->load_arrival_data(app->_page_stack->current_page());
-    }
-  }
-}
-
-// MtrAppDescriptor implementation
-MtrApp* MtrAppDescriptor::_app_instance = nullptr;
-
-MtrAppDescriptor::MtrAppDescriptor()
-  : AppDescriptor("MTR", []() -> UIApp* {
-  if (!MtrAppDescriptor::_app_instance) {
-    MtrAppDescriptor::_app_instance = new MtrApp();
-  }
-  return MtrAppDescriptor::_app_instance;
-    }()) {
-  // Register with AppRegistry
-  AppRegistry::instance().register_app(this);
-  ESP_LOGI(TAG, "MtrApp registered with AppRegistry");
-}
-
-void MtrAppDescriptor::draw_icon(lv_obj_t* parent) {
-  // Create MTR icon with train symbol
-  lv_obj_t* icon_label = lv_label_create(parent);
-  lv_label_set_text(icon_label, LV_SYMBOL_GPS "\nMTR");
-  lv_obj_set_style_text_color(icon_label, lv_color_white(), 0);
-  lv_obj_set_style_text_align(icon_label, LV_TEXT_ALIGN_CENTER, 0);
-  lv_obj_center(icon_label);
-}

main/ui/apps/mtr_app.h

@@ -1,71 +0,0 @@
-#pragma once
-
-#include "ui/ui_app.h"
-#include "ui/app_registry.h"
-#include "ui/page_stack.h"
-#include "external/mtr/mtr.h"
-#include "external/mtr/line_info.h"
-#include "external/mtr/station_info.h"
-#include "network/network.h"
-#include <memory>
-#include <string>
-
-/**
- * @brief MTR Next Train application
- *
- * Provides multi-page navigation for:
- * 1. Line selection - choose MTR line
- * 2. Station selection - choose station within selected line
- * 3. Arrival display - show real-time train arrival information
- */
-class MtrApp : public UIApp {
-public:
-  MtrApp();
-  virtual ~MtrApp() = default;
-
-  esp_err_t init(lv_obj_t* container) override;
-  esp_err_t deinit(void) override;
-  std::string get_name(void) const override;
-  bool on_back_button_pressed(void) override;
-  void handle_event(uint32_t event_type, void* event_data) override;
-
-  // Set network handler (must be called before using app)
-  void set_network_handler(NetworkHandler* handler) { _network_handler = handler; }
-
-private:
-  std::unique_ptr<MTRNextTrainHandler> _mtr_handler;
-  std::unique_ptr<PageStack> _page_stack;
-  NetworkHandler* _network_handler = nullptr;
-
-  // Current selection state
-  std::string _selected_line_code;
-  std::string _selected_station_code;
-  LineInfo* _selected_line_info = nullptr;
-  std::vector<LineInfo> _all_lines;
-
-  // Page builders
-  void build_line_selection_page(lv_obj_t* page_container);
-  void build_station_selection_page(lv_obj_t* page_container);
-  void build_arrival_page(lv_obj_t* page_container);
-
-  // Event handlers
-  static void line_button_event_cb(lv_event_t* e);
-  static void station_button_event_cb(lv_event_t* e);
-  static void refresh_button_event_cb(lv_event_t* e);
-
-  // Helper functions
-  void load_arrival_data(lv_obj_t* page_container);
-  uint32_t parse_color_hex(const char* hex_str);
-};
-
-/**
- * @brief AppDescriptor for MtrApp
- */
-class MtrAppDescriptor : public AppDescriptor {
-public:
-  MtrAppDescriptor();
-  void draw_icon(lv_obj_t* parent) override;
-
-private:
-  static MtrApp* _app_instance;
-};

main/ui/apps/registry.cpp

@@ -0,0 +1,11 @@
+#include "ui/apps/registry.h"
+
+#include "ui/apps/iotdis/descriptor.h"
+#include "ui/apps/travel/descriptor.h"
+
+esp_err_t AppRegistry::init(void) {
+  register_app(std::make_unique<IotDisDescriptor>());
+  register_app(std::make_unique<TravelDescriptor>());
+
+  return ESP_OK;
+}

main/ui/apps/registry.h

@@ -0,0 +1,59 @@
+#pragma once
+
+#include "ui/apps/app.h"
+#include <map>
+#include <string>
+#include "esp_log.h"
+#include <memory>
+
+class AppRegistry {
+public:
+  static AppRegistry& instance() {
+    static AppRegistry registry;
+    return registry;
+  }
+
+  /**
+   * @brief Initialize the app registry with built-in apps
+   *
+   */
+  esp_err_t init(void);
+
+  void register_app(std::unique_ptr<AppDescriptor> app_descriptor) {
+    if (app_descriptors_.find(app_descriptor->get_name()) != app_descriptors_.end()) {
+      // App already registered
+      ESP_LOGW("AppRegistry", "App '%s' is already registered", app_descriptor->get_name().c_str());
+      return;
+    }
+    app_descriptors_.emplace(app_descriptor->get_name(), std::move(app_descriptor));
+  }
+
+  size_t size() const {
+    return app_descriptors_.size();
+  }
+
+  // iterators to access registered apps
+  auto begin() { return app_descriptors_.begin(); }
+  auto begin() const { return app_descriptors_.begin(); }
+  auto end() { return app_descriptors_.end(); }
+  auto end() const { return app_descriptors_.end(); }
+
+  // [] operator to get app by name
+  AppDescriptor* operator[](const std::string& name) {
+    auto it = app_descriptors_.find(name);
+    if (it != app_descriptors_.end()) {
+      return it->second.get();
+    }
+    return nullptr;
+  }
+
+private:
+  std::map<std::string, std::unique_ptr<AppDescriptor>> app_descriptors_ = {};
+
+  AppRegistry() = default;
+  // Disable copy and move semantics
+  AppRegistry(const AppRegistry&) = delete;
+  AppRegistry& operator=(const AppRegistry&) = delete;
+  AppRegistry(AppRegistry&&) = delete;
+  AppRegistry& operator=(AppRegistry&&) = delete;
+};

main/ui/apps/shutdown_app.cpp

@@ -1,64 +0,0 @@
-#include "apps/shutdown_app.h"
-#include "esp_log.h"
-
-#define TAG "ShutdownApp"
-
-ShutdownApp::ShutdownApp(std::string message)
-  : _message(message.empty() ? "System Shutting Down..." : message) { }
-
-esp_err_t ShutdownApp::init(lv_obj_t* container) {
-  if (!container) {
-    ESP_LOGE(TAG, "Container is null");
-    return ESP_ERR_INVALID_ARG;
-  }
-
-  _container = container;
-  ESP_LOGI(TAG, "Initializing shutdown app with message: %s", _message.c_str());
-
-  // Main message label
-  _label_message = lv_label_create(_container);
-  lv_label_set_text(_label_message, _message.c_str());
-  lv_obj_set_style_text_color(_label_message, lv_color_white(), 0);
-  lv_obj_align(_label_message, LV_ALIGN_CENTER, 0, 0);
-
-  // Optional: Add spinner animation
-  lv_obj_t* spinner = lv_spinner_create(_container);
-  lv_obj_set_size(spinner, 80, 80);
-  lv_obj_align(spinner, LV_ALIGN_CENTER, 0, 80);
-  lv_obj_set_style_arc_color(spinner, lv_color_white(), LV_PART_INDICATOR);
-
-  ESP_LOGI(TAG, "Shutdown app initialized successfully");
-  return ESP_OK;
-}
-
-esp_err_t ShutdownApp::deinit(void) {
-  ESP_LOGI(TAG, "Deinitializing shutdown app");
-  _label_message = nullptr;
-  return ESP_OK;
-}
-
-std::string ShutdownApp::get_name(void) const {
-  return "Shutdown";
-}
-
-// ShutdownAppDescriptor implementation
-ShutdownApp* ShutdownAppDescriptor::_app_instance = nullptr;
-
-ShutdownAppDescriptor::ShutdownAppDescriptor()
-  : AppDescriptor("Shutdown", nullptr) {
-  // Create singleton app instance with default message
-  if (!_app_instance) {
-    _app_instance = new ShutdownApp();
-  }
-
-  // it's only used during system shutdown, not as a user-launchable app
-}
-
-void ShutdownAppDescriptor::draw_icon(lv_obj_t* parent) {
-  // Create a simple icon (not normally shown in nav bar)
-  lv_obj_t* icon_label = lv_label_create(parent);
-  lv_label_set_text(icon_label, LV_SYMBOL_POWER "\nShutdown");
-  lv_obj_set_style_text_color(icon_label, lv_color_white(), 0);
-  lv_obj_set_style_text_align(icon_label, LV_TEXT_ALIGN_CENTER, 0);
-  lv_obj_center(icon_label);
-}

main/ui/apps/shutdown_app.h

@@ -1,39 +0,0 @@
-#pragma once
-
-#include "ui/ui_app.h"
-#include "ui/app_registry.h"
-
-/**
- * @brief Shutdown application - displays shutdown message
- *
- * Shown when the system is about to enter deep sleep or power off.
- * Displays a message and optionally a spinner animation.
- */
-class ShutdownApp : public UIApp {
-public:
-  ShutdownApp(std::string message = "");
-  virtual ~ShutdownApp() = default;
-
-  esp_err_t init(lv_obj_t* container) override;
-  esp_err_t deinit(void) override;
-  std::string get_name(void) const override;
-
-private:
-  std::string _message;
-  lv_obj_t* _label_message = nullptr;
-};
-
-/**
- * @brief AppDescriptor for ShutdownApp
- *
- * Note: Shutdown app is typically not shown in the navigation bar
- * as it's only used during system shutdown.
- */
-class ShutdownAppDescriptor : public AppDescriptor {
-public:
-  ShutdownAppDescriptor();
-  void draw_icon(lv_obj_t* parent) override;
-
-private:
-  static ShutdownApp* _app_instance;
-};

main/ui/apps/travel/CMakeLists.txt

@@ -0,0 +1,11 @@
+# Explicit list of travel app sources
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/web/web_handlers.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/descriptor.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/settings/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/app.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main.cpp"
+)

main/ui/apps/travel/app.cpp

@@ -0,0 +1,131 @@
+#include "ui/apps/travel/app.h"
+#include "ui/apps/travel/ui/main_handler.h"
+#include "ui/apps/travel/ui/settings_handler.h"
+#include "common/system_context.h"
+#include "esp_log.h"
+
+static const char* TAG = "TravelApp";
+
+TravelApp::TravelApp()
+  : main_ui_handler_(nullptr)
+  , settings_ui_handler_(nullptr)
+  , current_page_(Page::MAIN)
+  , setting_handler_(nullptr)
+  , network_handler_(nullptr)
+  , interaction_handler_(nullptr) {
+  setting_handler_ = std::make_unique<travel::SettingHandler>(
+    std::make_unique<NVSStorageHandler>(TravelApp::NVS_NAMESPACE)
+  );
+}
+
+TravelApp::~TravelApp() { }
+
+esp_err_t TravelApp::init(lv_obj_t* container, InteractionHandler* interaction_handler) {
+  ESP_LOGI(TAG, "Initializing Travel app");
+
+  container_ = container;
+  interaction_handler_ = interaction_handler;
+
+  // Initialize storage
+  setting_handler_->init(nullptr);
+
+  // Load saved settings
+  setting_handler_->load_settings();
+
+  // Get network handler from system context
+  network_handler_ = SystemContext::instance().get_network_handler();
+
+  // Create main UI handler
+  main_ui_handler_ = std::make_unique<travel::MainUIHandler>();
+  main_ui_handler_->init(container, interaction_handler_, setting_handler_.get(), network_handler_);
+
+  // Register settings button callback
+  main_ui_handler_->register_on_settings_button_clicked(on_settings_button_clicked_static, this);
+
+  current_page_ = Page::MAIN;
+
+  return ESP_OK;
+}
+
+esp_err_t TravelApp::deinit() {
+  ESP_LOGI(TAG, "Deinitializing Travel app");
+
+  // Clean up UI handlers
+  if (settings_ui_handler_) {
+    settings_ui_handler_->deinit();
+    settings_ui_handler_.reset();
+  }
+
+  if (main_ui_handler_) {
+    main_ui_handler_->deinit();
+    main_ui_handler_.reset();
+  }
+
+  return ESP_OK;
+}
+
+std::string TravelApp::get_name() const {
+  return "Travel";
+}
+
+bool TravelApp::on_back_button_pressed() {
+  // If on settings page, go back to main page
+  if (current_page_ == Page::SETTINGS) {
+    // Clean up settings handler
+    if (settings_ui_handler_) {
+      settings_ui_handler_->deinit();
+      settings_ui_handler_.reset();
+    }
+
+    // Reload settings in case they were updated
+    setting_handler_->load_settings();
+
+    // Recreate main UI handler with updated settings
+    if (!main_ui_handler_) {
+      main_ui_handler_ = std::make_unique<travel::MainUIHandler>();
+      main_ui_handler_->init(container_, interaction_handler_, setting_handler_.get(), network_handler_);
+      main_ui_handler_->register_on_settings_button_clicked(on_settings_button_clicked_static, this);
+    }
+
+    current_page_ = Page::MAIN;
+    return true;
+  }
+
+  // Let system handle back (return to app icons)
+  return false;
+}
+
+void TravelApp::set_network_handler(NetworkHandler* network_handler) {
+  network_handler_ = network_handler;
+}
+
+// ============================================================================
+// Private Methods
+// ============================================================================
+
+void TravelApp::show_settings_page() {
+  ESP_LOGI(TAG, "Showing settings page");
+
+  // Hide main UI handler
+  if (main_ui_handler_) {
+    main_ui_handler_->deinit();
+    main_ui_handler_.reset();
+  }
+
+  // Create settings UI handler
+  settings_ui_handler_ = std::make_unique<travel::SettingsUIHandler>();
+  settings_ui_handler_->init(container_, interaction_handler_, setting_handler_.get(), network_handler_);
+
+  current_page_ = Page::SETTINGS;
+}
+
+// ============================================================================
+// Static Callbacks
+// ============================================================================
+
+void TravelApp::on_settings_button_clicked_static(void* user_data) {
+  TravelApp* app = static_cast<TravelApp*>(user_data);
+  if (app) {
+    app->show_settings_page();
+  }
+}

main/ui/apps/travel/app.h

@@ -0,0 +1,72 @@
+#pragma once
+
+#include "ui/apps/app.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "ui/apps/travel/ui/main_handler.h"
+#include "ui/apps/travel/ui/settings_handler.h"
+#include "io/nvs_handler.h"
+#include "network/network.h"
+#include <string>
+#include <memory>
+
+// Forward declarations
+namespace travel {
+class MainUIHandler;
+class SettingsUIHandler;
+class SettingHandler;
+}
+
+/**
+ * @brief Travel App - MTR Station Arrival Time Display
+ *
+ * Displays estimated arrival times for configured MTR routes.
+ * Features:
+ * - Support for all MTR lines from assets
+ * - Save up to 5 (station, destination) route pairs
+ * - Poll every 30 seconds (configurable 10-120s)
+ * - Traditional Chinese by default
+ * - E-ink optimized (no animations, static layout)
+ * - Web-based configuration via QR code
+ */
+class TravelApp : public UIApp {
+public:
+  TravelApp();
+  ~TravelApp() override;
+
+  esp_err_t init(lv_obj_t* container, InteractionHandler* interaction_handler) override;
+  esp_err_t deinit(void) override;
+  std::string get_name(void) const override;
+  bool on_back_button_pressed(void) override;
+
+  // Set network handler for API calls
+  void set_network_handler(NetworkHandler* network_handler);
+
+private:
+  // UI handlers
+  std::unique_ptr<travel::MainUIHandler> main_ui_handler_;
+  std::unique_ptr<travel::SettingsUIHandler> settings_ui_handler_;
+
+  // Current page tracking
+  enum class Page {
+    MAIN,
+    SETTINGS
+  };
+  Page current_page_;
+
+  // Settings handler (shared across handlers)
+  std::unique_ptr<travel::SettingHandler> setting_handler_;
+
+  // Network handler (not owned, set externally)
+  NetworkHandler* network_handler_;
+
+  // Interaction handler (not owned)
+  InteractionHandler* interaction_handler_;
+
+  static constexpr const char* NVS_NAMESPACE = "travel_app";
+
+  // Private methods
+  void show_settings_page();
+
+  // UI callback forwarders
+  static void on_settings_button_clicked_static(void* user_data);
+};

main/ui/apps/travel/descriptor.cpp

@@ -0,0 +1,12 @@
+#include "ui/apps/travel/descriptor.h"
+#include "ui/apps/travel/app.h"
+
+TravelDescriptor::TravelDescriptor()
+  : AppDescriptor("Travel", std::make_unique<TravelApp>()) { }
+
+void TravelDescriptor::draw_icon(lv_obj_t* parent) {
+  // Draw train icon using LVGL symbol
+  lv_obj_t* icon = lv_label_create(parent);
+  lv_label_set_text(icon, LV_SYMBOL_DRIVE);  // Using drive symbol as train
+  lv_obj_center(icon);
+}

main/ui/apps/travel/descriptor.h

@@ -0,0 +1,14 @@
+#pragma once
+
+#include "ui/apps/app.h"
+
+// Forward declaration
+class TravelApp;
+
+class TravelDescriptor : public AppDescriptor {
+public:
+  TravelDescriptor();
+  ~TravelDescriptor() override = default;
+
+  void draw_icon(lv_obj_t* parent) override;
+};

main/ui/apps/travel/settings/settings_handler.cpp

@@ -0,0 +1,171 @@
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "cJSON.h"
+#include "esp_log.h"
+
+static const char* TAG = "TravelSettings";
+
+namespace travel {
+
+SettingHandler::SettingHandler(std::unique_ptr<NVSStorageHandler> storage)
+  : routes_()
+  , polling_interval_sec_(DEFAULT_POLLING_INTERVAL)
+  , storage_(std::move(storage)) {
+}
+
+esp_err_t SettingHandler::init(const EventGroupHandle_t& system_event_group) {
+  storage_->init(system_event_group);
+  return ESP_OK;
+}
+
+void SettingHandler::load_settings() {
+  // Load polling interval
+  std::string poll_str = storage_->get(NVS_KEY_POLLING);
+  if (!poll_str.empty()) {
+    polling_interval_sec_ = std::stoul(poll_str);
+    if (polling_interval_sec_ < MIN_POLLING_INTERVAL ||
+        polling_interval_sec_ > MAX_POLLING_INTERVAL) {
+      polling_interval_sec_ = DEFAULT_POLLING_INTERVAL;
+    }
+  }
+
+  // Load routes - clear existing settings as per new format
+  routes_.clear();
+  std::string routes_json = storage_->get(NVS_KEY_ROUTES);
+  if (!routes_json.empty()) {
+    routes_from_json(routes_json);
+  }
+
+  ESP_LOGI(TAG, "Loaded %d routes, polling interval: %d seconds",
+           static_cast<int>(routes_.size()), static_cast<int>(polling_interval_sec_));
+}
+
+void SettingHandler::save_settings() {
+  // Save polling interval
+  storage_->put(NVS_KEY_POLLING, std::to_string(polling_interval_sec_));
+
+  // Save routes
+  std::string routes_json = routes_to_json();
+  storage_->put(NVS_KEY_ROUTES, routes_json);
+
+  ESP_LOGI(TAG, "Saved %d routes, polling interval: %d seconds",
+           static_cast<int>(routes_.size()), static_cast<int>(polling_interval_sec_));
+}
+
+void SettingHandler::add_route(const RoutePair& route) {
+  if (routes_.size() >= MAX_ROUTES) {
+    ESP_LOGW(TAG, "Maximum number of routes reached (%d)", static_cast<int>(MAX_ROUTES));
+    return;
+  }
+
+  // Check for duplicates
+  for (const auto& existing : routes_) {
+    if (existing == route) {
+      ESP_LOGW(TAG, "Route already exists");
+      return;
+    }
+  }
+
+  routes_.push_back(route);
+  ESP_LOGI(TAG, "Added route: %s -> %s", route.station_name.c_str(), route.direction_name.c_str());
+}
+
+void SettingHandler::remove_route(size_t index) {
+  if (index < routes_.size()) {
+    ESP_LOGI(TAG, "Removing route at index %d", static_cast<int>(index));
+    routes_.erase(routes_.begin() + index);
+  }
+}
+
+void SettingHandler::clear_routes() {
+  routes_.clear();
+  ESP_LOGI(TAG, "Cleared all routes");
+}
+
+void SettingHandler::set_polling_interval(uint32_t seconds) {
+  if (seconds < MIN_POLLING_INTERVAL) {
+    seconds = MIN_POLLING_INTERVAL;
+  } else if (seconds > MAX_POLLING_INTERVAL) {
+    seconds = MAX_POLLING_INTERVAL;
+  }
+  polling_interval_sec_ = seconds;
+  ESP_LOGI(TAG, "Set polling interval to %d seconds", static_cast<int>(seconds));
+}
+
+std::string SettingHandler::routes_to_json() const {
+  cJSON* root = cJSON_CreateArray();
+
+  for (const auto& route : routes_) {
+    cJSON* route_obj = cJSON_CreateObject();
+    cJSON_AddStringToObject(route_obj, "line_code", route.line_code.c_str());
+    cJSON_AddStringToObject(route_obj, "line_name", route.line_name.c_str());
+    cJSON_AddStringToObject(route_obj, "line_color", route.line_color.c_str());
+    cJSON_AddStringToObject(route_obj, "station_code", route.station_code.c_str());
+    cJSON_AddStringToObject(route_obj, "station_name", route.station_name.c_str());
+    cJSON_AddStringToObject(route_obj, "direction", route.direction.c_str());
+    cJSON_AddStringToObject(route_obj, "direction_name", route.direction_name.c_str());
+    cJSON_AddItemToArray(root, route_obj);
+  }
+
+  char* json_str = cJSON_PrintUnformatted(root);
+  std::string result(json_str ? json_str : "[]");
+  if (json_str) {
+    free(json_str);
+  }
+  cJSON_Delete(root);
+
+  return result;
+}
+
+void SettingHandler::routes_from_json(const std::string& json) {
+  routes_.clear();
+
+  cJSON* root = cJSON_Parse(json.c_str());
+  if (!root || !cJSON_IsArray(root)) {
+    ESP_LOGE(TAG, "Failed to parse routes JSON");
+    if (root) {
+      cJSON_Delete(root);
+    }
+    return;
+  }
+
+  int array_size = cJSON_GetArraySize(root);
+  for (int i = 0; i < array_size && i < static_cast<int>(MAX_ROUTES); i++) {
+    cJSON* route_obj = cJSON_GetArrayItem(root, i);
+    if (!route_obj || !cJSON_IsObject(route_obj)) {
+      continue;
+    }
+
+    RoutePair route;
+    cJSON* item;
+
+    item = cJSON_GetObjectItem(route_obj, "line_code");
+    if (item && cJSON_IsString(item)) route.line_code = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "line_name");
+    if (item && cJSON_IsString(item)) route.line_name = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "line_color");
+    if (item && cJSON_IsString(item)) route.line_color = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "station_code");
+    if (item && cJSON_IsString(item)) route.station_code = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "station_name");
+    if (item && cJSON_IsString(item)) route.station_name = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "direction");
+    if (item && cJSON_IsString(item)) route.direction = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "direction_name");
+    if (item && cJSON_IsString(item)) route.direction_name = item->valuestring;
+
+    if (!route.line_code.empty() && !route.station_code.empty() && !route.direction.empty()) {
+      routes_.push_back(route);
+    }
+  }
+
+  cJSON_Delete(root);
+  ESP_LOGI(TAG, "Loaded %d routes from JSON", static_cast<int>(routes_.size()));
+}
+
+} // namespace travel

main/ui/apps/travel/settings/settings_handler.h

@@ -0,0 +1,58 @@
+#pragma once
+
+#include "freertos/FreeRTOS.h"
+#include <string>
+#include <vector>
+#include <memory>
+#include "io/nvs_handler.h"
+#include "ui/apps/travel/types.h"
+
+namespace travel {
+
+/**
+ * @brief Settings handler for Travel app
+ *
+ * Manages NVS persistence of route pairs and polling interval.
+ */
+class SettingHandler {
+public:
+  explicit SettingHandler(std::unique_ptr<NVSStorageHandler> storage);
+  ~SettingHandler() = default;
+
+  esp_err_t init(const EventGroupHandle_t& system_event_group);
+
+  void load_settings();
+  void save_settings();
+
+  bool is_configured() const { return !routes_.empty(); }
+
+  // Route management
+  void add_route(const RoutePair& route);
+  void remove_route(size_t index);
+  void clear_routes();
+  const std::vector<RoutePair>& get_routes() const { return routes_; }
+  size_t get_route_count() const { return routes_.size(); }
+
+  // Polling interval (seconds)
+  uint32_t get_polling_interval() const { return polling_interval_sec_; }
+  void set_polling_interval(uint32_t seconds);
+
+  static constexpr size_t MAX_ROUTES = 5;
+  static constexpr uint32_t DEFAULT_POLLING_INTERVAL = 30;
+  static constexpr uint32_t MIN_POLLING_INTERVAL = 10;
+  static constexpr uint32_t MAX_POLLING_INTERVAL = 120;
+
+private:
+  static constexpr const char* NVS_KEY_ROUTES = "routes";
+  static constexpr const char* NVS_KEY_POLLING = "poll_interval";
+
+  std::vector<RoutePair> routes_;
+  uint32_t polling_interval_sec_ = DEFAULT_POLLING_INTERVAL;
+  std::unique_ptr<NVSStorageHandler> storage_;
+
+  // JSON serialization helpers
+  std::string routes_to_json() const;
+  void routes_from_json(const std::string& json);
+};
+
+} // namespace travel

main/ui/apps/travel/types.h

@@ -0,0 +1,47 @@
+#pragma once
+
+#include <string>
+#include <vector>
+
+namespace travel {
+
+/**
+ * @brief Structure representing a monitored route (station -> direction pair)
+ */
+struct RoutePair {
+  std::string line_code;      // Line code (e.g., "ISL", "TWL")
+  std::string line_name;      // Line name in Traditional Chinese (e.g., "港島綫")
+  std::string line_color;     // Hex color code (e.g., "#007DC5")
+  std::string station_code;   // Station code (e.g., "CEN")
+  std::string station_name;   // Station name in TC (e.g., "中環")
+  std::string direction;      // Direction terminal code (e.g., "CHW" for "柴灣方向")
+  std::string direction_name; // Direction name in TC (e.g., "柴灣方向")
+
+  bool operator==(const RoutePair& other) const {
+    return line_code == other.line_code &&
+           station_code == other.station_code &&
+           direction == other.direction;
+  }
+};
+
+/**
+ * @brief Structure representing a single arrival display entry
+ */
+struct ArrivalDisplay {
+  std::string arrival_time;       // Formatted arrival time (e.g., "2分鐘")
+  std::string arrival_time_full;  // Full time (e.g., "14:32") if available
+  std::string direction;          // Direction terminal name (e.g., "柴灣方向")
+  std::string platform;           // Platform number if available
+};
+
+/**
+ * @brief Structure representing all arrival data for a route
+ */
+struct RouteArrivalData {
+  RoutePair route;
+  std::vector<ArrivalDisplay> arrivals;  // List of upcoming trains in direction
+  bool is_valid = false;
+  std::string error_message;
+};
+
+} // namespace travel

main/ui/apps/travel/ui/main.cpp

@@ -0,0 +1,321 @@
+#include "ui/apps/travel/ui/main.h"
+#include "display/lvgl_handler.h"
+#include "font/noto_sans_tc_14.c"
+#include "esp_log.h"
+
+static const char* TAG = "TravelMainUI";
+#define LVGL_PORT_LOCK_TIMEOUT_MS 6000
+
+namespace travel {
+
+  MainUI::MainUI() = default;
+
+  MainUI::~MainUI() {
+    deinit();
+  }
+
+  esp_err_t MainUI::init(lv_obj_t* parent) {
+    if (!parent) {
+      ESP_LOGE(TAG, "Parent is null");
+      return ESP_ERR_INVALID_ARG;
+    }
+
+    parent_ = parent;
+
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return ESP_ERR_TIMEOUT;
+    }
+
+    // Create main container
+    container_ = lv_obj_create(parent_);
+    lv_obj_set_size(container_, LV_PCT(100), LV_PCT(100));
+    lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
+    lv_obj_set_style_pad_all(container_, 5, 0);
+    lv_obj_set_style_bg_opa(container_, LV_OPA_TRANSP, 0);
+    lv_obj_set_style_border_width(container_, 0, 0);
+    // Disable animations and scrolling for e-ink
+    lv_obj_set_style_anim_time(container_, 0, 0);
+    lv_obj_clear_flag(container_, LV_OBJ_FLAG_SCROLLABLE);
+
+    create_header_();
+    create_route_displays_();
+
+    // Message label for errors/empty state
+    msg_label_ = lv_label_create(container_);
+    lv_obj_set_width(msg_label_, LV_PCT(100));
+    lv_label_set_text(msg_label_, "");
+    lv_obj_set_style_text_font(msg_label_, &noto_sans_tc_14, 0);
+    lv_obj_add_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+
+    // Refresh time label at bottom
+    refresh_time_label_ = lv_label_create(container_);
+    lv_obj_set_width(refresh_time_label_, LV_PCT(100));
+    lv_label_set_text(refresh_time_label_, "");
+    lv_obj_set_style_text_font(refresh_time_label_, &noto_sans_tc_14, 0);
+    lv_obj_set_style_text_color(refresh_time_label_, lv_color_black(), 0);
+
+    lvgl_port_unlock();
+
+    return ESP_OK;
+  }
+
+  esp_err_t MainUI::deinit() {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return ESP_ERR_TIMEOUT;
+    }
+
+    if (container_) {
+      lv_obj_del(container_);
+      container_ = nullptr;
+    }
+
+    // Reset all pointers
+    header_label_ = nullptr;
+    settings_btn_ = nullptr;
+    refresh_time_label_ = nullptr;
+    msg_label_ = nullptr;
+    for (auto& display : route_displays_) {
+      display.container = nullptr;
+      display.header = nullptr;
+      for (int i = 0; i < MAX_ARRIVALS_PER_ROUTE; i++) {
+        display.arrival_labels[i] = nullptr;
+      }
+    }
+
+    lvgl_port_unlock();
+    parent_ = nullptr;
+
+    return ESP_OK;
+  }
+
+  void MainUI::create_header_() {
+    // Header container
+    lv_obj_t* header = lv_obj_create(container_);
+    lv_obj_set_size(header, LV_PCT(100), 35);
+    lv_obj_set_flex_flow(header, LV_FLEX_FLOW_ROW);
+    lv_obj_set_flex_align(header, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+    lv_obj_set_style_pad_hor(header, 5, 0);
+    lv_obj_set_style_bg_opa(header, LV_OPA_TRANSP, 0);
+    lv_obj_set_style_border_width(header, 0, 0);
+    lv_obj_set_style_border_width(header, 1, 0);
+    lv_obj_set_style_border_side(header, LV_BORDER_SIDE_BOTTOM, 0);
+    lv_obj_set_style_border_color(header, lv_color_black(), 0);
+    lv_obj_set_style_anim_time(header, 0, 0);
+    lv_obj_clear_flag(header, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Title label
+    header_label_ = lv_label_create(header);
+    lv_label_set_text(header_label_, "MTR到站時間");
+    lv_obj_set_style_text_font(header_label_, &noto_sans_tc_14, 0);
+
+    // Settings button
+    settings_btn_ = lv_btn_create(header);
+    lv_obj_set_size(settings_btn_, 30, 30);
+    lv_obj_t* btn_label = lv_label_create(settings_btn_);
+    lv_label_set_text(btn_label, LV_SYMBOL_SETTINGS);
+    lv_obj_center(btn_label);
+    lv_obj_set_style_anim_time(settings_btn_, 0, 0);
+  }
+
+  void MainUI::create_route_displays_() {
+    for (int i = 0; i < MAX_DISPLAY_ROUTES; i++) {
+      RouteDisplay& display = route_displays_[i];
+
+      // Container for each route
+      display.container = lv_obj_create(container_);
+      lv_obj_set_size(display.container, LV_PCT(100), LV_SIZE_CONTENT);
+      lv_obj_set_flex_flow(display.container, LV_FLEX_FLOW_COLUMN);
+      lv_obj_set_style_pad_all(display.container, 3, 0);
+      lv_obj_set_style_bg_opa(display.container, LV_OPA_TRANSP, 0);
+      lv_obj_set_style_border_width(display.container, 0, 0);
+      lv_obj_set_style_border_width(display.container, 1, 0);
+      lv_obj_set_style_border_side(display.container, LV_BORDER_SIDE_BOTTOM, 0);
+      lv_obj_set_style_border_color(display.container, lv_color_black(), 0);
+      lv_obj_set_style_anim_time(display.container, 0, 0);
+      lv_obj_clear_flag(display.container, LV_OBJ_FLAG_SCROLLABLE);
+      lv_obj_add_flag(display.container, LV_OBJ_FLAG_HIDDEN);  // Hidden by default
+
+      // Route header (station -> destination with line color)
+      display.header = lv_label_create(display.container);
+      lv_obj_set_width(display.header, LV_PCT(100));
+      lv_label_set_text(display.header, "");
+      lv_obj_set_style_text_font(display.header, &noto_sans_tc_14, 0);
+
+      // Arrival labels (up to 3 per route)
+      for (int j = 0; j < MAX_ARRIVALS_PER_ROUTE; j++) {
+        display.arrival_labels[j] = lv_label_create(display.container);
+        lv_obj_set_width(display.arrival_labels[j], LV_PCT(100));
+        lv_label_set_text(display.arrival_labels[j], "");
+        lv_obj_set_style_text_font(display.arrival_labels[j], &noto_sans_tc_14, 0);
+        lv_obj_set_style_pad_left(display.arrival_labels[j], 10, 0);
+      }
+    }
+  }
+
+  void MainUI::update_arrivals(const std::vector<RouteArrivalData>& arrival_data) {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    // Hide message label only if it's currently visible
+    if (!lv_obj_has_flag(msg_label_, LV_OBJ_FLAG_HIDDEN)) {
+      lv_obj_add_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    // Update each route display
+    for (int i = 0; i < MAX_DISPLAY_ROUTES; i++) {
+      if (i < static_cast<int>(arrival_data.size())) {
+        update_route_display_(route_displays_[i], arrival_data[i]);
+      } else {
+        // Hide unused route displays if currently visible
+        if (route_displays_[i].cached_visible) {
+          lv_obj_add_flag(route_displays_[i].container, LV_OBJ_FLAG_HIDDEN);
+          route_displays_[i].cached_visible = false;
+        }
+      }
+    }
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::update_route_display_(RouteDisplay& display, const RouteArrivalData& data) {
+    // Show container if hidden
+    if (!display.cached_visible) {
+      lv_obj_clear_flag(display.container, LV_OBJ_FLAG_HIDDEN);
+      display.cached_visible = true;
+    }
+
+    // Update header text (station -> direction)
+    std::string header_text = data.route.station_name + " -> " + data.route.direction_name;
+    if (header_text != display.cached_header_text) {
+      lv_label_set_text(display.header, header_text.c_str());
+      display.cached_header_text = header_text;
+    }
+
+    // Update line color only if changed
+    if (data.route.line_color != display.cached_line_color) {
+      if (!data.route.line_color.empty()) {
+        lv_color_t line_color = hex_to_lv_color_(data.route.line_color);
+        lv_obj_set_style_text_color(display.header, line_color, 0);
+      }
+      display.cached_line_color = data.route.line_color;
+    }
+
+    // Update arrival labels - only if text changed
+    for (int i = 0; i < MAX_ARRIVALS_PER_ROUTE; i++) {
+      std::string arrival_text = "";
+      bool should_show = (i < static_cast<int>(data.arrivals.size()));
+
+      if (should_show) {
+        const auto& arrival = data.arrivals[i];
+        arrival_text = "  " + arrival.arrival_time;
+        if (!arrival.arrival_time_full.empty()) {
+          arrival_text += " (" + arrival.arrival_time_full + ")";
+        }
+        arrival_text += " " + arrival.direction;
+      }
+
+      if (arrival_text != display.cached_arrival_texts[i]) {
+        lv_label_set_text(display.arrival_labels[i], arrival_text.c_str());
+        display.cached_arrival_texts[i] = arrival_text;
+      }
+
+      // Handle visibility only if changed
+      if (should_show != display.cached_arrival_visible[i]) {
+        if (should_show) {
+          lv_obj_clear_flag(display.arrival_labels[i], LV_OBJ_FLAG_HIDDEN);
+        } else {
+          lv_obj_add_flag(display.arrival_labels[i], LV_OBJ_FLAG_HIDDEN);
+        }
+        display.cached_arrival_visible[i] = should_show;
+      }
+    }
+
+    // Show error if any
+    if (!data.is_valid && !data.error_message.empty()) {
+      std::string error_text = "  錯誤: " + data.error_message;
+      if (error_text != display.cached_arrival_texts[0]) {
+        lv_label_set_text(display.arrival_labels[0], error_text.c_str());
+        display.cached_arrival_texts[0] = error_text;
+      }
+      if (!display.cached_arrival_visible[0]) {
+        lv_obj_clear_flag(display.arrival_labels[0], LV_OBJ_FLAG_HIDDEN);
+        display.cached_arrival_visible[0] = true;
+      }
+    }
+  }
+
+  void MainUI::update_last_refresh_time(const std::string& time_str) {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    std::string full_text = "更新: " + time_str;
+    if (full_text != cached_refresh_time_text) {
+      lv_label_set_text(refresh_time_label_, full_text.c_str());
+      cached_refresh_time_text = full_text;
+    }
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::show_no_routes_message() {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    // Hide all route displays
+    for (auto& display : route_displays_) {
+      lv_obj_add_flag(display.container, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    // Show message
+    lv_label_set_text(msg_label_, "請按右上角設定按鈕添加路線");
+    lv_obj_clear_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::show_error_message(const std::string& message) {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    // Hide all route displays
+    for (auto& display : route_displays_) {
+      lv_obj_add_flag(display.container, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    // Show error message
+    lv_label_set_text(msg_label_, ("錯誤: " + message).c_str());
+    lv_obj_clear_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::register_settings_button_callback(lv_event_cb_t cb, void* user_data) {
+    if (settings_btn_) {
+      lv_obj_add_event_cb(settings_btn_, cb, LV_EVENT_CLICKED, user_data);
+    }
+  }
+
+  lv_color_t MainUI::hex_to_lv_color_(const std::string& hex_color) {
+    if (hex_color.length() < 7 || hex_color[0] != '#') {
+      return lv_color_black();
+    }
+
+    unsigned int r = std::stoi(hex_color.substr(1, 2), nullptr, 16);
+    unsigned int g = std::stoi(hex_color.substr(3, 2), nullptr, 16);
+    unsigned int b = std::stoi(hex_color.substr(5, 2), nullptr, 16);
+
+    return lv_color_make(r, g, b);
+  }
+
+} // namespace travel

main/ui/apps/travel/ui/main.h

@@ -0,0 +1,67 @@
+#pragma once
+
+#include "lvgl.h"
+#include "esp_err.h"
+#include "ui/apps/travel/types.h"
+#include <vector>
+#include <memory>
+
+namespace travel {
+
+/**
+ * @brief Main UI for Travel app - displays train arrivals
+ *
+ * E-ink optimized: no animations, static layout, no scrolling
+ */
+class MainUI {
+public:
+  MainUI();
+  ~MainUI();
+
+  esp_err_t init(lv_obj_t* parent);
+  esp_err_t deinit();
+
+  // Update display with arrival data
+  void update_arrivals(const std::vector<RouteArrivalData>& arrival_data);
+  void update_last_refresh_time(const std::string& time_str);
+  void show_no_routes_message();
+  void show_error_message(const std::string& message);
+
+  // Register settings button callback
+  void register_settings_button_callback(lv_event_cb_t cb, void* user_data);
+
+private:
+  lv_obj_t* parent_ = nullptr;
+  lv_obj_t* container_ = nullptr;
+  lv_obj_t* header_label_ = nullptr;
+  lv_obj_t* settings_btn_ = nullptr;
+  lv_obj_t* refresh_time_label_ = nullptr;
+  lv_obj_t* msg_label_ = nullptr;
+  std::string cached_refresh_time_text;
+
+  // Route display containers (up to MAX_ROUTES)
+  struct RouteDisplay {
+    lv_obj_t* container = nullptr;
+    lv_obj_t* header = nullptr;
+    lv_obj_t* arrival_labels[3] = {nullptr, nullptr, nullptr};  // Show up to 3 arrivals per route
+
+    // Cached values for change detection
+    std::string cached_header_text;
+    std::string cached_line_color;
+    std::string cached_arrival_texts[3];
+    bool cached_arrival_visible[3] = {false, false, false};
+    bool cached_visible = false;
+  };
+  RouteDisplay route_displays_[5];
+
+  static constexpr int MAX_DISPLAY_ROUTES = 5;
+  static constexpr int MAX_ARRIVALS_PER_ROUTE = 3;
+
+  void create_header_();
+  void create_route_displays_();
+  void clear_route_display_(RouteDisplay& display);
+  void update_route_display_(RouteDisplay& display, const RouteArrivalData& data);
+  lv_color_t hex_to_lv_color_(const std::string& hex_color);
+};
+
+} // namespace travel

main/ui/apps/travel/ui/main_handler.cpp

@@ -0,0 +1,479 @@
+#include "ui/apps/travel/ui/main_handler.h"
+#include "display/lvgl_handler.h"
+#include "external/mtr/line_info.h"
+#include "esp_log.h"
+#include <ctime>
+#include <iomanip>
+#include <sstream>
+#include <algorithm>
+#include <cctype>
+
+static const char* TAG = "TravelMainHandler";
+
+namespace travel {
+
+  // Helper functions shared by formatting routines
+  namespace {
+    // Parse an ISO 8601-like timestamp into epoch seconds (UTC).
+    // Supports formats like: 2024-01-15T14:30:00+08:00, 2026-02-03 23:08:22, or ...Z
+    bool parse_iso_to_epoch(const std::string& s, time_t& out_epoch) {
+      auto trim_copy = [](const std::string& in) {
+        size_t a = 0;
+        size_t b = in.size();
+        while (a < b && std::isspace((unsigned char)in[a])) ++a;
+        while (b > a && std::isspace((unsigned char)in[b - 1])) --b;
+        return in.substr(a, b - a);
+        };
+
+      std::string s_trim = trim_copy(s);
+      // Accept either 'T' or space (also lowercase 't') as date/time separator
+      size_t t_pos = s_trim.find_first_of("Tt ");
+      if (t_pos == std::string::npos) return false;
+
+      std::string date = trim_copy(s_trim.substr(0, t_pos));
+      std::string tzpart;
+      std::string timepart = trim_copy(s_trim.substr(t_pos + 1));
+
+      // Extract timezone (Z or +HH:MM or +HHMM or +HH)
+      size_t zpos = timepart.find_first_of("Zz");
+      if (zpos != std::string::npos) {
+        tzpart = "Z";
+        timepart = trim_copy(timepart.substr(0, zpos));
+      } else {
+        // Find first '+' or '-' AFTER the numeric time portion
+        size_t plus = std::string::npos;
+        for (size_t i = 0; i < timepart.size(); ++i) {
+          if (timepart[i] == '+' || timepart[i] == '-') { plus = i; break; }
+        }
+        if (plus != std::string::npos) {
+          tzpart = trim_copy(timepart.substr(plus));
+          timepart = trim_copy(timepart.substr(0, plus));
+        }
+      }
+
+      int year = 0, month = 0, day = 0;
+      if (sscanf(date.c_str(), "%d-%d-%d", &year, &month, &day) != 3) {
+        // Try alternative separators like '/'
+        if (sscanf(date.c_str(), "%d/%d/%d", &year, &month, &day) != 3) return false;
+      }
+
+      int hour = 0, min = 0, sec = 0;
+      // Remove fractional seconds if present (e.g., 10:34:52.123)
+      size_t dot = timepart.find('.');
+      if (dot != std::string::npos) timepart = timepart.substr(0, dot);
+
+      int time_parsed = sscanf(timepart.c_str(), "%d:%d:%d", &hour, &min, &sec);
+      if (time_parsed < 2) {
+        // Try hour only or hour:minute
+        if (sscanf(timepart.c_str(), "%d:%d", &hour, &min) == 2) {
+          sec = 0;
+        } else {
+          return false;
+        }
+      }
+
+      int parsed_offset_seconds = 0; // seconds east of UTC
+      bool has_tz = false;
+      if (!tzpart.empty()) {
+        has_tz = true;
+        if (tzpart == "Z" || tzpart == "z") {
+          parsed_offset_seconds = 0;
+        } else {
+          char sign = tzpart[0];
+          int oh = 0, om = 0;
+          std::string tznum = tzpart.substr(1);
+          // Accept +HH:MM, +HHMM, or +HH
+          if (sscanf(tznum.c_str(), "%d:%d", &oh, &om) == 2) {
+            parsed_offset_seconds = oh * 3600 + om * 60;
+          } else if (sscanf(tznum.c_str(), "%d", &oh) == 1) {
+            // If tz like 0800, interpret as HHMM when length>=3
+            if (tznum.size() >= 3 && tznum.find(':') == std::string::npos && tznum.size() <= 4) {
+              if (tznum.size() == 4) {
+                int hh = 0, mm = 0;
+                if (sscanf(tznum.c_str(), "%2d%2d", &hh, &mm) == 2) {
+                  oh = hh; om = mm;
+                }
+              }
+              parsed_offset_seconds = oh * 3600 + om * 60;
+            } else {
+              parsed_offset_seconds = oh * 3600;
+            }
+          }
+          if (sign == '-') parsed_offset_seconds = -parsed_offset_seconds;
+        }
+      }
+
+      std::tm tm = {};
+      tm.tm_year = year - 1900;
+      tm.tm_mon = month - 1;
+      tm.tm_mday = day;
+      tm.tm_hour = hour;
+      tm.tm_min = min;
+      tm.tm_sec = sec;
+      tm.tm_isdst = -1;
+
+      time_t now = time(nullptr);
+      std::tm local_tm = *std::localtime(&now);
+      std::tm gm_tm = *std::gmtime(&now);
+      time_t local_epoch = mktime(&local_tm);
+      time_t gm_epoch = mktime(&gm_tm);
+      int local_offset = static_cast<int>(difftime(local_epoch, gm_epoch));
+
+      time_t epoch_assuming_local = mktime(&tm);
+      if (epoch_assuming_local == (time_t)-1) return false;
+
+      if (!has_tz) {
+        // No timezone provided: assume local time
+        out_epoch = epoch_assuming_local;
+      } else {
+        // Adjust when parsed time had a specific timezone
+        out_epoch = epoch_assuming_local + (local_offset - parsed_offset_seconds);
+      }
+      return true;
+    }
+
+    std::string format_epoch_HHMM(time_t epoch) {
+      std::tm at = *std::localtime(&epoch);
+      char buf[6];
+      strftime(buf, sizeof(buf), "%H:%M", &at);
+      return std::string(buf);
+    }
+  }
+
+  MainUIHandler::MainUIHandler()
+    : main_ui_(std::make_unique<MainUI>())
+    , mtr_handler_(std::make_unique<MTRNextTrainHandler>()) {
+    refresh_mutex_ = xSemaphoreCreateMutex();
+  }
+
+  MainUIHandler::~MainUIHandler() {
+    deinit();
+    if (refresh_mutex_) {
+      vSemaphoreDelete(refresh_mutex_);
+    }
+  }
+
+  esp_err_t MainUIHandler::init(
+    lv_obj_t* parent,
+    InteractionHandler* interaction_handler,
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  ) {
+    ESP_LOGI(TAG, "Initializing main UI handler");
+
+    setting_handler_ = setting_handler;
+    network_handler_ = network_handler;
+
+    // Initialize UI
+    esp_err_t err = main_ui_->init(parent);
+    if (err != ESP_OK) {
+      ESP_LOGE(TAG, "Failed to init main UI");
+      return err;
+    }
+
+    // Register settings button callback
+    main_ui_->register_settings_button_callback(on_settings_button_clicked_static_, this);
+
+    // Check if configured
+    if (!setting_handler_->is_configured()) {
+      main_ui_->show_no_routes_message();
+      return ESP_OK;
+    }
+
+    // Start polling task
+    polling_running_ = true;
+    BaseType_t task_created = xTaskCreate(
+      polling_task_,
+      "travel_poll",
+      8192,
+      this,
+      5,
+      &polling_task_handle_
+    );
+
+    if (task_created != pdPASS) {
+      ESP_LOGE(TAG, "Failed to create polling task");
+      polling_running_ = false;
+      return ESP_ERR_NO_MEM;
+    }
+
+    // Do initial refresh
+    fetch_and_update_arrivals_();
+
+    return ESP_OK;
+  }
+
+  esp_err_t MainUIHandler::deinit() {
+    ESP_LOGI(TAG, "Deinitializing main UI handler");
+
+    // Stop polling task
+    if (polling_task_handle_) {
+      polling_running_ = false;
+      // Wait for task to finish
+      vTaskDelay(pdMS_TO_TICKS(100));
+      polling_task_handle_ = nullptr;
+    }
+
+    // Deinit UI
+    if (main_ui_) {
+      main_ui_->deinit();
+    }
+
+    return ESP_OK;
+  }
+
+  void MainUIHandler::register_on_settings_button_clicked(SettingsButtonCallback cb, void* user_data) {
+    on_settings_callback_ = cb;
+    settings_callback_user_data_ = user_data;
+  }
+
+  void MainUIHandler::force_refresh() {
+    if (xSemaphoreTake(refresh_mutex_, pdMS_TO_TICKS(1000)) == pdTRUE) {
+      fetch_and_update_arrivals_();
+      xSemaphoreGive(refresh_mutex_);
+    }
+  }
+
+  void MainUIHandler::polling_task_(void* param) {
+    MainUIHandler* handler = static_cast<MainUIHandler*>(param);
+
+    while (handler->polling_running_) {
+      uint32_t interval_ms = handler->setting_handler_->get_polling_interval() * 1000;
+
+      if (xSemaphoreTake(handler->refresh_mutex_, pdMS_TO_TICKS(1000)) == pdTRUE) {
+        handler->fetch_and_update_arrivals_();
+        xSemaphoreGive(handler->refresh_mutex_);
+      }
+
+      // Delay until next poll
+      vTaskDelay(pdMS_TO_TICKS(interval_ms));
+    }
+
+    vTaskDelete(nullptr);
+  }
+
+  void MainUIHandler::fetch_and_update_arrivals_() {
+    if (!network_handler_ || !setting_handler_) {
+      return;
+    }
+
+    const auto& routes = setting_handler_->get_routes();
+    if (routes.empty()) {
+      main_ui_->show_no_routes_message();
+      return;
+    }
+
+    std::vector<RouteArrivalData> arrival_data;
+
+    for (const auto& route : routes) {
+      RouteArrivalData data;
+      data.route = route;
+
+      // Fetch arrival info from MTR API
+      std::string line_code = route.line_code;
+      std::string station_code = route.station_code;
+      StationArrivalInfo* arrival_info = nullptr;
+
+      MtrArrivalErrorCode error = mtr_handler_->get_next_arrival_info(
+        network_handler_,
+        line_code,
+        station_code,
+        arrival_info,
+        Language::TC  // Traditional Chinese
+      );
+
+      if (error == MtrArrivalErrorCode::NONE && arrival_info) {
+        // Determine which direction (UP or DOWN) to filter based on terminal station
+        const auto* up_arrivals = arrival_info->up_arrivals();
+        const auto* down_arrivals = arrival_info->down_arrivals();
+
+        // Get all lines to find station positions
+        std::vector<LineInfo> lines = mtr_handler_->get_lines();
+
+        // Find current line and determine direction
+        bool filter_up = false;
+        bool filter_down = false;
+
+        for (const auto& line : lines) {
+          if (std::string(line.code()) == line_code) {
+            const auto* stations = line.stations();
+            if (stations) {
+              // Find index of current station and terminal station
+              size_t current_idx = SIZE_MAX;
+              size_t terminal_idx = SIZE_MAX;
+
+              for (size_t i = 0; i < stations->size(); i++) {
+                if (std::string(stations->at(i).code()) == station_code) {
+                  current_idx = i;
+                }
+                if (std::string(stations->at(i).code()) == route.direction) {
+                  terminal_idx = i;
+                }
+              }
+
+              // Determine direction: if terminal is at higher index, it's DOWN
+              if (current_idx != SIZE_MAX && terminal_idx != SIZE_MAX) {
+                if (terminal_idx > current_idx) {
+                  filter_down = true;
+                } else {
+                  filter_up = true;
+                }
+              }
+            }
+            break;
+          }
+        }
+
+        // Filter arrivals based on direction
+        auto process_arrivals = [&](const std::vector<ArrivalInfo>* arrivals) {
+          if (!arrivals) return;
+          for (const auto& arrival : *arrivals) {
+            ArrivalDisplay display;
+            display.arrival_time = format_arrival_time_(arrival.arrival_time());
+            display.arrival_time_full = format_arrival_time_full_(arrival.arrival_time());
+            display.direction = route.direction_name;
+            data.arrivals.push_back(display);
+          }
+          };
+
+        if (filter_up) {
+          process_arrivals(up_arrivals);
+        }
+        if (filter_down) {
+          process_arrivals(down_arrivals);
+        }
+
+        data.is_valid = true;
+
+        // Clean up
+        delete arrival_info;
+      } else {
+        data.is_valid = false;
+        switch (error) {
+          case MtrArrivalErrorCode::LINE_NOT_FOUND:
+            data.error_message = "路線不存在";
+            break;
+          case MtrArrivalErrorCode::STATION_NOT_FOUND:
+            data.error_message = "車站不存在";
+            break;
+          case MtrArrivalErrorCode::NO_ARRIVAL_INFO:
+            data.error_message = "無到站資料";
+            break;
+          default:
+            data.error_message = "無法連接";
+            break;
+        }
+      }
+
+      arrival_data.push_back(data);
+    }
+
+    // Update UI only if data changed
+    if (has_arrival_data_changed_(arrival_data)) {
+      main_ui_->update_arrivals(arrival_data);
+      cached_arrival_data_ = arrival_data;
+    }
+    main_ui_->update_last_refresh_time(get_current_time_string_());
+  }
+
+  std::string MainUIHandler::format_arrival_time_(const std::string& api_time) {
+    // Keep fallback for numeric minute strings (e.g., "0", "6", "15")
+    if (!api_time.empty() && std::all_of(api_time.begin(), api_time.end(), [](char c) { return std::isdigit((unsigned char)c); })) {
+      return api_time + "分鐘";
+    }
+
+    time_t arrival_epoch = 0;
+    if (parse_iso_to_epoch(api_time, arrival_epoch)) {
+      time_t now = time(nullptr);
+      double diff_seconds = difftime(arrival_epoch, now);
+      if (diff_seconds < 0) diff_seconds = 0; // already arrived -> show 0
+      int minutes = static_cast<int>((diff_seconds + 59) / 60); // round up
+
+      if (minutes < 60) {
+        return std::to_string(minutes) + "分鐘";
+      }
+    }
+
+    // Only relative minutes are returned from this function.
+    ESP_LOGW(TAG, "Unable to parse arrival time for relative format: %s", api_time.c_str());
+    return std::string();
+  }
+
+  std::string MainUIHandler::format_arrival_time_full_(const std::string& api_time) {
+    // Returns absolute time for display (e.g., "14:32")
+    // Returns empty string for relative times
+    if (api_time.length() <= 2) {
+      ESP_LOGW(TAG, "Arrival time appears to be relative, no full time available: %s", api_time.c_str());
+      return "";
+    }
+
+    time_t arrival_epoch = 0;
+    if (parse_iso_to_epoch(api_time, arrival_epoch)) {
+      return format_epoch_HHMM(arrival_epoch);
+    }
+
+    // fallback: extract HH:MM
+    size_t t_pos = api_time.find('T');
+    if (t_pos != std::string::npos && api_time.length() > t_pos + 5) {
+      return api_time.substr(t_pos + 1, 5);
+    }
+
+    ESP_LOGW(TAG, "Unable to parse arrival time for full format: %s", api_time.c_str());
+    return std::string();
+  }
+
+  std::string MainUIHandler::get_current_time_string_() {
+    time_t now = time(nullptr);
+    std::tm tm = *std::localtime(&now);
+
+    char buffer[32];
+    // Return absolute local date and time: YYYY-MM-DD HH:MM
+    strftime(buffer, sizeof(buffer), "%Y-%m-%d %H:%M", &tm);
+    return std::string(buffer);
+  }
+
+  bool MainUIHandler::has_arrival_data_changed_(const std::vector<RouteArrivalData>& new_data) {
+    if (new_data.size() != cached_arrival_data_.size()) {
+      return true;
+    }
+
+    for (size_t i = 0; i < new_data.size(); i++) {
+      const auto& new_route = new_data[i];
+      const auto& cached_route = cached_arrival_data_[i];
+
+      if (new_route.route.station_code != cached_route.route.station_code ||
+        new_route.route.direction != cached_route.route.direction ||
+        new_route.is_valid != cached_route.is_valid ||
+        new_route.error_message != cached_route.error_message) {
+        return true;
+      }
+
+      if (new_route.arrivals.size() != cached_route.arrivals.size()) {
+        return true;
+      }
+
+      for (size_t j = 0; j < new_route.arrivals.size(); j++) {
+        if (new_route.arrivals[j].arrival_time != cached_route.arrivals[j].arrival_time ||
+          new_route.arrivals[j].arrival_time_full != cached_route.arrivals[j].arrival_time_full) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  void MainUIHandler::on_settings_button_clicked_static_(lv_event_t* e) {
+    MainUIHandler* handler = static_cast<MainUIHandler*>(lv_event_get_user_data(e));
+    if (handler) {
+      handler->on_settings_button_clicked_();
+    }
+  }
+
+  void MainUIHandler::on_settings_button_clicked_() {
+    if (on_settings_callback_) {
+      on_settings_callback_(settings_callback_user_data_);
+    }
+  }
+
+} // namespace travel

main/ui/apps/travel/ui/main_handler.h

@@ -0,0 +1,74 @@
+#pragma once
+
+#include "ui/apps/travel/ui/main.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "ui/interaction_handler.h"
+#include "external/mtr/arrival.h"
+#include "external/mtr/mtr.h"
+#include "network/network.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "freertos/semphr.h"
+#include "esp_err.h"
+#include <memory>
+#include <vector>
+#include <atomic>
+
+namespace travel {
+
+/**
+ * @brief Main UI Handler for Travel app
+ *
+ * Manages the MainUI instance, polling task, and MTR API interactions.
+ * Runs a background task to periodically fetch arrival data.
+ */
+class MainUIHandler {
+public:
+  // Callback type for settings button
+  using SettingsButtonCallback = void (*)(void* user_data);
+
+  MainUIHandler();
+  ~MainUIHandler();
+
+  esp_err_t init(
+    lv_obj_t* parent,
+    InteractionHandler* interaction_handler,
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  );
+  esp_err_t deinit();
+
+  void register_on_settings_button_clicked(SettingsButtonCallback cb, void* user_data);
+  void force_refresh();
+
+private:
+  static void polling_task_(void* param);
+  static void on_settings_button_clicked_static_(lv_event_t* e);
+
+  void on_settings_button_clicked_();
+  void fetch_and_update_arrivals_();
+  bool has_arrival_data_changed_(const std::vector<RouteArrivalData>& new_data);
+  std::string format_arrival_time_(const std::string& api_time);
+  std::string format_arrival_time_full_(const std::string& api_time);
+  std::string get_current_time_string_();
+
+  std::unique_ptr<MainUI> main_ui_;
+  SettingHandler* setting_handler_ = nullptr;
+  NetworkHandler* network_handler_ = nullptr;
+  std::unique_ptr<MTRNextTrainHandler> mtr_handler_;
+
+  // Polling task
+  TaskHandle_t polling_task_handle_ = nullptr;
+  std::atomic<bool> polling_running_{false};
+  SemaphoreHandle_t refresh_mutex_ = nullptr;
+
+  // Callback for settings button
+  SettingsButtonCallback on_settings_callback_ = nullptr;
+  void* settings_callback_user_data_ = nullptr;
+
+  std::vector<RouteArrivalData> cached_arrival_data_;
+
+  static constexpr uint32_t LVGL_LOCK_TIMEOUT_MS = 4000;
+};
+
+} // namespace travel

main/ui/apps/travel/ui/settings.cpp

@@ -0,0 +1,151 @@
+#include "ui/apps/travel/ui/settings.h"
+#include "display/lvgl_handler.h"
+#include "font/noto_sans_tc_14.c"
+#include "esp_log.h"
+
+static const char* TAG = "TravelSettingsUI";
+
+namespace travel {
+
+SettingsUI::SettingsUI() = default;
+
+SettingsUI::~SettingsUI() {
+  deinit();
+}
+
+esp_err_t SettingsUI::init(lv_obj_t* parent) {
+  if (!parent) {
+    ESP_LOGE(TAG, "Parent is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  parent_ = parent;
+
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  // Create main container
+  container_ = lv_obj_create(parent_);
+  lv_obj_set_size(container_, LV_PCT(100), LV_PCT(100));
+  lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
+  lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+  lv_obj_set_style_pad_all(container_, 10, 0);
+  lv_obj_set_style_bg_opa(container_, LV_OPA_TRANSP, 0);
+  lv_obj_set_style_border_width(container_, 0, 0);
+  // Disable animations and scrolling for e-ink
+  lv_obj_set_style_anim_time(container_, 0, 0);
+  lv_obj_clear_flag(container_, LV_OBJ_FLAG_SCROLLABLE);
+
+  // Title
+  title_label_ = lv_label_create(container_);
+  lv_label_set_text(title_label_, "設定路線");
+  lv_obj_set_style_text_font(title_label_, &noto_sans_tc_14, 0);
+  lv_obj_set_style_pad_bottom(title_label_, 10, 0);
+
+  // QR Code container
+  lv_obj_t* qr_container = lv_obj_create(container_);
+  lv_obj_set_size(qr_container, QR_CODE_SIZE + 10, QR_CODE_SIZE + 10);
+  lv_obj_set_style_bg_color(qr_container, lv_color_white(), 0);
+  lv_obj_set_style_border_width(qr_container, 2, 0);
+  lv_obj_set_style_border_color(qr_container, lv_color_black(), 0);
+  lv_obj_set_style_anim_time(qr_container, 0, 0);
+  lv_obj_clear_flag(qr_container, LV_OBJ_FLAG_SCROLLABLE);
+
+  // QR Code
+  qr_code_ = lv_qrcode_create(qr_container);
+  lv_qrcode_set_size(qr_code_, QR_CODE_SIZE);
+  lv_qrcode_set_dark_color(qr_code_, lv_color_black());
+  lv_qrcode_set_light_color(qr_code_, lv_color_white());
+  lv_obj_center(qr_code_);
+
+  // URL label
+  url_label_ = lv_label_create(container_);
+  lv_obj_set_width(url_label_, LV_PCT(100));
+  lv_label_set_text(url_label_, "");
+  lv_obj_set_style_text_font(url_label_, &noto_sans_tc_14, 0);
+  lv_label_set_long_mode(url_label_, LV_LABEL_LONG_WRAP);
+  lv_obj_set_style_text_align(url_label_, LV_TEXT_ALIGN_CENTER, 0);
+  lv_obj_set_style_pad_top(url_label_, 10, 0);
+
+  // Status message
+  status_label_ = lv_label_create(container_);
+  lv_obj_set_width(status_label_, LV_PCT(100));
+  lv_label_set_text(status_label_, "正在啟動伺服器...");
+  lv_obj_set_style_text_font(status_label_, &noto_sans_tc_14, 0);
+  lv_label_set_long_mode(status_label_, LV_LABEL_LONG_WRAP);
+  lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
+  lv_obj_set_style_pad_top(status_label_, 15, 0);
+
+  // Instructions
+  instruction_label_ = lv_label_create(container_);
+  lv_obj_set_width(instruction_label_, LV_PCT(100));
+  lv_label_set_text(instruction_label_,
+    "請使用手機掃描QR碼或瀏覽器開啟網址\n"
+    "以設定MTR路線");
+  lv_obj_set_style_text_font(instruction_label_, &noto_sans_tc_14, 0);
+  lv_label_set_long_mode(instruction_label_, LV_LABEL_LONG_WRAP);
+  lv_obj_set_style_text_align(instruction_label_, LV_TEXT_ALIGN_CENTER, 0);
+  lv_obj_set_style_text_color(instruction_label_, lv_color_hex(0x606060), 0);
+  lv_obj_set_style_pad_top(instruction_label_, 15, 0);
+
+  lvgl_port_unlock();
+
+  return ESP_OK;
+}
+
+esp_err_t SettingsUI::deinit() {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  if (container_) {
+    lv_obj_del(container_);
+    container_ = nullptr;
+  }
+
+  title_label_ = nullptr;
+  qr_code_ = nullptr;
+  url_label_ = nullptr;
+  status_label_ = nullptr;
+  instruction_label_ = nullptr;
+
+  lvgl_port_unlock();
+  parent_ = nullptr;
+
+  return ESP_OK;
+}
+
+void SettingsUI::update_qr_code(const std::string& url) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return;
+  }
+
+  if (qr_code_) {
+    lv_qrcode_update(qr_code_, url.c_str(), url.length());
+  }
+
+  if (url_label_) {
+    lv_label_set_text(url_label_, url.c_str());
+  }
+
+  lvgl_port_unlock();
+}
+
+void SettingsUI::update_status_message(const std::string& message) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return;
+  }
+
+  if (status_label_) {
+    lv_label_set_text(status_label_, message.c_str());
+  }
+
+  lvgl_port_unlock();
+}
+
+} // namespace travel

main/ui/apps/travel/ui/settings.h

@@ -0,0 +1,38 @@
+#pragma once
+
+#include "lvgl.h"
+#include "esp_err.h"
+#include <string>
+
+namespace travel {
+
+/**
+ * @brief Settings UI for Travel app
+ *
+ * Displays QR code for web configuration.
+ * E-ink optimized: no animations, static layout.
+ */
+class SettingsUI {
+public:
+  SettingsUI();
+  ~SettingsUI();
+
+  esp_err_t init(lv_obj_t* parent);
+  esp_err_t deinit();
+
+  void update_qr_code(const std::string& url);
+  void update_status_message(const std::string& message);
+
+private:
+  lv_obj_t* parent_ = nullptr;
+  lv_obj_t* container_ = nullptr;
+  lv_obj_t* title_label_ = nullptr;
+  lv_obj_t* qr_code_ = nullptr;
+  lv_obj_t* url_label_ = nullptr;
+  lv_obj_t* status_label_ = nullptr;
+  lv_obj_t* instruction_label_ = nullptr;
+
+  static constexpr int QR_CODE_SIZE = 160;
+};
+
+} // namespace travel

main/ui/apps/travel/ui/settings_handler.cpp

@@ -0,0 +1,85 @@
+#include "ui/apps/travel/ui/settings_handler.h"
+#include "display/lvgl_handler.h"
+#include "esp_log.h"
+
+static const char* TAG = "TravelSettingsHandler";
+
+namespace travel {
+
+SettingsUIHandler::SettingsUIHandler()
+  : settings_ui_(std::make_unique<SettingsUI>())
+  , web_handler_(nullptr) {
+}
+
+SettingsUIHandler::~SettingsUIHandler() {
+  deinit();
+}
+
+esp_err_t SettingsUIHandler::init(
+  lv_obj_t* parent,
+  InteractionHandler* interaction_handler,
+  SettingHandler* setting_handler,
+  NetworkHandler* network_handler
+) {
+  ESP_LOGI(TAG, "Initializing settings UI handler");
+
+  setting_handler_ = setting_handler;
+  network_handler_ = network_handler;
+
+  // Initialize UI
+  esp_err_t err = settings_ui_->init(parent);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to init settings UI");
+    return err;
+  }
+
+  // Start web server
+  start_web_server_();
+
+  return ESP_OK;
+}
+
+esp_err_t SettingsUIHandler::deinit() {
+  ESP_LOGI(TAG, "Deinitializing settings UI handler");
+
+  // Stop web server
+  if (web_handler_) {
+    web_handler_->stop_web_server();
+    web_handler_.reset();
+  }
+
+  // Deinit UI
+  if (settings_ui_) {
+    settings_ui_->deinit();
+  }
+
+  return ESP_OK;
+}
+
+void SettingsUIHandler::start_web_server_() {
+  if (!setting_handler_ || !network_handler_) {
+    ESP_LOGE(TAG, "Cannot start web server - missing handlers");
+    settings_ui_->update_status_message("設定錯誤");
+    return;
+  }
+
+  // Create web handler
+  web_handler_ = std::make_unique<WebHandler>(setting_handler_, network_handler_);
+
+  // Start server
+  esp_err_t err = web_handler_->start_web_server();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to start web server: %s", esp_err_to_name(err));
+    settings_ui_->update_status_message("無法啟動伺服器");
+    return;
+  }
+
+  // Update QR code with URL
+  std::string url = web_handler_->get_url();
+  settings_ui_->update_qr_code(url);
+  settings_ui_->update_status_message("伺服器運行中");
+
+  ESP_LOGI(TAG, "Web server started at %s", url.c_str());
+}
+
+} // namespace travel

main/ui/apps/travel/ui/settings_handler.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#include "ui/apps/travel/ui/settings.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "ui/apps/travel/web/web_handlers.h"
+#include "ui/interaction_handler.h"
+#include "network/network.h"
+#include "esp_err.h"
+#include <memory>
+
+namespace travel {
+
+/**
+ * @brief Settings UI Handler for Travel app
+ *
+ * Manages the SettingsUI instance, web server, and settings persistence.
+ */
+class SettingsUIHandler {
+public:
+  SettingsUIHandler();
+  ~SettingsUIHandler();
+
+  esp_err_t init(
+    lv_obj_t* parent,
+    InteractionHandler* interaction_handler,
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  );
+  esp_err_t deinit();
+
+private:
+  void start_web_server_();
+
+  std::unique_ptr<SettingsUI> settings_ui_;
+  std::unique_ptr<WebHandler> web_handler_;
+  SettingHandler* setting_handler_ = nullptr;
+  NetworkHandler* network_handler_ = nullptr;
+};
+
+} // namespace travel

main/ui/apps/travel/web/web_handlers.cpp

@@ -0,0 +1,729 @@
+#include "ui/apps/travel/web/web_handlers.h"
+#include "esp_log.h"
+#include "cJSON.h"
+#include <cstring>
+#include <sstream>
+#include <iomanip>
+
+static const char* TAG = "TravelWebHandler";
+
+namespace travel {
+
+WebHandler::WebHandler(
+  SettingHandler* setting_handler,
+  NetworkHandler* network_handler
+)
+  : web_server_(std::make_unique<WebServerHandler>())
+  , setting_handler_(setting_handler)
+  , network_handler_(network_handler)
+  , mtr_handler_(std::make_unique<MTRNextTrainHandler>())
+  , auth_key_(generate_auth_key_()) {
+}
+
+WebHandler::~WebHandler() {
+  stop_web_server();
+}
+
+std::string WebHandler::generate_auth_key_() {
+  // Generate a random 16-character hex key
+  std::stringstream ss;
+  for (int i = 0; i < 8; i++) {
+    ss << std::hex << std::setw(2) << std::setfill('0') << (esp_random() & 0xFF);
+  }
+  return ss.str();
+}
+
+esp_err_t WebHandler::start_web_server() {
+  uint16_t port = web_server_->start(auth_key_, WEB_SERVER_PORT);
+  if (port == 0) {
+    ESP_LOGE(TAG, "Failed to start web server");
+    return ESP_FAIL;
+  }
+
+  esp_err_t err = register_web_endpoints_();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register endpoints: %s", esp_err_to_name(err));
+    web_server_->stop();
+    return err;
+  }
+
+  ESP_LOGI(TAG, "Web server started on port %d", port);
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::stop_web_server() {
+  if (web_server_) {
+    web_server_->stop();
+  }
+  return ESP_OK;
+}
+
+std::string WebHandler::get_url() const {
+  std::string ip = get_device_ip();
+  if (ip.empty()) {
+    return "";
+  }
+  return "http://" + ip + ":" + std::to_string(WEB_SERVER_PORT) + "/?auth=" + auth_key_;
+}
+
+std::string WebHandler::get_device_ip() const {
+  if (!network_handler_) {
+    return "";
+  }
+  return network_handler_->get_wifi_handler().get_current_ip();
+}
+
+uint16_t WebHandler::get_port() const {
+  return WEB_SERVER_PORT;
+}
+
+esp_err_t WebHandler::register_web_endpoints_() {
+  // Main settings page
+  httpd_uri_t settings_uri = {
+    .uri = "/",
+    .method = HTTP_GET,
+    .handler = settings_page_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&settings_uri));
+
+  // Get MTR lines
+  httpd_uri_t lines_uri = {
+    .uri = "/api/lines",
+    .method = HTTP_GET,
+    .handler = get_lines_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&lines_uri));
+
+  // Get saved routes
+  httpd_uri_t routes_uri = {
+    .uri = "/api/routes",
+    .method = HTTP_GET,
+    .handler = get_routes_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&routes_uri));
+
+  // Add route
+  httpd_uri_t add_route_uri = {
+    .uri = "/api/routes",
+    .method = HTTP_POST,
+    .handler = add_route_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&add_route_uri));
+
+  // Remove route
+  httpd_uri_t remove_route_uri = {
+    .uri = "/api/routes",
+    .method = HTTP_DELETE,
+    .handler = remove_route_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&remove_route_uri));
+
+  // Save settings (polling interval)
+  httpd_uri_t save_uri = {
+    .uri = "/api/settings",
+    .method = HTTP_POST,
+    .handler = save_settings_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&save_uri));
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::settings_page_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Check auth
+  char auth_param[33] = {0};
+  if (httpd_req_get_url_query_str(req, auth_param, sizeof(auth_param)) == ESP_OK) {
+    char auth_value[33] = {0};
+    if (httpd_query_key_value(auth_param, "auth", auth_value, sizeof(auth_value)) == ESP_OK) {
+      if (handler->auth_key_ != auth_value) {
+        httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Unauthorized");
+        return ESP_FAIL;
+      }
+    } else {
+      httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Missing auth");
+      return ESP_FAIL;
+    }
+  } else {
+    httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Missing auth");
+    return ESP_FAIL;
+  }
+
+  // HTML page with inline CSS and JavaScript
+  const char* html = R"html(
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MTR Travel Settings</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f5f5;
+      padding: 20px;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    h1 { font-size: 24px; margin-bottom: 20px; color: #333; }
+    h2 { font-size: 18px; margin: 20px 0 10px; color: #555; }
+    .card {
+      background: white;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 15px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .form-group { margin-bottom: 15px; }
+    label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; }
+    select, input[type="number"] {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    button {
+      background: #007DC5;
+      color: white;
+      border: none;
+      padding: 12px 20px;
+      border-radius: 4px;
+      font-size: 16px;
+      cursor: pointer;
+      width: 100%;
+    }
+    button:hover { background: #005a8c; }
+    button.secondary {
+      background: #6c757d;
+    }
+    button.danger {
+      background: #dc3545;
+    }
+    .route-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      background: #f8f9fa;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+    .route-info { flex: 1; }
+    .route-line {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 3px;
+      color: white;
+      font-size: 12px;
+      margin-right: 5px;
+    }
+    .status { margin-top: 10px; padding: 10px; border-radius: 4px; }
+    .status.success { background: #d4edda; color: #155724; }
+    .status.error { background: #f8d7da; color: #721c24; }
+    .slider-container {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    input[type="range"] { flex: 1; }
+    .value-display { min-width: 60px; text-align: right; }
+  </style>
+</head>
+<body>
+  <h1>MTR Travel 設定</h1>
+
+  <div class="card">
+    <h2>新增路線</h2>
+    <div class="form-group">
+      <label>路線</label>
+      <select id="line_select" onchange="updateStations()">
+        <option value="">請選擇路線</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>出發站</label>
+      <select id="station_select">
+        <option value="">請先選擇路線</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>方向</label>
+      <select id="direction_select">
+        <option value="">請先選擇路線</option>
+      </select>
+    </div>
+    <button onclick="addRoute()">新增路線</button>
+  </div>
+
+  <div class="card">
+    <h2>已儲存路線</h2>
+    <div id="routes_list"></div>
+  </div>
+
+  <div class="card">
+    <h2>更新頻率</h2>
+    <div class="form-group">
+      <label>資料更新間隔</label>
+      <div class="slider-container">
+        <input type="range" id="interval_slider" min="10" max="120" value="30" step="5"
+               oninput="updateIntervalDisplay()">
+        <span class="value-display"><span id="interval_value">30</span> 秒</span>
+      </div>
+    </div>
+    <button onclick="saveSettings()">儲存設定</button>
+  </div>
+
+  <div id="status"></div>
+
+  <script>
+    let linesData = [];
+    let routesData = [];
+
+    // Load initial data
+    async function init() {
+      await loadLines();
+      await loadRoutes();
+      updateIntervalDisplay();
+    }
+
+    async function loadLines() {
+      try {
+        const response = await fetch('/api/lines');
+        linesData = await response.json();
+        const select = document.getElementById('line_select');
+        select.innerHTML = '<option value="">請選擇路線</option>';
+        linesData.forEach(line => {
+          const option = document.createElement('option');
+          option.value = line.code;
+          option.textContent = line.name;
+          select.appendChild(option);
+        });
+      } catch (err) {
+        showStatus('無法載入路線資料', 'error');
+      }
+    }
+
+    async function loadRoutes() {
+      try {
+        const response = await fetch('/api/routes');
+        const data = await response.json();
+        routesData = data.routes || [];
+        document.getElementById('interval_slider').value = data.polling_interval || 30;
+        renderRoutes();
+      } catch (err) {
+        showStatus('無法載入路線', 'error');
+      }
+    }
+
+    function updateStations() {
+      const lineCode = document.getElementById('line_select').value;
+      const stationSelect = document.getElementById('station_select');
+      const directionSelect = document.getElementById('direction_select');
+
+      if (!lineCode) {
+        stationSelect.innerHTML = '<option value="">請先選擇路線</option>';
+        directionSelect.innerHTML = '<option value="">請先選擇路線</option>';
+        return;
+      }
+
+      const line = linesData.find(l => l.code === lineCode);
+      if (!line) return;
+
+      const stationsHtml = line.stations.map(s =>
+        `<option value="${s.code}">${s.name}</option>`
+      ).join('');
+
+      stationSelect.innerHTML = '<option value="">請選擇車站</option>' + stationsHtml;
+
+      const stations = line.stations;
+      if (stations.length >= 2) {
+        const firstStation = stations[0];
+        const lastStation = stations[stations.length - 1];
+        const directionsHtml =
+          `<option value="${firstStation.code}">${firstStation.name}方向</option>` +
+          `<option value="${lastStation.code}">${lastStation.name}方向</option>`;
+        directionSelect.innerHTML = '<option value="">請選擇方向</option>' + directionsHtml;
+      } else {
+        directionSelect.innerHTML = '<option value="">路線車站不足</option>';
+      }
+    }
+
+    function renderRoutes() {
+      const container = document.getElementById('routes_list');
+      if (routesData.length === 0) {
+        container.innerHTML = '<p style="color: #666;">尚未設定路線</p>';
+        return;
+      }
+
+      container.innerHTML = routesData.map((route, index) => `
+        <div class="route-item">
+          <div class="route-info">
+            <span class="route-line" style="background: ${route.line_color}">${route.line_name}</span>
+            ${route.station_name} → ${route.direction_name}
+          </div>
+          <button class="danger" style="width: auto; padding: 5px 10px;"
+                  onclick="removeRoute(${index})">刪除</button>
+        </div>
+      `).join('');
+    }
+
+    async function addRoute() {
+      const lineCode = document.getElementById('line_select').value;
+      const stationCode = document.getElementById('station_select').value;
+      const directionCode = document.getElementById('direction_select').value;
+
+      if (!lineCode || !stationCode || !directionCode) {
+        showStatus('請選擇路線、出發站和方向', 'error');
+        return;
+      }
+
+      if (stationCode === directionCode) {
+        showStatus('出發站和方向不能相同', 'error');
+        return;
+      }
+
+      const line = linesData.find(l => l.code === lineCode);
+      const station = line.stations.find(s => s.code === stationCode);
+      const direction = line.stations.find(s => s.code === directionCode);
+
+      const route = {
+        line_code: lineCode,
+        line_name: line.name,
+        line_color: line.color,
+        station_code: stationCode,
+        station_name: station.name,
+        direction: directionCode,
+        direction_name: direction.name + '方向'
+      };
+
+      try {
+        const response = await fetch('/api/routes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(route)
+        });
+
+        if (response.ok) {
+          showStatus('路線已新增', 'success');
+          await loadRoutes();
+        } else {
+          const err = await response.text();
+          showStatus('新增失敗: ' + err, 'error');
+        }
+      } catch (err) {
+        showStatus('新增失敗', 'error');
+      }
+    }
+
+    async function removeRoute(index) {
+      try {
+        const response = await fetch('/api/routes', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ index: index })
+        });
+
+        if (response.ok) {
+          showStatus('路線已刪除', 'success');
+          await loadRoutes();
+        } else {
+          showStatus('刪除失敗', 'error');
+        }
+      } catch (err) {
+        showStatus('刪除失敗', 'error');
+      }
+    }
+
+    function updateIntervalDisplay() {
+      const value = document.getElementById('interval_slider').value;
+      document.getElementById('interval_value').textContent = value;
+    }
+
+    async function saveSettings() {
+      const interval = parseInt(document.getElementById('interval_slider').value);
+
+      try {
+        const response = await fetch('/api/settings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ polling_interval: interval })
+        });
+
+        if (response.ok) {
+          showStatus('設定已儲存', 'success');
+        } else {
+          showStatus('儲存失敗', 'error');
+        }
+      } catch (err) {
+        showStatus('儲存失敗', 'error');
+      }
+    }
+
+    function showStatus(message, type) {
+      const statusDiv = document.getElementById('status');
+      statusDiv.className = 'status ' + type;
+      statusDiv.textContent = message;
+      setTimeout(() => {
+        statusDiv.className = '';
+        statusDiv.textContent = '';
+      }, 3000);
+    }
+
+    init();
+  </script>
+</body>
+</html>
+  )html";
+
+  httpd_resp_set_type(req, "text/html");
+  httpd_resp_send(req, html, strlen(html));
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::get_lines_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Get all lines from MTR handler
+  std::vector<LineInfo> lines = handler->mtr_handler_->get_lines();
+
+  cJSON* root = cJSON_CreateArray();
+  for (const auto& line : lines) {
+    cJSON* line_obj = cJSON_CreateObject();
+    cJSON_AddStringToObject(line_obj, "code", line.code());
+    cJSON_AddStringToObject(line_obj, "name", line.name());
+    cJSON_AddStringToObject(line_obj, "color", line.color());
+
+    // Add stations
+    cJSON* stations_arr = cJSON_CreateArray();
+    const auto* stations = line.stations();
+    if (stations) {
+      for (const auto& station : *stations) {
+        cJSON* station_obj = cJSON_CreateObject();
+        cJSON_AddStringToObject(station_obj, "code", station.code());
+        cJSON_AddStringToObject(station_obj, "name", station.name());
+        cJSON_AddItemToArray(stations_arr, station_obj);
+      }
+    }
+    cJSON_AddItemToObject(line_obj, "stations", stations_arr);
+
+    cJSON_AddItemToArray(root, line_obj);
+  }
+
+  char* json_str = cJSON_PrintUnformatted(root);
+  cJSON_Delete(root);
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, json_str ? json_str : "[]", json_str ? strlen(json_str) : 2);
+
+  if (json_str) {
+    free(json_str);
+  }
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::get_routes_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  cJSON* root = cJSON_CreateObject();
+
+  // Add routes
+  cJSON* routes_arr = cJSON_CreateArray();
+  const auto& routes = handler->setting_handler_->get_routes();
+  for (const auto& route : routes) {
+    cJSON* route_obj = cJSON_CreateObject();
+    cJSON_AddStringToObject(route_obj, "line_code", route.line_code.c_str());
+    cJSON_AddStringToObject(route_obj, "line_name", route.line_name.c_str());
+    cJSON_AddStringToObject(route_obj, "line_color", route.line_color.c_str());
+    cJSON_AddStringToObject(route_obj, "station_code", route.station_code.c_str());
+    cJSON_AddStringToObject(route_obj, "station_name", route.station_name.c_str());
+    cJSON_AddStringToObject(route_obj, "direction", route.direction.c_str());
+    cJSON_AddStringToObject(route_obj, "direction_name", route.direction_name.c_str());
+    cJSON_AddItemToArray(routes_arr, route_obj);
+  }
+  cJSON_AddItemToObject(root, "routes", routes_arr);
+
+  // Add polling interval
+  cJSON_AddNumberToObject(root, "polling_interval", handler->setting_handler_->get_polling_interval());
+
+  char* json_str = cJSON_PrintUnformatted(root);
+  cJSON_Delete(root);
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, json_str ? json_str : "{}", json_str ? strlen(json_str) : 2);
+
+  if (json_str) {
+    free(json_str);
+  }
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::add_route_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read request body
+  char buf[512];
+  int received = 0;
+  int remaining = req->content_len;
+
+  std::string body;
+  while (remaining > 0) {
+    received = httpd_req_recv(req, buf, std::min(remaining, (int)sizeof(buf) - 1));
+    if (received <= 0) {
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+      return ESP_FAIL;
+    }
+    buf[received] = '\0';
+    body += buf;
+    remaining -= received;
+  }
+
+  // Parse JSON
+  cJSON* root = cJSON_Parse(body.c_str());
+  if (!root) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  RoutePair route;
+  cJSON* item;
+
+  item = cJSON_GetObjectItem(root, "line_code");
+  if (item && cJSON_IsString(item)) route.line_code = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "line_name");
+  if (item && cJSON_IsString(item)) route.line_name = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "line_color");
+  if (item && cJSON_IsString(item)) route.line_color = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "station_code");
+  if (item && cJSON_IsString(item)) route.station_code = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "station_name");
+  if (item && cJSON_IsString(item)) route.station_name = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "direction");
+  if (item && cJSON_IsString(item)) route.direction = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "direction_name");
+  if (item && cJSON_IsString(item)) route.direction_name = item->valuestring;
+
+  cJSON_Delete(root);
+
+  if (route.line_code.empty() || route.station_code.empty() || route.direction.empty()) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing required fields");
+    return ESP_FAIL;
+  }
+
+  // Add route
+  handler->setting_handler_->add_route(route);
+  handler->setting_handler_->save_settings();
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, "{\"success\":true}", 16);
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::remove_route_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read request body
+  char buf[128];
+  int received = 0;
+  int remaining = req->content_len;
+
+  std::string body;
+  while (remaining > 0) {
+    received = httpd_req_recv(req, buf, std::min(remaining, (int)sizeof(buf) - 1));
+    if (received <= 0) {
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+      return ESP_FAIL;
+    }
+    buf[received] = '\0';
+    body += buf;
+    remaining -= received;
+  }
+
+  // Parse JSON
+  cJSON* root = cJSON_Parse(body.c_str());
+  if (!root) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  cJSON* index_item = cJSON_GetObjectItem(root, "index");
+  if (!index_item || !cJSON_IsNumber(index_item)) {
+    cJSON_Delete(root);
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing index");
+    return ESP_FAIL;
+  }
+
+  int index = index_item->valueint;
+  cJSON_Delete(root);
+
+  handler->setting_handler_->remove_route(index);
+  handler->setting_handler_->save_settings();
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, "{\"success\":true}", 16);
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::save_settings_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read request body
+  char buf[256];
+  int received = 0;
+  int remaining = req->content_len;
+
+  std::string body;
+  while (remaining > 0) {
+    received = httpd_req_recv(req, buf, std::min(remaining, (int)sizeof(buf) - 1));
+    if (received <= 0) {
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+      return ESP_FAIL;
+    }
+    buf[received] = '\0';
+    body += buf;
+    remaining -= received;
+  }
+
+  // Parse JSON
+  cJSON* root = cJSON_Parse(body.c_str());
+  if (!root) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  cJSON* interval_item = cJSON_GetObjectItem(root, "polling_interval");
+  if (interval_item && cJSON_IsNumber(interval_item)) {
+    uint32_t interval = interval_item->valueint;
+    handler->setting_handler_->set_polling_interval(interval);
+  }
+
+  cJSON_Delete(root);
+
+  handler->setting_handler_->save_settings();
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, "{\"success\":true}", 16);
+
+  return ESP_OK;
+}
+
+} // namespace travel

main/ui/apps/travel/web/web_handlers.h

@@ -0,0 +1,58 @@
+#pragma once
+
+#include "esp_http_server.h"
+#include <string>
+#include <memory>
+#include "network/web_server_handler.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "external/mtr/mtr.h"
+#include "network/network.h"
+
+namespace travel {
+
+/**
+ * @brief HTTP request handlers for Travel app settings web interface
+ *
+ * These handlers serve the web configuration page for MTR routes.
+ */
+class WebHandler {
+public:
+  WebHandler(
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  );
+  ~WebHandler();
+
+  esp_err_t start_web_server();
+  esp_err_t stop_web_server();
+
+  std::string get_url() const;
+  std::string get_device_ip() const;
+  uint16_t get_port() const;
+
+  bool is_running() const {
+    return web_server_ && web_server_->is_running();
+  }
+
+private:
+  std::string generate_auth_key_();
+  esp_err_t register_web_endpoints_();
+
+  // HTTP handlers
+  static esp_err_t settings_page_handler_(httpd_req_t* req);
+  static esp_err_t get_lines_handler_(httpd_req_t* req);
+  static esp_err_t get_routes_handler_(httpd_req_t* req);
+  static esp_err_t add_route_handler_(httpd_req_t* req);
+  static esp_err_t remove_route_handler_(httpd_req_t* req);
+  static esp_err_t save_settings_handler_(httpd_req_t* req);
+
+  std::unique_ptr<WebServerHandler> web_server_;
+  SettingHandler* setting_handler_ = nullptr;
+  NetworkHandler* network_handler_ = nullptr;
+  std::unique_ptr<MTRNextTrainHandler> mtr_handler_;
+
+  std::string auth_key_;
+  static constexpr uint16_t WEB_SERVER_PORT = 8081;
+};
+
+} // namespace travel

main/ui/events.cpp

@@ -0,0 +1,4 @@
+#include "events.h"
+
+// Define the event base
+ESP_EVENT_DEFINE_BASE(UI_EVENT_BASE);

main/ui/events.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include "esp_event.h"
+#include "lvgl.h"
+
+ESP_EVENT_DECLARE_BASE(UI_EVENT_BASE);
+
+struct KeyboardEventData {
+  lv_obj_t* textarea; ///< The textarea that triggered the keyboard event, nullptr if not applicable or for hide event
+};
+
+enum EventId {
+  UI_EVENT_KEYBOARD_SHOWN = 1,   ///< Event ID for keyboard shown event
+  UI_EVENT_KEYBOARD_HIDDEN = 2   ///< Event ID for keyboard hidden event
+};

main/ui/interaction_handler.cpp

@@ -0,0 +1,179 @@
+#include "ui/interaction_handler.h"
+#include "ui/events.h"
+#include "esp_err.h"
+#include "esp_log.h"
+
+#define TAG "InteractionHandler"
+
+InteractionHandler::~InteractionHandler() {
+  esp_err_t err = deinit();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Error during InteractionHandler deinit: %s", esp_err_to_name(err));
+  }
+}
+
+esp_err_t InteractionHandler::init(lv_obj_t* parent_container) {
+  if (!parent_container) {
+    ESP_LOGE(TAG, "Invalid argument: parent_container is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+  parent_container_ = parent_container;
+
+  keyboard_ = lv_keyboard_create(parent_container_);
+  if (!keyboard_) {
+    ESP_LOGE(TAG, "Failed to create keyboard object");
+    return ESP_ERR_NO_MEM;
+  }
+
+  ESP_LOGI(TAG, "Keyboard created successfully at %p", keyboard_);
+  lv_obj_add_flag(keyboard_, LV_OBJ_FLAG_HIDDEN); // start hidden
+  lv_obj_add_event_cb(
+    keyboard_,
+    [](lv_event_t* e) {
+      InteractionHandler* handler = static_cast<InteractionHandler*>(lv_event_get_user_data(e));
+      handler->on_keyboard_event_(e);
+    }
+  , LV_EVENT_ALL, this);
+
+  return ESP_OK;
+}
+
+esp_err_t InteractionHandler::deinit(void) {
+  if (keyboard_) {
+    lv_obj_del(keyboard_);
+    keyboard_ = nullptr;
+  }
+  return ESP_OK;
+}
+
+esp_err_t InteractionHandler::register_text_area_keyboard_support(lv_obj_t* text_area) {
+  if (!text_area) {
+    ESP_LOGE(TAG, "Invalid argument: text_area is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  lv_obj_add_event_cb(
+    text_area,
+    [](lv_event_t* e) {
+      lv_event_code_t code = lv_event_get_code(e);
+      if (code != LV_EVENT_FOCUSED) {
+        return;
+      }
+      InteractionHandler* handler = static_cast<InteractionHandler*>(lv_event_get_user_data(e));
+
+      esp_err_t err = handler->show_keyboard_for_textarea_(static_cast<lv_obj_t*>(lv_event_get_target(e)));
+      if (err != ESP_OK) {
+        ESP_LOGE(TAG, "Failed to show keyboard: %s", esp_err_to_name(err));
+      }
+    }
+  , LV_EVENT_FOCUSED, this);
+
+  lv_obj_add_event_cb(
+    text_area,
+    [](lv_event_t* e) {
+      lv_event_code_t code = lv_event_get_code(e);
+      if (code != LV_EVENT_DEFOCUSED) {
+        return;
+      }
+      InteractionHandler* handler = static_cast<InteractionHandler*>(lv_event_get_user_data(e));
+
+      esp_err_t err = handler->hide_keyboard_();
+      if (err != ESP_OK) {
+        ESP_LOGE(TAG, "Failed to hide keyboard: %s", esp_err_to_name(err));
+      }
+    }
+  , LV_EVENT_DEFOCUSED, this);
+
+  return ESP_OK;
+}
+
+//
+// Private methods
+//
+
+void InteractionHandler::on_keyboard_event_(lv_event_t* e) {
+  lv_event_code_t code = lv_event_get_code(e);
+  if (code == LV_EVENT_READY || code == LV_EVENT_CANCEL) {
+    // Keyboard is cancelled
+    esp_err_t err = hide_keyboard_();
+    if (err != ESP_OK) {
+      ESP_LOGE(TAG, "Failed to hide keyboard: %s", esp_err_to_name(err));
+    }
+
+    if (focused_textarea_) {
+      lv_obj_clear_state(focused_textarea_, LV_STATE_FOCUSED);
+      lv_keyboard_set_textarea(keyboard_, nullptr);
+      focused_textarea_ = nullptr;
+    }
+  }
+}
+
+esp_err_t InteractionHandler::show_keyboard_for_textarea_(lv_obj_t* textarea) {
+  if (!textarea) {
+    ESP_LOGE(TAG, "Invalid argument: textarea is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  if (!keyboard_) {
+    ESP_LOGE(TAG, "Keyboard object is nullptr - was InteractionHandler properly initialized?");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  // Verify keyboard object is still valid
+  if (!lv_obj_is_valid(keyboard_)) {
+    ESP_LOGE(TAG, "Keyboard object is no longer valid - it may have been deleted");
+    keyboard_ = nullptr;
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  ESP_LOGI(TAG, "Showing keyboard for textarea %p", textarea);
+  focused_textarea_ = textarea;
+  lv_keyboard_set_textarea(keyboard_, textarea);
+  lv_obj_clear_flag(keyboard_, LV_OBJ_FLAG_HIDDEN);
+  // emit keyboard shown event
+  KeyboardEventData event_data = {
+   .textarea = textarea
+  };
+  esp_err_t err = esp_event_post_to(
+    NULL,
+    UI_EVENT_BASE,
+    UI_EVENT_KEYBOARD_SHOWN,
+    &event_data,
+    sizeof(event_data),
+    portMAX_DELAY
+  );
+
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to post keyboard shown event: %s", esp_err_to_name(err));
+  }
+
+  return ESP_OK;
+}
+
+esp_err_t InteractionHandler::hide_keyboard_(void) {
+  if (!keyboard_) {
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  lv_obj_add_flag(keyboard_, LV_OBJ_FLAG_HIDDEN);
+
+  // emit keyboard hidden event
+  KeyboardEventData event_data = {
+   .textarea = nullptr
+  };
+
+  esp_err_t err = esp_event_post_to(
+    NULL,
+    UI_EVENT_BASE,
+    UI_EVENT_KEYBOARD_HIDDEN,
+    &event_data,
+    sizeof(event_data),
+    portMAX_DELAY
+  );
+
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to post keyboard hidden event: %s", esp_err_to_name(err));
+  }
+
+  return ESP_OK;
+}

main/ui/interaction_handler.h

@@ -0,0 +1,71 @@
+#pragma once
+
+#include "esp_err.h"
+#include "lvgl.h"
+#include "ui/events.h"
+
+
+
+/**
+ * @brief Interaction Handler - manages user interactions
+ *
+ * This class is responsible for handling user inputs
+ * such as touch events, button presses, and gestures.
+ * It routes these interactions to the appropriate UI components
+ * or apps based on the current context. And it also handles the respective UI widgets.
+ *
+ * For example, it manages:
+ * Textarea focus and display of the on-screen keyboard
+ */
+class InteractionHandler {
+public:
+
+  InteractionHandler() = default;
+  ~InteractionHandler();
+
+  /**
+   * @brief Initialize the Interaction Handler
+   *
+   * Sets up necessary event listeners and state.
+   *
+   * @param parent_container Parent container for keyboard (typically the screen)
+   * @return ESP_OK on success, error code otherwise
+   */
+  esp_err_t init(lv_obj_t* parent_container);
+
+  /**
+   * @brief Deinitialize the Interaction Handler
+   *
+   * Cleans up resources and event listeners.
+   *
+   * @return ESP_OK on success, error code otherwise
+   */
+  esp_err_t deinit(void);
+
+  /**
+   * @brief Add keyboard support to a textarea widget
+   *
+   * @param text_area Pointer to the textarea lvgl object
+   * @return esp_err_t ESP_OK on success, error code otherwise
+   */
+  esp_err_t register_text_area_keyboard_support(lv_obj_t* text_area);
+
+private:
+
+  // Event handler for keyboard show/hide events
+  // It should be registered with event callbacks of the keyboard object
+  void on_keyboard_event_(lv_event_t* e);
+
+  esp_err_t show_keyboard_for_textarea_(lv_obj_t* textarea);
+  esp_err_t hide_keyboard_(void);
+
+  // Parent container (typically screen), reference only
+  lv_obj_t* parent_container_ = nullptr;
+  // owned keyboard object
+  lv_obj_t* keyboard_ = nullptr;
+  // Currently focused textarea, reference only
+  lv_obj_t* focused_textarea_ = nullptr;
+
+  InteractionHandler(const InteractionHandler&) = delete;
+  InteractionHandler& operator=(const InteractionHandler&) = delete;
+};

main/ui/page_stack.cpp

@@ -1,115 +0,0 @@
-#include "page_stack.h"
-#include "esp_log.h"
-
-static const char* TAG = "PageStack";
-
-PageStack::PageStack(lv_obj_t* parent_container)
-    : parent_container_(parent_container) {
-    if (!parent_container_) {
-        ESP_LOGE(TAG, "Parent container is null");
-    }
-}
-
-PageStack::~PageStack() {
-    clear();
-}
-
-lv_obj_t* PageStack::create_page_container() {
-    lv_obj_t* page = lv_obj_create(parent_container_);
-
-    // Fill parent container
-    lv_obj_set_size(page, LV_PCT(100), LV_PCT(100));
-    lv_obj_set_pos(page, 0, 0);
-
-    // Remove padding and scrollbars
-    lv_obj_set_style_pad_all(page, 0, 0);
-    lv_obj_set_scrollbar_mode(page, LV_SCROLLBAR_MODE_OFF);
-
-    // White background
-    lv_obj_set_style_bg_color(page, lv_color_white(), 0);
-    lv_obj_set_style_bg_opa(page, LV_OPA_COVER, 0);
-
-    // Remove border
-    lv_obj_set_style_border_width(page, 0, 0);
-
-    return page;
-}
-
-lv_obj_t* PageStack::push(PageBuilder builder, PageCleanup cleanup) {
-    if (!parent_container_) {
-        ESP_LOGE(TAG, "Cannot push page: parent container is null");
-        return nullptr;
-    }
-
-    if (!builder) {
-        ESP_LOGE(TAG, "Cannot push page: builder is null");
-        return nullptr;
-    }
-
-    // Hide current page if any
-    if (!pages_.empty()) {
-        lv_obj_add_flag(pages_.back().container, LV_OBJ_FLAG_HIDDEN);
-    }
-
-    // Create new page container
-    lv_obj_t* page = create_page_container();
-
-    // Build page content
-    builder(page);
-
-    // Add to stack
-    pages_.push_back({page, cleanup});
-
-    ESP_LOGD(TAG, "Pushed page (depth: %d)", pages_.size());
-    return page;
-}
-
-bool PageStack::pop() {
-    if (pages_.empty()) {
-        ESP_LOGW(TAG, "Cannot pop: stack is empty");
-        return false;
-    }
-
-    // Get and remove current page
-    Page current = pages_.back();
-    pages_.pop_back();
-
-    // Call cleanup callback if provided
-    if (current.cleanup) {
-        current.cleanup(current.container);
-    }
-
-    // Delete page container
-    lv_obj_del(current.container);
-
-    // Show previous page if any
-    if (!pages_.empty()) {
-        lv_obj_clear_flag(pages_.back().container, LV_OBJ_FLAG_HIDDEN);
-    }
-
-    ESP_LOGD(TAG, "Popped page (depth: %d)", pages_.size());
-    return true;
-}
-
-void PageStack::clear() {
-    ESP_LOGD(TAG, "Clearing all pages (depth: %d)", pages_.size());
-
-    // Pop all pages (calls cleanup callbacks)
-    while (!pages_.empty()) {
-        Page current = pages_.back();
-        pages_.pop_back();
-
-        if (current.cleanup) {
-            current.cleanup(current.container);
-        }
-
-        lv_obj_del(current.container);
-    }
-}
-
-lv_obj_t* PageStack::current_page() const {
-    if (pages_.empty()) {
-        return nullptr;
-    }
-    return pages_.back().container;
-}

main/ui/page_stack.h

@@ -1,86 +0,0 @@
-#pragma once
-
-#include "lvgl.h"
-#include <vector>
-#include <functional>
-
-/**
- * @brief Reusable page stack for multi-page navigation within LVGL apps
- *
- * Manages a stack of LVGL containers, allowing apps to push/pop pages
- * and implement hierarchical navigation. Thread-safe for use with LVGL.
- */
-class PageStack {
-public:
-    /**
-     * @brief Page builder callback
-     * @param page_container The LVGL container to build the page in
-     */
-    using PageBuilder = std::function<void(lv_obj_t* page_container)>;
-
-    /**
-     * @brief Page cleanup callback
-     * @param page_container The LVGL container being destroyed
-     */
-    using PageCleanup = std::function<void(lv_obj_t* page_container)>;
-
-    /**
-     * @brief Construct page stack with parent container
-     * @param parent_container Parent LVGL container for pages
-     */
-    explicit PageStack(lv_obj_t* parent_container);
-
-    /**
-     * @brief Destructor - clears all pages
-     */
-    ~PageStack();
-
-    /**
-     * @brief Push a new page onto the stack
-     * @param builder Function to build page content
-     * @param cleanup Optional cleanup function called when page is popped
-     * @return The created page container
-     */
-    lv_obj_t* push(PageBuilder builder, PageCleanup cleanup = nullptr);
-
-    /**
-     * @brief Pop the current page and return to previous
-     * @return true if page was popped, false if stack is empty
-     */
-    bool pop();
-
-    /**
-     * @brief Clear all pages from the stack
-     */
-    void clear();
-
-    /**
-     * @brief Get the current (top) page container
-     * @return Current page or nullptr if stack is empty
-     */
-    lv_obj_t* current_page() const;
-
-    /**
-     * @brief Get the number of pages in the stack
-     */
-    size_t depth() const { return pages_.size(); }
-
-    /**
-     * @brief Check if stack is empty
-     */
-    bool empty() const { return pages_.empty(); }
-
-private:
-    struct Page {
-        lv_obj_t* container;
-        PageCleanup cleanup;
-    };
-
-    lv_obj_t* parent_container_;
-    std::vector<Page> pages_;
-
-    /**
-     * @brief Create a page container
-     */
-    lv_obj_t* create_page_container();
-};

main/ui/root_layout.cpp

@@ -1,123 +1,93 @@
 #include "ui/root_layout.h"
-#include "ui/ui_handler.h"
+#include "ui/events.h"
-#include "ui/app_registry.h"
 #include "esp_log.h"
+#include "esp_event.h"
 
 #define TAG "RootLayout"
 
-// Display dimensions
-#define DISPLAY_WIDTH 800
-#define DISPLAY_HEIGHT 480
-
-// Layout dimensions
 #define HEADER_HEIGHT 40
 #define NAV_BAR_HEIGHT 50
-#define APP_CONTAINER_HEIGHT (DISPLAY_HEIGHT - HEADER_HEIGHT - NAV_BAR_HEIGHT)
 
-// forward-declare local event callback
+RootLayout::~RootLayout() {
-static void on_home_button_clicked(lv_event_t* event);
+  deinit();
-
-RootLayout::RootLayout(UIHandler* ui_handler)
-  : _ui_handler(ui_handler) { }
-
-esp_err_t RootLayout::init(lv_obj_t* parent) {
-  if (!parent) {
-    ESP_LOGE(TAG, "Parent object is null");
-    return ESP_ERR_INVALID_ARG;
-  }
-
-  ESP_LOGI(TAG, "Initializing RootLayout");
-
-  if (create_layout(parent) != ESP_OK) {
-    ESP_LOGE(TAG, "Failed to create layout");
-    return ESP_FAIL;
-  }
-
-  ESP_LOGI(TAG, "RootLayout initialized successfully");
-  return ESP_OK;
 }
 
-esp_err_t RootLayout::deinit(void) {
+esp_err_t RootLayout::init(lv_obj_t* parent, UIHandler* ui_handler) {
-  ESP_LOGI(TAG, "Deinitializing RootLayout");
 
-  // LVGL will handle cleanup when parent is destroyed
-  _header = nullptr;
-  _header_label = nullptr;
-  _app_container = nullptr;
-  _nav_bar = nullptr;
-  _back_button = nullptr;
-
-  return ESP_OK;
-}
-
-esp_err_t RootLayout::create_layout(lv_obj_t* parent) {
   // Configure parent as flexbox column layout
   lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_COLUMN);
   lv_obj_set_flex_align(parent, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
   lv_obj_set_style_pad_all(parent, 0, 0);
   lv_obj_set_style_pad_gap(parent, 0, 0);
-
+  //
   // Create header (top, fixed height)
-  _header = lv_obj_create(parent);
+  header_obj_ = lv_obj_create(parent);
-  lv_obj_set_width(_header, lv_pct(100));
+  lv_obj_set_width(header_obj_, lv_pct(100));
-  lv_obj_set_height(_header, HEADER_HEIGHT);
+  lv_obj_set_height(header_obj_, HEADER_HEIGHT);
-  lv_obj_set_style_bg_color(_header, lv_color_hex(0xFFFFFF), 0);
+  lv_obj_set_style_bg_color(header_obj_, lv_color_white(), 0);
-  lv_obj_set_style_border_width(_header, 0, 0);
+  lv_obj_set_style_border_width(header_obj_, 0, 0);
-  lv_obj_set_style_border_color(_header, lv_color_hex(0x000000), 0);
+  lv_obj_set_style_border_color(header_obj_, lv_color_black(), 0);
-  lv_obj_set_style_border_width(_header, 1, LV_BORDER_SIDE_BOTTOM);
+  lv_obj_set_style_border_width(header_obj_, 1, LV_BORDER_SIDE_BOTTOM);
-  lv_obj_set_style_pad_all(_header, 0, 0);
+  lv_obj_set_style_pad_all(header_obj_, 0, 0);
-  lv_obj_set_style_radius(_header, 0, 0);
+  lv_obj_set_style_radius(header_obj_, 0, 0);
-
+  //
-  _header_label = lv_label_create(_header);
+  header_label_ = lv_label_create(header_obj_);
-  lv_label_set_text(_header_label, "App");
+  lv_label_set_text(header_label_, "App");
-  lv_obj_set_style_text_color(_header_label, lv_color_black(), 0);
+  lv_obj_set_style_text_color(header_label_, lv_color_black(), 0);
-  lv_obj_align(_header_label, LV_ALIGN_LEFT_MID, 10, 0);
+  lv_obj_align(header_label_, LV_ALIGN_LEFT_MID, 10, 0);
-
+  //
-  // Create app container (middle, flexible - grows to fill available space)
+  // Create app container (middle, flexible height)
-  _app_container = lv_obj_create(parent);
+  app_container_ = lv_obj_create(parent);
-  lv_obj_set_width(_app_container, lv_pct(100));
+  lv_obj_set_width(app_container_, lv_pct(100));
-  lv_obj_set_flex_grow(_app_container, 1);
+  lv_obj_set_flex_grow(app_container_, 1);
-  lv_obj_set_style_bg_color(_app_container, lv_color_white(), 0);
+  lv_obj_set_style_bg_color(app_container_, lv_color_white(), 0);
-  lv_obj_set_style_border_width(_app_container, 0, 0);
+  lv_obj_set_style_border_width(app_container_, 0, 0);
-  lv_obj_set_style_pad_all(_app_container, 0, 0);
+  lv_obj_set_style_pad_all(app_container_, 0, 0);
-  lv_obj_set_style_radius(_app_container, 0, 0);
+  lv_obj_set_style_radius(app_container_, 0, 0);
 
+  //
   // Create navigation bar (bottom, fixed height)
-  _nav_bar = lv_obj_create(parent);
+  nav_bar_obj_ = lv_obj_create(parent);
-  lv_obj_set_width(_nav_bar, lv_pct(100));
+  lv_obj_set_width(nav_bar_obj_, lv_pct(100));
-  lv_obj_set_height(_nav_bar, NAV_BAR_HEIGHT);
+  lv_obj_set_height(nav_bar_obj_, NAV_BAR_HEIGHT);
-  lv_obj_set_style_bg_color(_nav_bar, lv_color_hex(0xFFFFFF), 0);
+  lv_obj_set_style_bg_color(nav_bar_obj_, lv_color_white(), 0);
-  lv_obj_set_style_border_color(_nav_bar, lv_color_hex(0x000000), 0);
+  lv_obj_set_style_border_color(nav_bar_obj_, lv_color_black(), 0);
-  lv_obj_set_style_border_width(_nav_bar, 1, LV_BORDER_SIDE_TOP);
+  lv_obj_set_style_border_width(nav_bar_obj_, 1, LV_BORDER_SIDE_TOP);
-  lv_obj_set_style_pad_all(_nav_bar, 5, 0);
+  lv_obj_set_style_pad_all(nav_bar_obj_, 5, 0);
-  lv_obj_set_style_radius(_nav_bar, 0, 0);
+  lv_obj_set_style_radius(nav_bar_obj_, 0, 0);
 
-  // Configure nav bar as flexbox row layout with space-between
-  lv_obj_set_flex_flow(_nav_bar, LV_FLEX_FLOW_ROW);
-  lv_obj_set_flex_align(_nav_bar, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
 
   // Create back button (aligned to start by flex layout)
-  _back_button = lv_btn_create(_nav_bar);
+  back_button_ = lv_btn_create(nav_bar_obj_);
-  lv_obj_set_size(_back_button, 60, NAV_BAR_HEIGHT - 10);
+  lv_obj_set_size(back_button_, 60, NAV_BAR_HEIGHT - 10);
-  lv_obj_set_style_bg_color(_back_button, lv_color_hex(0x555555), 0);
+  lv_obj_set_style_bg_color(back_button_, lv_color_white(), 0);
-  lv_obj_add_event_cb(_back_button, on_back_button_clicked, LV_EVENT_CLICKED, _ui_handler);
+  lv_obj_add_flag(back_button_, LV_OBJ_FLAG_HIDDEN);
-  lv_obj_add_flag(_back_button, LV_OBJ_FLAG_HIDDEN);
+  lv_obj_t* back_label = lv_label_create(back_button_);
-
-  // Add back arrow label
-  lv_obj_t* back_label = lv_label_create(_back_button);
   lv_label_set_text(back_label, LV_SYMBOL_LEFT);
-  lv_obj_set_style_text_color(back_label, lv_color_black(), 0);
-  lv_obj_align(back_label, LV_ALIGN_CENTER, 0, 0);
 
   // Create home button (aligned to end by flex layout)
-  lv_obj_t* home_button = lv_btn_create(_nav_bar);
+  home_button_ = lv_btn_create(nav_bar_obj_);
-  lv_obj_set_size(home_button, 60, NAV_BAR_HEIGHT - 10);
+  lv_obj_set_size(home_button_, 60, NAV_BAR_HEIGHT - 10);
-  lv_obj_set_style_bg_color(home_button, lv_color_hex(0x555555), 0);
+  lv_obj_set_style_bg_color(home_button_, lv_color_white(), 0);
-  lv_obj_t* home_label = lv_label_create(home_button);
+  lv_obj_t* home_label = lv_label_create(home_button_);
   lv_label_set_text(home_label, LV_SYMBOL_HOME);
-  lv_obj_set_style_text_color(home_label, lv_color_white(), 0);
+  lv_obj_set_style_text_color(home_label, lv_color_black(), 0);
   lv_obj_align(home_label, LV_ALIGN_CENTER, 0, 0);
-  lv_obj_add_event_cb(home_button, on_home_button_clicked, LV_EVENT_CLICKED, _ui_handler);
+
+  // Register keyboard event handler
+  esp_err_t err = esp_event_handler_instance_register(
+    UI_EVENT_BASE,
+    ESP_EVENT_ANY_ID,
+    [](void* handler_args, esp_event_base_t base, int32_t id, void* event_data) {
+      RootLayout* root_layout = static_cast<RootLayout*>(handler_args);
+      root_layout->on_keyboard_event_(handler_args, base, id, event_data);
+    },
+    this,
+    &keyboard_event_handler_instance_
+  );
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register keyboard event handler: %s", esp_err_to_name(err));
+  }
 
   ESP_LOGI(TAG, "Layout created with flexible design: Header=%d, NavBar=%d",
     HEADER_HEIGHT, NAV_BAR_HEIGHT);
@@ -125,140 +95,155 @@ esp_err_t RootLayout::create_layout(lv_obj_t* parent) {
   return ESP_OK;
 }
 
-void RootLayout::update_header(std::string app_name) {
+esp_err_t RootLayout::deinit(void) {
-  if (!_header_label) {
+  // Unregister keyboard event handler
-    return;
+  if (keyboard_event_handler_instance_) {
+    esp_event_handler_instance_unregister(
+      UI_EVENT_BASE,
+      ESP_EVENT_ANY_ID,
+      keyboard_event_handler_instance_
+    );
+    keyboard_event_handler_instance_ = nullptr;
   }
 
-  if (app_name.empty() == false) {
+  header_obj_ = nullptr;
-    lv_label_set_text(_header_label, app_name.c_str());
+  header_label_ = nullptr;
+  //
+  app_container_ = nullptr;
+  //
+  nav_bar_obj_ = nullptr;
+  back_button_ = nullptr;
+  home_button_ = nullptr;
+
+  return ESP_OK;
+}
+
+void RootLayout::hide_nav_bar(void) const {
+  if (nav_bar_obj_) {
+    lv_obj_add_flag(nav_bar_obj_, LV_OBJ_FLAG_HIDDEN);
   } else {
-    lv_label_set_text(_header_label, "App");
+    ESP_LOGW(TAG, "Navigation bar not initialized");
   }
 }
 
-esp_err_t RootLayout::render_app_icons(void) {
+void RootLayout::show_nav_bar(void) const {
-  if (!_nav_bar) {
+  if (nav_bar_obj_) {
-    ESP_LOGE(TAG, "Navigation bar not initialized");
+    lv_obj_clear_flag(nav_bar_obj_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    ESP_LOGW(TAG, "Navigation bar not initialized");
+  }
+}
+
+void RootLayout::show_back_button(void) const {
+  if (back_button_) {
+    lv_obj_clear_flag(back_button_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    ESP_LOGW(TAG, "Back button not initialized");
+  }
+}
+
+void RootLayout::show_home_button(void) const {
+  if (home_button_) {
+    lv_obj_clear_flag(home_button_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    ESP_LOGW(TAG, "Home button not found in navigation bar");
+  }
+}
+
+void RootLayout::hide_back_button(void) const {
+  if (back_button_) {
+    lv_obj_add_flag(back_button_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    ESP_LOGW(TAG, "Back button not initialized");
+  }
+}
+
+void RootLayout::hide_home_button(void) const {
+  if (home_button_) {
+    lv_obj_add_flag(home_button_, LV_OBJ_FLAG_HIDDEN);
+  } else {
+    ESP_LOGW(TAG, "Home button not found in navigation bar");
+  }
+}
+
+esp_err_t RootLayout::register_back_button_callback(lv_event_cb_t callback, void* user_data, lv_event_dsc_t** out_event_dsc) const {
+  if (!back_button_) {
+    ESP_LOGE(TAG, "Back button not initialized");
+    return ESP_ERR_INVALID_STATE;
+  }
+  if (!callback) {
+    ESP_LOGE(TAG, "Invalid argument: callback is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+  if (out_event_dsc == nullptr) {
+    ESP_LOGE(TAG, "Invalid argument: out_event_dsc is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  *out_event_dsc = lv_obj_add_event_cb(back_button_, callback, LV_EVENT_CLICKED, user_data);
+
+  if (*out_event_dsc == nullptr) {
+    ESP_LOGE(TAG, "Failed to register back button callback");
     return ESP_FAIL;
   }
 
-  // Clear existing app container content (icons are rendered in the app area)
-  if (!_app_container) {
-    ESP_LOGE(TAG, "App container not initialized");
-    return ESP_FAIL;
-  }
-  lv_obj_clean(_app_container);
-
-  // Get all registered apps from registry
-  const auto& app_descriptors = AppRegistry::instance().get_app_descriptors();
-
-  if (app_descriptors.empty()) {
-    ESP_LOGW(TAG, "No apps registered in AppRegistry");
-    lv_obj_t* nav_label = lv_label_create(_nav_bar);
-    lv_label_set_text(nav_label, "No apps available");
-    lv_obj_set_style_text_color(nav_label, lv_color_white(), 0);
-    lv_obj_align(nav_label, LV_ALIGN_CENTER, 0, 0);
-    return ESP_OK;
-  }
-
-  ESP_LOGI(TAG, "Rendering %d app icons", (int)app_descriptors.size());
-
-  // Calculate icon spacing inside the app container
-  int icon_count = app_descriptors.size();
-  int icon_width = 96;
-  int icon_height = 96;
-  int icon_spacing = DISPLAY_WIDTH / (icon_count + 1);
-  int x_offset = icon_spacing;
-  int y_offset = (APP_CONTAINER_HEIGHT - icon_height) / 2;
-
-  // Render each app icon into the app container
-  for (size_t i = 0; i < app_descriptors.size(); i++) {
-    AppDescriptor* descriptor = app_descriptors[i];
-
-    lv_obj_t* icon_container = lv_obj_create(_app_container);
-    lv_obj_set_size(icon_container, icon_width, icon_height);
-    lv_obj_set_pos(icon_container, x_offset - icon_width / 2, y_offset);
-    lv_obj_set_style_bg_opa(icon_container, LV_OPA_TRANSP, 0);
-    lv_obj_set_style_pad_all(icon_container, 0, 0);
-    // add a border for debugging
-    lv_obj_set_style_border_color(icon_container, lv_color_hex(0x000000), 0);
-    lv_obj_set_style_border_width(icon_container, 1, 0);
-
-    lv_obj_set_user_data(icon_container, descriptor);
-
-    descriptor->draw_icon(icon_container);
-
-    lv_obj_add_flag(icon_container, LV_OBJ_FLAG_CLICKABLE);
-    lv_obj_add_event_cb(icon_container, on_app_icon_clicked, LV_EVENT_CLICKED, _ui_handler);
-
-    x_offset += icon_spacing;
-  }
-
   return ESP_OK;
 }
 
-void RootLayout::show_back_button(void) {
+esp_err_t RootLayout::register_home_button_callback(lv_event_cb_t callback, void* user_data, lv_event_dsc_t** out_event_dsc) const {
-  if (_back_button) {
+  if (!home_button_) {
-    lv_obj_clear_flag(_back_button, LV_OBJ_FLAG_HIDDEN);
+    ESP_LOGE(TAG, "Home button not found in navigation bar");
+    return ESP_ERR_NOT_FOUND;
   }
+  if (!callback) {
+    ESP_LOGE(TAG, "Invalid argument: callback is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+  if (out_event_dsc == nullptr) {
+    ESP_LOGE(TAG, "Invalid argument: out_event_dsc is nullptr");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  *out_event_dsc = lv_obj_add_event_cb(home_button_, callback, LV_EVENT_CLICKED, user_data);
+
+  if (*out_event_dsc == nullptr) {
+    ESP_LOGE(TAG, "Failed to register home button callback");
+    return ESP_FAIL;
+  }
+
+  return ESP_OK;
 }
 
-void RootLayout::hide_back_button(void) {
+esp_err_t RootLayout::update_header(const std::string& title) const {
-  if (_back_button) {
+  if (!header_label_) {
-    lv_obj_add_flag(_back_button, LV_OBJ_FLAG_HIDDEN);
+    return ESP_ERR_INVALID_STATE;
-  }
-}
-
-void RootLayout::on_app_icon_clicked(lv_event_t* event) {
-  // Use the current target (the object the callback was attached to)
-  // instead of the event target, which may be a child (like a label).
-  lv_obj_t* icon_container = static_cast<lv_obj_t*>(lv_event_get_current_target(event));
-  UIHandler* handler = static_cast<UIHandler*>(lv_event_get_user_data(event));
-  AppDescriptor* descriptor = static_cast<AppDescriptor*>(lv_obj_get_user_data(icon_container));
-
-  if (!handler || !descriptor) {
-    ESP_LOGE(TAG, "Invalid event data in app icon click");
-    return;
   }
 
-  ESP_LOGI(TAG, "App icon clicked: %s", descriptor->get_name().c_str());
+  if (title.empty() == false) {
-  handler->switch_app(descriptor);
+    lv_label_set_text(header_label_, title.c_str());
-}
-
-void RootLayout::on_back_button_clicked(lv_event_t* event) {
-  UIHandler* handler = static_cast<UIHandler*>(lv_event_get_user_data(event));
-
-  if (!handler) {
-    ESP_LOGE(TAG, "Invalid handler in back button click");
-    return;
-  }
-
-  // Get the active app
-  UIApp* active_app = handler->get_active_app();
-  if (!active_app) {
-    ESP_LOGW(TAG, "Back button pressed but no active app");
-    return;
-  }
-
-  // Let the app handle the back button press
-  bool handled = active_app->on_back_button_pressed();
-
-  if (handled) {
-    ESP_LOGI(TAG, "Back button handled by app: %s", active_app->get_name());
   } else {
-    ESP_LOGI(TAG, "Back button not handled by app, returning to main screen");
+    lv_label_set_text(header_label_, "App");
-    handler->return_to_main_screen();
   }
+
+  return ESP_OK;
 }
 
-static void on_home_button_clicked(lv_event_t* event) {
+void RootLayout::on_keyboard_event_(void* handler_args, esp_event_base_t base, int32_t id, void* event_data) {
-  UIHandler* handler = static_cast<UIHandler*>(lv_event_get_user_data(event));
+  if (base != UI_EVENT_BASE) {
-
-  if (!handler) {
-    ESP_LOGE(TAG, "Invalid handler in home button click");
     return;
   }
 
-  handler->return_to_main_screen();
+  switch (id) {
+    case UI_EVENT_KEYBOARD_SHOWN:
+      hide_nav_bar();
+      break;
+
+    case UI_EVENT_KEYBOARD_HIDDEN:
+      show_nav_bar();
+      break;
+
+    default:
+      ESP_LOGW(TAG, "Unknown keyboard event ID: %ld", id);
+      break;
+  }
 }

main/ui/root_layout.h

@@ -1,138 +1,126 @@
 #pragma once
-
-#include "lvgl.h"
 #include "esp_err.h"
+#include "esp_event.h"
+#include "lvgl.h"
 #include <string>
 
-// Forward declaration
+// Forward declaration to avoid circular dependency
 class UIHandler;
 
-/**
- * @brief Root Layout Manager - manages the main screen layout
- *
- * The RootLayout class is responsible for:
- * - Creating and managing the main screen structure (header, app container, nav bar)
- * - Rendering app icons from the AppRegistry
- * - Managing the back button
- * - Updating header content
- */
 class RootLayout {
 public:
-  /**
+  RootLayout() = default;
-   * @brief Construct a new RootLayout object
+  ~RootLayout();
-   *
-   * @param ui_handler Pointer to the UIHandler (for callbacks)
-   */
-  RootLayout(UIHandler* ui_handler);
 
   /**
-   * @brief Initialize the layout
+   * @brief Initialize the root layout within the given parent object
    *
-   * Creates the main screen with header, app container, and navigation bar.
+   * Sets up the header, app container, and navigation bar.
    *
-   * @param parent Parent LVGL object to attach layout to
+   * @param parent Parent LVGL object to contain the layout
    * @return ESP_OK on success, error code otherwise
    */
-  esp_err_t init(lv_obj_t* parent);
+  esp_err_t init(lv_obj_t* parent, UIHandler* ui_handler);
 
   /**
-   * @brief Deinitialize the layout
+   * @brief Deinitialize the root layout
    *
-   * Cleans up all layout widgets.
+   * Cleans up references to layout components.
    *
    * @return ESP_OK on success, error code otherwise
    */
   esp_err_t deinit(void);
 
   /**
-   * @brief Render app icons in the navigation bar
+   * @brief Show the back button in the navigation bar
+   */
+  void show_back_button(void) const;
+
+  /**
+   * @brief Hide the back button in the navigation bar
+   */
+  void hide_back_button(void) const;
+
+  /**
+   * @brief Show the home button in the navigation bar
+   */
+  void show_home_button(void) const;
+
+  /**
+   * @brief Hide the home button in the navigation bar
+   */
+  void hide_home_button(void) const;
+
+  /**
+   * @brief Show navigation bar
    *
-   * Queries the AppRegistry for all registered apps and
+   */
-   * renders their icons in the navigation bar. Also creates
+  void show_nav_bar(void) const;
-   * the back button.
+
+  /**
+   * @brief Hide navigation bar
    *
+   */
+  void hide_nav_bar(void) const;
+
+
+
+
+  /**
+   * @brief Register a callback for back button presses
+   *
+   *
+   * @param callback
+   * @param user_data
+   * @param out_event_dsc
    * @return ESP_OK on success, error code otherwise
    */
-  esp_err_t render_app_icons(void);
+  esp_err_t register_back_button_callback(lv_event_cb_t callback, void* user_data, lv_event_dsc_t** out_event_dsc) const;
 
   /**
-   * @brief Update header with app name
+   * @brief Register a callback for home button presses
    *
-   * @param app_name Name to display in header (nullptr for default)
+   * @param callback
+   * @param user_data
+   * @param out_event_dsc
+   * @return ESP_OK on success, error code otherwise
    */
-  void update_header(std::string app_name);
+  esp_err_t register_home_button_callback(lv_event_cb_t callback, void* user_data, lv_event_dsc_t** out_event_dsc) const;
 
   /**
-   * @brief Show the back button
+   * @brief Update the header title text
-   */
-  void show_back_button(void);
-
-  /**
-   * @brief Hide the back button
-   */
-  void hide_back_button(void);
-
-  /**
-   * @brief Get the header object
    *
-   * @return lv_obj_t* pointer to the header container
+   * @param title New title text
+   * @return ESP_OK on success, error code otherwise
    */
-  lv_obj_t* get_header(void) const {
+  esp_err_t update_header(const std::string& title) const;
-    return _header;
-  }
 
   /**
-   * @brief Get the app container (where apps render)
+   * @brief Get the app container object, which holds the active app's UI
+   * Caller can add/remove app UI elements to/from this container.
+   * Caller must not delete this object directly or edit its layout properties.
    *
-   * @return lv_obj_t* pointer to the app container
+   * @return lv_obj_t*
    */
-  lv_obj_t* get_app_container(void) const {
+  lv_obj_t* get_app_container() const {
-    return _app_container;
+    return app_container_;
-  }
-
-  /**
-   * @brief Get the navigation bar object
-   *
-   * @return lv_obj_t* pointer to the navigation bar container
-   */
-  lv_obj_t* get_nav_bar(void) const {
-    return _nav_bar;
   }
 
 private:
-  UIHandler* _ui_handler = nullptr;      ///< Reference to UIHandler for callbacks
-  lv_obj_t* _header = nullptr;           ///< Header area (top)
-  lv_obj_t* _header_label = nullptr;     ///< Header text label
-  lv_obj_t* _app_container = nullptr;    ///< Container for app widgets (middle)
-  lv_obj_t* _nav_bar = nullptr;          ///< Navigation bar (bottom)
-  lv_obj_t* _back_button = nullptr;      ///< Back button in navigation bar
 
-  /**
+  // Event handler for keyboard show/hide events
-   * @brief Create the layout structure
+  void on_keyboard_event_(void* handler_args, esp_event_base_t base, int32_t id, void* event_data);
-   *
-   * Sets up header, app container, and navigation bar with
-   * appropriate dimensions and positioning.
-   *
-   * @param parent Parent object to attach layout to
-   * @return ESP_OK on success, error code otherwise
-   */
-  esp_err_t create_layout(lv_obj_t* parent);
 
-  /**
+  // layout objects
-   * @brief Handle app icon click event
+  // header
-   *
+  lv_obj_t* header_obj_ = nullptr;      ///< Header area object
-   * Static callback for LVGL event handling.
+  lv_obj_t* header_label_ = nullptr;  ///< Header title label
-   *
+  // app container
-   * @param event LVGL event object
+  lv_obj_t* app_container_ = nullptr;   ///< App container object
-   */
+  // navigation bar
-  static void on_app_icon_clicked(lv_event_t* event);
+  lv_obj_t* nav_bar_obj_ = nullptr;     ///< Navigation bar object
+  lv_obj_t* back_button_ = nullptr;     ///< Back button object
+  lv_obj_t* home_button_ = nullptr;    ///< Home button object
 
-  /**
+  esp_event_handler_instance_t keyboard_event_handler_instance_ = nullptr; ///< Event handler instance for keyboard events
-   * @brief Handle back button click event
-   *
-   * Static callback for LVGL event handling.
-   *
-   * @param event LVGL event object
-   */
-  static void on_back_button_clicked(lv_event_t* event);
 };

main/ui/ui_handler.cpp

@@ -1,131 +1,75 @@
 #include "ui/ui_handler.h"
-#include "ui/root_layout.h"
+#include "ui/apps/registry.h"
-#include "ui/app_registry.h"
 #include "esp_log.h"
-#include "lvgl.h"
+#include <algorithm>
 
 #define TAG "UIHandler"
 
-// Display dimensions from constants.h
+struct AppClickUserData {
-#define DISPLAY_WIDTH 800
+  UIHandler* ui_handler;
-#define DISPLAY_HEIGHT 480
+  std::string app_name;
+};
 
-// Layout dimensions
+UIHandler::~UIHandler() {
-#define HEADER_HEIGHT 40
+  deinit();
-#define NAV_BAR_HEIGHT 50
+  // Clean up all allocated AppClickUserData
-#define _APP_CONTAINERHEIGHT (DISPLAY_HEIGHT - HEADER_HEIGHT - NAV_BAR_HEIGHT)
+  for (void* data : app_click_user_data_) {
+    delete static_cast<AppClickUserData*>(data);
+  }
+  app_click_user_data_.clear();
+}
 
 esp_err_t UIHandler::init(void) {
-  ESP_LOGI(TAG, "Initializing UIHandler");
+  lv_obj_t* screen = lv_scr_act();
+  esp_err_t ret = ESP_OK;
 
-  // Create main screen
+  // Create main screen layout
-  _main_screen = lv_obj_create(NULL);
+  ret = create_main_screen_(screen);
-  if (!_main_screen) {
+  if (ret != ESP_OK) {
-    ESP_LOGE(TAG, "Failed to create main screen");
+    ESP_LOGE(TAG, "Failed to create main screen layout");
-    return ESP_FAIL;
+    return ret;
-  }
-  lv_obj_set_style_bg_color(_main_screen, lv_color_black(), 0);
-  lv_obj_set_size(_main_screen, DISPLAY_WIDTH, DISPLAY_HEIGHT);
-
-  // Create root layout
-  _root_layout = new RootLayout(this);
-  if (!_root_layout) {
-    ESP_LOGE(TAG, "Failed to allocate RootLayout");
-    return ESP_FAIL;
   }
 
-  if (_root_layout->init(_main_screen) != ESP_OK) {
+  // Initialize InteractionHandler with screen as parent (not app_container)
-    ESP_LOGE(TAG, "Failed to initialize root layout");
+  // so keyboard survives app switches
-    delete _root_layout;
+  ret = interaction_handler_.init(screen);
-    _root_layout = nullptr;
+  if (ret != ESP_OK) {
-    return ESP_FAIL;
+    ESP_LOGE(TAG, "Failed to initialize InteractionHandler");
+    return ret;
   }
 
-  // Render app icons from registry
+  // Show the main screen
-  if (_root_layout->render_app_icons() != ESP_OK) {
+  lv_scr_load(screen);
-    ESP_LOGW(TAG, "Failed to render app icons");
-  }
 
-  // Defer screen loading to prevent blocking during initialization
+  return ret;
-  // Use LVGL timer to load screen after allowing watchdog reset
-  lv_timer_create([](lv_timer_t* timer) {
-    lv_obj_t* screen = static_cast<lv_obj_t*>(lv_timer_get_user_data(timer));
-    ESP_LOGI("UIHandler", "Loading main screen via timer");
-    lv_screen_load(screen);
-    lv_timer_del(timer);
-    }, 100, _main_screen);  // 100ms delay to allow watchdog reset
-
-  ESP_LOGI(TAG, "UIHandler initialized successfully");
-  return ESP_OK;
 }
 
 esp_err_t UIHandler::deinit(void) {
-  ESP_LOGI(TAG, "Deinitializing UIHandler");
+  // Deinitialize current app if any
-
+  if (active_descriptor_) {
-  // Deinit current app
+    UIApp* app = active_descriptor_->get_app_instance();
-  if (_active_app) {
+    if (app) {
-    if (_active_app->deinit() != ESP_OK) {
+      esp_err_t ret = app->deinit();
-      ESP_LOGW(TAG, "Error deinitializing active app: %s", _active_app->get_name());
+      if (ret != ESP_OK) {
-    }
+        ESP_LOGE("UIHandler", "Failed to deinitialize current app");
-    _active_app = nullptr;
+        return ret;
-  }
-
-  // Delete shutdown app if cached
-  if (_shutdown_app) {
-    delete _shutdown_app;
-    _shutdown_app = nullptr;
-  }
-
-  // Clean up root layout
-  if (_root_layout) {
-    _root_layout->deinit();
-    delete _root_layout;
-    _root_layout = nullptr;
-  }
-
-  // Main screen will be cleaned up by LVGL
-  _main_screen = nullptr;
-
-  return ESP_OK;
-}
-
-esp_err_t UIHandler::switch_app(UIApp* app) {
-  if (!app) {
-    ESP_LOGE(TAG, "Cannot switch to null app");
-    return ESP_ERR_INVALID_ARG;
-  }
-
-  lv_obj_t* app_container = get_app_container();
-  if (!app_container) {
-    ESP_LOGE(TAG, "App container not initialized");
-    return ESP_FAIL;
-  }
-
-  ESP_LOGI(TAG, "Switching to app: %s", app->get_name());
-
-  // Deinit current app
-  if (_active_app) {
-    if (_active_app->deinit() != ESP_OK) {
-      ESP_LOGW(TAG, "Error deinitializing app: %s", _active_app->get_name());
       }
     }
-
+    active_descriptor_ = nullptr;
-  // Clear the app container
-  lv_obj_clean(app_container);
-
-  // Initialize new app
-  if (app->init(app_container) != ESP_OK) {
-    ESP_LOGE(TAG, "Failed to initialize app: %s", app->get_name());
-    _active_app = nullptr;
-    return ESP_FAIL;
   }
 
-  _active_app = app;
+  // Destroy main screen layout
+  esp_err_t ret = destroy_main_screen_();
+  if (ret != ESP_OK) {
+    ESP_LOGE("UIHandler", "Failed to destroy main screen layout");
+    return ret;
+  }
 
-  // Update header through RootLayout
+  // Deinitialize interaction handler
-  if (_root_layout) {
+  ret = interaction_handler_.deinit();
-    _root_layout->update_header(_active_app->get_name());
+  if (ret != ESP_OK) {
-    _root_layout->show_back_button();
+    ESP_LOGE("UIHandler", "Failed to deinitialize InteractionHandler");
+    return ret;
   }
 
   return ESP_OK;
@@ -133,76 +77,269 @@ esp_err_t UIHandler::switch_app(UIApp* app) {
 
 esp_err_t UIHandler::switch_app(AppDescriptor* app_descriptor) {
   if (!app_descriptor) {
-    ESP_LOGE(TAG, "Cannot switch to null app descriptor");
+    ESP_LOGE(TAG, "Invalid app descriptor");
     return ESP_ERR_INVALID_ARG;
   }
 
-  UIApp* app = app_descriptor->get_app_instance();
+  esp_err_t ret = ESP_OK;
-  if (!app) {
+
-    ESP_LOGE(TAG, "App descriptor has null app instance");
+  // Deinitialize current app if any
-    return ESP_ERR_INVALID_ARG;
+  if (active_descriptor_) {
+    UIApp* current_app = active_descriptor_->get_app_instance();
+    if (current_app) {
+      ret = current_app->deinit();
+      if (ret != ESP_OK) {
+        ESP_LOGE(TAG, "Failed to deinitialize current app");
       }
-
-  return switch_app(app);
-}
-
-void UIHandler::route_event(uint32_t event_type, void* event_data) {
-  if (_active_app) {
-    _active_app->handle_event(event_type, event_data);
     }
-}
-
-esp_err_t UIHandler::show_shutdown_screen(std::string message) {
-  ESP_LOGI(TAG, "Showing shutdown screen");
-
-  lv_obj_t* app_container = get_app_container();
-  if (!app_container) {
-    ESP_LOGE(TAG, "App container not initialized");
-    return ESP_FAIL;
   }
 
-  // Clear current app reference
-  _active_app = nullptr;
-
   // Clear the app container
+  lv_obj_t* app_container = root_layout_.get_app_container();
+  if (app_container) {
+    lv_obj_clean(app_container);
+  } else {
+    ESP_LOGE(TAG, "App container not available");
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  // Set the new app as active
+  active_descriptor_ = app_descriptor;
+
+  // Initialize the new app
+  UIApp* new_app = active_descriptor_->get_app_instance();
+  if (!new_app) {
+    ESP_LOGE(TAG, "App instance not available");
+    active_descriptor_ = nullptr;
+    return ESP_ERR_INVALID_STATE;
+  }
+
+  ret = new_app->init(app_container, &interaction_handler_);
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize app: %s", new_app->get_name().c_str());
+    active_descriptor_ = nullptr;
+    return ret;
+  }
+
+  // Update header with app name
+  ret = update_header_title(new_app->get_name());
+  if (ret != ESP_OK) {
+    ESP_LOGW(TAG, "Failed to update header title");
+  }
+
+  // Show back button when in an app
+  root_layout_.show_back_button();
+
+  ESP_LOGI(TAG, "Switched to app: %s", new_app->get_name().c_str());
+
+  return ESP_OK;
+}
+
+esp_err_t UIHandler::show_shutdown_screen(const std::string& message) {
+  // Deinitialize current app if any
+  if (active_descriptor_) {
+    UIApp* app = active_descriptor_->get_app_instance();
+    if (app) {
+      app->deinit();
+    }
+    active_descriptor_ = nullptr;
+  }
+
+  // Clear the app container
+  lv_obj_t* app_container = root_layout_.get_app_container();
+  if (app_container) {
     lv_obj_clean(app_container);
 
-  // Create shutdown message
+    // Create a simple shutdown message screen
-  lv_obj_t* shutdown_label = lv_label_create(app_container);
+    lv_obj_t* label = lv_label_create(app_container);
-  lv_label_set_text(shutdown_label, message.empty() ? "Shutting down..." : message.c_str());
+    if (message.empty()) {
-  lv_obj_set_style_text_color(shutdown_label, lv_color_white(), 0);
+      lv_label_set_text(label, "Shutting down...");
-  lv_obj_align(shutdown_label, LV_ALIGN_CENTER, 0, 0);
+    } else {
-
+      lv_label_set_text(label, message.c_str());
-  // Update header through RootLayout
-  if (_root_layout) {
-    _root_layout->update_header("System Shutdown");
     }
+    lv_obj_set_style_text_font(label, &lv_font_montserrat_14, 0);
+    lv_obj_center(label);
+  }
+
+  // Update header
+  update_header_title("System");
+
+  // Hide navigation buttons
+  root_layout_.hide_back_button();
+  root_layout_.hide_home_button();
+
+  ESP_LOGI(TAG, "Showing shutdown screen: %s", message.c_str());
 
   return ESP_OK;
 }
 
 esp_err_t UIHandler::return_to_main_screen(void) {
-  ESP_LOGI(TAG, "Returning to main screen");
+  esp_err_t ret = ESP_OK;
 
-  // Deinit current app
+  // Deinitialize current app if any
-  if (_active_app) {
+  if (active_descriptor_) {
-    if (_active_app->deinit() != ESP_OK) {
+    UIApp* app = active_descriptor_->get_app_instance();
-      ESP_LOGW(TAG, "Error deinitializing app: %s", _active_app->get_name());
+    if (app) {
+      ret = app->deinit();
+      if (ret != ESP_OK) {
+        ESP_LOGE(TAG, "Failed to deinitialize app");
+        return ret;
       }
-    _active_app = nullptr;
+    }
+    active_descriptor_ = nullptr;
   }
 
   // Clear the app container
-  lv_obj_t* app_container = get_app_container();
+  lv_obj_t* app_container = root_layout_.get_app_container();
   if (app_container) {
     lv_obj_clean(app_container);
+
+    // TODO: Display app launcher/home screen with app icons
+    // For now, just show a placeholder message
+    lv_obj_t* label = lv_label_create(app_container);
+    lv_label_set_text(label, "Home Screen\n\nApp icons will go here");
+    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);
+    lv_obj_center(label);
+  } else {
+    ESP_LOGE(TAG, "App container not available");
+    return ESP_ERR_INVALID_STATE;
   }
 
-  // Update header and hide back button through RootLayout
+  // Update header
-  if (_root_layout) {
+  ret = update_header_title("Home");
-    _root_layout->update_header("");
+  if (ret != ESP_OK) {
-    _root_layout->hide_back_button();
+    ESP_LOGW(TAG, "Failed to update header title");
   }
 
+  // Hide back button on home screen
+  root_layout_.hide_back_button();
+
+  ESP_LOGI(TAG, "Returned to main screen");
+
   return ESP_OK;
 }
+
+esp_err_t UIHandler::update_header_title(const std::string& title) {
+  return root_layout_.update_header(title);
+}
+
+//
+// Private methods
+//
+
+void UIHandler::on_back_button_pressed_(void) {
+
+  if (active_descriptor_) {
+    UIApp* app = active_descriptor_->get_app_instance();
+    if (app) {
+      bool handled = app->on_back_button_pressed();
+      if (!handled) {
+        // App didn't handle it, return to main screen
+        return_to_main_screen();
+      }
+    }
+  } else {
+    ESP_LOGW(TAG, "Back button pressed but no active app");
+  }
+}
+
+esp_err_t UIHandler::create_main_screen_(lv_obj_t* parent) {
+  esp_err_t ret = ESP_OK;
+
+  // Initialize root layout
+  ret = root_layout_.init(parent, this);
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize RootLayout");
+    return ret;
+  }
+
+  // render all apps
+
+  for (const auto& [name, descriptor] : AppRegistry::instance()) {
+    lv_obj_t* app_icon_container = lv_obj_create(root_layout_.get_app_container());
+    lv_obj_set_size(app_icon_container, 100, 100);
+    lv_obj_set_style_pad_all(app_icon_container, 10, 0);
+    lv_obj_set_flex_flow(app_icon_container, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(app_icon_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+
+    // Draw the app icon
+    descriptor->draw_icon(app_icon_container);
+
+    // App name label
+    lv_obj_t* label = lv_label_create(app_icon_container);
+    lv_label_set_text(label, name.c_str());
+    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);
+
+    // Center the icon container
+    lv_obj_center(app_icon_container);
+
+    // Create and track user data for the callback
+    auto* click_data = new AppClickUserData { this, name };
+    app_click_user_data_.push_back(click_data);
+    
+    // Register click event to switch to the app
+    lv_obj_add_event_cb(app_icon_container,
+      [](lv_event_t* e) {
+        AppClickUserData* user_data = static_cast<AppClickUserData*>(lv_event_get_user_data(e));
+        UIHandler* ui_handler = user_data->ui_handler;
+        std::string app_name = user_data->app_name;
+
+        AppDescriptor* descriptor = AppRegistry::instance()[app_name];
+        if (descriptor) {
+          ui_handler->switch_app(descriptor);
+        } else {
+          ESP_LOGE(TAG, "App descriptor not found for app: %s", app_name.c_str());
+        }
+      },
+      LV_EVENT_CLICKED,
+      click_data
+    );
+  }
+
+  // Register back button callback
+  lv_event_dsc_t* back_event_dsc = nullptr;
+  ret = root_layout_.register_back_button_callback(
+    [](lv_event_t* e) {
+      UIHandler* ui_handler = static_cast<UIHandler*>(lv_event_get_user_data(e));
+      ui_handler->on_back_button_pressed_();
+    },
+    this,
+    &back_event_dsc
+  );
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register back button callback");
+    return ret;
+  }
+
+  // Register home button callback
+  lv_event_dsc_t* home_event_dsc = nullptr;
+  ret = root_layout_.register_home_button_callback(
+    [](lv_event_t* e) {
+      UIHandler* ui_handler = static_cast<UIHandler*>(lv_event_get_user_data(e));
+      ui_handler->return_to_main_screen();
+    },
+    this,
+    &home_event_dsc
+  );
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register home button callback");
+    return ret;
+  }
+
+  ESP_LOGI(TAG, "Main screen layout created successfully");
+
+  return ESP_OK;
+}
+
+esp_err_t UIHandler::destroy_main_screen_(void) {
+  esp_err_t ret = root_layout_.deinit();
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to deinitialize RootLayout");
+    return ret;
+  }
+
+  ESP_LOGI(TAG, "Main screen layout destroyed successfully");
+  return ESP_OK;
+}
+
+

main/ui/ui_handler.h

@@ -1,12 +1,13 @@
 #pragma once
 
-#include "ui_app.h"
-#include "app_registry.h"
-#include "root_layout.h"
 #include "esp_err.h"
-
+#include "ui/apps/app.h"
-// Forward declaration
+#include "ui/events.h"
-class RootLayout;
+#include "ui/root_layout.h"
+#include "ui/interaction_handler.h"
+#include "lvgl.h"
+#include <memory>
+#include <vector>
 
 /**
  * @brief UI Handler - manages app lifecycle and rendering
@@ -20,6 +21,10 @@ class RootLayout;
  */
 class UIHandler {
 public:
+
+  UIHandler() = default;
+  ~UIHandler();
+
   /**
    * @brief Initialize the UI system with default layout
    *
@@ -28,6 +33,10 @@ public:
    * - App container (middle)
    * - Navigation bar (bottom)
    *
+   * And display the main screen.
+   *
+   * And initializes the InteractionHandler, callbacks, etc.
+   *
    * @return ESP_OK on success, error code otherwise
    */
   esp_err_t init(void);
@@ -42,46 +51,17 @@ public:
   esp_err_t deinit(void);
 
   /**
-   * @brief Switch to a new app
+   * @brief Switch to a new app by its descriptor
    *
    * Deinitializes the current app (if any), initializes the new app,
-   * and updates the display.
+   * and updates the display. The descriptor must remain valid in the
+   * AppRegistry for the lifetime of the app.
    *
-   * @param app Pointer to the new app to switch to
+   * @param app_descriptor Pointer to the app descriptor (managed by AppRegistry)
-   * @return ESP_OK on success, error code otherwise
-   */
-  esp_err_t switch_app(UIApp* app);
-
-  /**
-   * @brief Switch to an app by its descriptor
-   *
-   * Convenience method that extracts the UIApp from the descriptor
-   * and calls switch_app().
-   *
-   * @param app_descriptor Pointer to the app descriptor
    * @return ESP_OK on success, error code otherwise
    */
   esp_err_t switch_app(AppDescriptor* app_descriptor);
 
-  /**
-   * @brief Get the currently active app
-   *
-   * @return Pointer to the active UIApp, or nullptr if none
-   */
-  UIApp* get_active_app(void) const {
-    return _active_app;
-  }
-
-  /**
-   * @brief Route a system event to the active app
-   *
-   * If an app is active, this forwards the event to it.
-   *
-   * @param event_type Type/ID of the event
-   * @param event_data Optional event data payload
-   */
-  void route_event(uint32_t event_type, void* event_data = nullptr);
-
   /**
    * @brief Display shutdown screen
    *
@@ -91,7 +71,7 @@ public:
    * @param message Optional message to display (e.g., "Shutting down...")
    * @return ESP_OK on success, error code otherwise
    */
-  esp_err_t show_shutdown_screen(std::string message = "");
+  esp_err_t show_shutdown_screen(const std::string& message = "");
 
   /**
    * @brief Get the main screen object
@@ -99,35 +79,10 @@ public:
    * @return lv_obj_t* pointer to the main screen
    */
   lv_obj_t* get_main_screen(void) const {
-    return _main_screen;
+    return main_screen_;
   }
 
-  /**
+  esp_err_t update_header_title(const std::string& title);
-   * @brief Get the app container (where apps render)
-   *
-   * @return lv_obj_t* pointer to the app container
-   */
-  lv_obj_t* get_app_container(void) const {
-    return _root_layout ? _root_layout->get_app_container() : nullptr;
-  }
-
-  /**
-   * @brief Get the header object
-   *
-   * @return lv_obj_t* pointer to the header container
-   */
-  lv_obj_t* get_header(void) const {
-    return _root_layout ? _root_layout->get_header() : nullptr;
-  }
-
-  /**
-   * @brief Get the navigation bar object
-   *
-   * @return lv_obj_t* pointer to the navigation bar container
-   */
-  lv_obj_t* get_nav_bar(void) const {
-    return _root_layout ? _root_layout->get_nav_bar() : nullptr;
-  }
 
   /**
    * @brief Return to main screen (deinit app and show app icons)
@@ -140,8 +95,28 @@ public:
   esp_err_t return_to_main_screen(void);
 
 private:
-  lv_obj_t* _main_screen = nullptr;    ///< Root screen
+
-  RootLayout* _root_layout = nullptr;  ///< Root layout manager
+  // Handle back button press, route to active app if any
-  UIApp* _active_app = nullptr;        ///< Currently active app
+  void on_back_button_pressed_(void);
-  UIApp* _shutdown_app = nullptr;      ///< Cached shutdown app
+
+  // Helper to create the main screen layout
+  esp_err_t create_main_screen_(lv_obj_t* parent);
+
+  // Helper to destroy the main screen layout
+  esp_err_t destroy_main_screen_(void);
+
+  // delete copy constructor and assignment operator
+  // to prevent copying of the UIHandler instance
+  UIHandler(const UIHandler&) = delete;
+  UIHandler& operator=(const UIHandler&) = delete;
+
+
+  InteractionHandler interaction_handler_;  ///< Manages user interactions
+
+  lv_obj_t* main_screen_ = nullptr;    ///< Root screen
+  RootLayout root_layout_;            ///< Main screen layout manager
+  AppDescriptor* active_descriptor_ = nullptr;  ///< Currently active app descriptor (managed by AppRegistry)
+  
+  // Track allocated user data for cleanup
+  std::vector<void*> app_click_user_data_;
 };

main/ui/widgets/button.cpp

@@ -0,0 +1,12 @@
+#include "ui/widgets/button.h"
+
+lv_obj_t* button_create(lv_obj_t* parent) {
+  lv_obj_t* button = lv_button_create(parent);
+  lv_obj_set_style_bg_color(button, lv_color_white(), 0);
+  lv_obj_set_style_border_color(button, lv_color_black(), 0);
+  lv_obj_set_style_border_width(button, 2, 0);
+  lv_anim_delete(button, nullptr);
+
+  return button;
+}
+

main/ui/widgets/button.h

@@ -0,0 +1,4 @@
+#pragma once
+#include "lvgl.h"
+
+lv_obj_t* button_create(lv_obj_t* parent);

main/ui/widgets/textarea.cpp

@@ -0,0 +1,10 @@
+#include "ui/widgets/textarea.h"
+
+lv_obj_t* textarea_create(lv_obj_t* parent) {
+  lv_obj_t* textarea = lv_textarea_create(parent);
+  // disable animations for cursor and selection for instant response
+  lv_obj_set_style_anim_time(textarea, 0, LV_PART_CURSOR | LV_STATE_FOCUSED);
+
+  return textarea;
+}
+

main/ui/widgets/textarea.h

@@ -0,0 +1,4 @@
+#pragma once
+#include "lvgl.h"
+
+lv_obj_t* textarea_create(lv_obj_t* parent);

main/ui/widgets/widgets.h

@@ -0,0 +1,4 @@
+#pragma once
+
+#include "main/ui/widgets/button.h"
+#include "main/ui/widgets/textarea.h"

partitions.csv

@@ -8,5 +8,5 @@ phy_init, data, phy,      ,         0x1000,
 # OTA Partitions 10MB
 ota_0,    app,  ota_0,    ,         0xA00000,
 ota_1,    app,  ota_1,    ,         0xA00000,
-# SPIFFS 11MB
+# LittleFS 11MB
-storage,  data, spiffs,   ,         0xB00000,
+storage,  data, littlefs,     ,         0xB00000,

sdkconfig.default

@@ -587,10 +587,10 @@ CONFIG_ESPTOOLPY_MONITOR_BAUD=115200
 # CONFIG_PARTITION_TABLE_SINGLE_APP is not set
 # CONFIG_PARTITION_TABLE_SINGLE_APP_LARGE is not set
 # CONFIG_PARTITION_TABLE_TWO_OTA is not set
-CONFIG_PARTITION_TABLE_TWO_OTA_LARGE=y
+# CONFIG_PARTITION_TABLE_TWO_OTA_LARGE is not set
-# CONFIG_PARTITION_TABLE_CUSTOM is not set
+CONFIG_PARTITION_TABLE_CUSTOM=y
 CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions.csv"
-CONFIG_PARTITION_TABLE_FILENAME="partitions_two_ota_large.csv"
+CONFIG_PARTITION_TABLE_FILENAME="partitions.csv"
 CONFIG_PARTITION_TABLE_OFFSET=0x8000
 CONFIG_PARTITION_TABLE_MD5=y
 # end of Partition Table
@@ -1996,7 +1996,7 @@ CONFIG_LITTLEFS_MALLOC_STRATEGY_DEFAULT=y
 # CONFIG_LITTLEFS_MALLOC_STRATEGY_SPIRAM is not set
 CONFIG_LITTLEFS_ASSERTS=y
 # CONFIG_LITTLEFS_MMAP_PARTITION is not set
-CONFIG_LITTLEFS_WDT_RESET=y
+# CONFIG_LITTLEFS_WDT_RESET is not set
 # end of LittleFS
 
 #
@@ -2303,10 +2303,10 @@ CONFIG_LV_USE_WIN=y
 #
 CONFIG_LV_USE_THEME_DEFAULT=y
 # CONFIG_LV_THEME_DEFAULT_DARK is not set
-CONFIG_LV_THEME_DEFAULT_GROW=y
+# CONFIG_LV_THEME_DEFAULT_GROW is not set
-CONFIG_LV_THEME_DEFAULT_TRANSITION_TIME=80
+CONFIG_LV_THEME_DEFAULT_TRANSITION_TIME=0
 CONFIG_LV_USE_THEME_SIMPLE=y
-# CONFIG_LV_USE_THEME_MONO is not set
+CONFIG_LV_USE_THEME_MONO=y
 # end of Themes
 
 #
@@ -2338,7 +2338,7 @@ CONFIG_LV_FS_DEFAULT_DRIVER_LETTER=0
 # CONFIG_LV_USE_GIF is not set
 # CONFIG_LV_BIN_DECODER_RAM_LOAD is not set
 # CONFIG_LV_USE_RLE is not set
-# CONFIG_LV_USE_QRCODE is not set
+CONFIG_LV_USE_QRCODE=y
 # CONFIG_LV_USE_BARCODE is not set
 # CONFIG_LV_USE_FREETYPE is not set
 # CONFIG_LV_USE_TINY_TTF is not set