FILES: Got everything working except Tornado seems to escape my HTML output, works if you set the output to the DOM and run the script below it.

app/classes/shared/helpers.py

@@ -454,6 +454,18 @@ class Helpers:
 
         return data
 
+    @staticmethod
+    def generate_tree(folder, html=""):
+        for filename in os.listdir(folder):
+            print(filename)
+            rel = os.path.join(folder, filename)
+            if os.path.isdir(rel):
+                html += '<li>\n<span class="tree-caret">{}</span>\n<ul class="tree-nested">'.format(filename)
+                html += helper.generate_tree(rel)
+                html += '</ul>'
+            else:
+                html += '<li>{}</li>'.format(filename)
+        return html
 
 
 helper = Helpers()

app/classes/web/panel_handler.py

@@ -62,8 +62,23 @@ class PanelHandler(BaseHandler):
         elif page == 'file_edit':
             template = "panel/file_edit.html"
 
-        elif page == 'files_menu':
-            template = "panel/files_menu.html"
+        elif page == 'files':
+            server_id = self.get_argument('id', None)
+
+            if server_id is None:
+                self.redirect("/panel/error?error=Invalid Server ID")
+                return False
+            else:
+                server_id = bleach.clean(server_id)
+
+                # does this server id exist?
+                if not db_helper.server_id_exists(server_id):
+                    self.redirect("/panel/error?error=Invalid Server ID")
+                    return False
+
+            page_data['tree_html'] = helper.generate_tree(db_helper.get_server_data_by_id(server_id)['path'])
+
+            template = "panel/files.html"
 
         elif page == "remove_server":
             server_id = self.get_argument('id', None)

app/frontend/templates/main_menu.html

@@ -64,6 +64,14 @@
             </li>
             {% end %}
 
+            <!--
+            <li class="nav-item">
+              <a class="nav-link" href="/panel/files?id=1">
+                <i class="fas fa-copy"></i> &nbsp;
+                <span class="menu-title">Files Test</span>
+              </a>
+            </li>-->
+
 
           </ul>
         </nav>

app/frontend/templates/panel/files.html

@@ -27,7 +27,68 @@
 
   <div class="row">
 
-    <div class="col-sm-12 grid-margin">
+    <div class="col-md-6">
+      <noscript>
+        Some functionality does not work without JavaScript.
+      </noscript>
+      <ul class="tree-view">
+        <li>
+          <span class="tree-caret">Files</span>
+          <ul class="tree-nested">
+            {{ data['tree_html'] }}
+
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <style>
+       /* Remove default bullets */
+      .tree-view {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      /* Style the caret/arrow */
+      .tree-caret {
+        cursor: pointer;
+        user-select: none; /* Prevent text selection */
+      }
+
+      /* Create the caret/arrow with a unicode, and style it */
+      .tree-caret::before {
+        content: "\25B6";
+        color: white;
+        display: inline-block;
+        margin-right: 6px;
+      }
+
+      /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+      .tree-caret-down::before {
+        transform: rotate(90deg);
+      }
+
+      /* Hide the nested list */
+      .tree-nested {
+        display: none;
+      }
+    </style>
+    <div class="col-6">
+    </div>
+
+    <script>
+      var toggler = document.getElementsByClassName("tree-caret");
+      var i;
+
+      for (i = 0; i < toggler.length; i++) {
+        toggler[i].addEventListener("click", function() {
+          this.parentElement.querySelector(".tree-nested").classList.toggle("d-block");
+          this.classList.toggle("tree-caret-down");
+        });
+      }
+    </script>
+
+    <!-- <div class="col-sm-12 grid-margin">
       <div class="card">
         <div class="card-body">
 
@@ -57,7 +118,7 @@
               </span>
             </li>
 
-            <!--
+            <a!--
 
             File:
             <li class="list-group-item d-flex justify-content-between align-items-center"
@@ -87,12 +148,12 @@
               </span>
             </li>
 
-            -->
+            --a>
           </ul>
 
         </div>
       </div>
-    </div>
+    </div> -->
   </div>