ANDROID: replace MUI based portal with native js implementation

Author: Chris Warren-Smith

ChangeLog

@@ -1,3 +1,6 @@
+2025-10-14 (12.32)
+	ANDROID: replace react/mui based portal with native javascript solution
+
 2025-09-11 (12.31)
 	ANDROID: Implemented support for editing with the system keypad
 

src/platform/android/Makefile.am

@@ -58,4 +58,4 @@ library:
 
 # launch WebServerTest in intellij
 start-ui:
-	(cd app/src/main/assets/webui && valgrind ../../../../../../web/sbasicw -p 3000 -a 'api' -o 'http://localhost:8080')
+	(cd app/src/main/assets/webui && valgrind --leak-check=full ../../../../../../web/sbasicw -p 3000 -a 'api' -o 'http://localhost:8080')

src/platform/android/app/src/main/assets/webui/index.html

@@ -14,7 +14,20 @@
       <h1>SmallBASIC</h1>
       <a href="https://smallbasic.github.io" target="_blank">smallbasic.github.io</a>
     </div>
+    <div class="toolbar hidden" id="toolbar">
+      <button class="btn btn-small btn-icon" id="upload-btn">
+        📤 UPLOAD
+      </button>
+      <button class="btn btn-small btn-icon" id="download-btn" disabled>
+        📥 DOWNLOAD
+      </button>
+      <button class="btn btn-small btn-icon" id="delete-btn" disabled>
+        🗑️ DELETE
+      </button>
+      <div id="selection-info" style="margin-left: auto; color: #666;"></div>
+    </div>
     <div class="main-content" id="main-content"></div>
     <input type="file" id="file-upload" multiple class="hidden">
+    <a class="hidden" id="file-download"></a>
   </body>
 </html>

src/platform/android/app/src/main/assets/webui/main.css

@@ -36,7 +36,7 @@ body {
 }
 
 .main-content {
-  height: calc(100vh - 88px);
+  height: calc(100vh - 8em);
   width: 100%;
   overflow: auto;
 }

src/platform/android/app/src/main/assets/webui/main.js

@@ -50,18 +50,6 @@
 
   function renderFileList(container) {
     container.innerHTML = `
-      <div class="toolbar">
-        <button class="btn btn-small btn-icon" id="upload-btn">
-          📤 UPLOAD
-        </button>
-        <button class="btn btn-small btn-icon" id="download-btn" disabled>
-          📥 DOWNLOAD
-        </button>
-        <button class="btn btn-small btn-icon" id="delete-btn" disabled>
-          🗑️ DELETE
-        </button>
-        <div id="selection-info" style="margin-left: auto; color: #666;"></div>
-      </div>
       <div class="table-container">
         <table>
           <thead>
@@ -87,6 +75,9 @@
       </div>
     `;
 
+    const toolbar = document.getElementById('toolbar');
+    toolbar.classList.remove('hidden');
+
     renderTableRows();
     updateToolbarState();
     setupFileListEventListeners();
@@ -396,7 +387,7 @@
       params = fileParams.join('&');
     }
 
-    const link = document.createElement('a');
+    const link = document.getElementById('file-download');
     link.href = `./api/download?${params}`;
     link.download = filename;
     link.click();

src/platform/web/main.cpp

@@ -13,13 +13,16 @@
 #include <cstdlib>
 #include <cstring>
 #include <cstdio>
+#include <string>
 
 #include "include/osd.h"
 #include "common/sbapp.h"
 #include "common/device.h"
 #include "platform/web/canvas.h"
 #include "platform/web/proxy.h"
 
+using namespace std;
+
 static Canvas g_canvas;
 static uint32_t g_start = 0;
 static uint32_t g_maxTime = 2000;
@@ -29,8 +32,8 @@ static bool g_json = false;
 static char *execBas = nullptr;
 static MHD_Connection *g_connection;
 static StringList g_cookies;
-static String g_path;
-static String g_data;
+static string g_path;
+static string g_data;
 
 static struct option OPTIONS[] = {
   {"file-permitted", no_argument,       nullptr, 'f'},

src/platform/web/proxy.cpp

@@ -8,12 +8,12 @@
 
 #include <config.h>
 
+#include <microhttpd.h>
+#include <curl/curl.h>
 #include <cstring>
 #include <string>
 #include <vector>
 #include <sstream>
-#include <microhttpd.h>
-#include <curl/curl.h>
 
 constexpr int BUFFER_SIZE = 128;
 static const char *g_path = nullptr;
@@ -43,6 +43,20 @@ static MHD_Result get_cookies(void *cls, enum MHD_ValueKind kind, const char *ke
   return MHD_YES;
 }
 
+// reads the microhttpd request URL args
+static MHD_Result get_url_arg(void *cls, enum MHD_ValueKind kind, const char *key, const char *value) {
+  auto *args = static_cast<string*>(cls);
+  if (key && value) {
+    if (!(*args).empty()) {
+      *args += "&";
+    }
+    *args += key;
+    *args += "=";
+    *args += value;
+  }
+  return MHD_YES;
+}
+
 // copy the curl proxy cookies back to the microhttpd response
 static void set_cookies(MHD_Response *response, curl_slist *cookies) {
   // assumes cookies use the netscape 7 field tab separated format
@@ -108,6 +122,12 @@ MHD_Response *proxy_request(MHD_Connection *connection, const char *path, const
   string url;
   url.append(g_host).append("/").append(path);
 
+  string url_args;
+  MHD_get_connection_values(connection, MHD_GET_ARGUMENT_KIND, get_url_arg, &url_args);
+  if (!url_args.empty()) {
+    url.append("?").append(url_args);
+  }
+
   string response;
   curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, write_callback);
   curl_easy_setopt(curl, CURLOPT_WRITEDATA, &response);
@@ -131,6 +151,9 @@ MHD_Response *proxy_request(MHD_Connection *connection, const char *path, const
     set_cookies(result, receiveCookies);
   }
 
+  if (receiveCookies) {
+    curl_slist_free_all(receiveCookies);
+  }
   return result;
 }