feat: Introduce initial web frontend and backend services, and generalize directory configuration in docker-compose.

frontend/app.js

@@ -1400,7 +1400,7 @@
     vaultsToShow.forEach((v) => {
       const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [
         icon("chevron-right", 14),
-        icon("database", 16),
+        getVaultIcon(v.name, 16),
         document.createTextNode(` ${v.name} `),
         smallBadge(v.file_count),
       ]);
@@ -1457,7 +1457,7 @@
       // Sidebar tree entry
       const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [
         icon("chevron-right", 14),
-        icon("database", 16),
+        getVaultIcon(v.name, 16),
         document.createTextNode(` ${v.name} `),
         smallBadge(v.file_count),
       ]);
@@ -1736,7 +1736,7 @@
       entries.sort((a, b) => a.path.localeCompare(b.path, undefined, { sensitivity: "base" }));
 
       const vaultHeader = el("div", { class: "tree-item vault-item filter-results-header", "data-vault": vaultName }, [
-        icon("database", 16),
+        getVaultIcon(vaultName, 16),
         document.createTextNode(` ${vaultName} `),
         smallBadge(entries.length),
       ]);
@@ -3296,6 +3296,46 @@
     return s;
   }
 
+  function getVaultIcon(vaultName, size = 16) {
+    const v = allVaults.find((val) => val.name === vaultName);
+    const type = v ? v.type : "VAULT";
+
+    if (type === "DIR") {
+      const i = icon("folder", size);
+      i.style.color = "#eab308"; // yellow tint
+      return i;
+    } else {
+      const purple = "#8b5cf6";
+      const svgNS = "http://www.w3.org/2000/svg";
+      const svg = document.createElementNS(svgNS, "svg");
+      svg.setAttribute("xmlns", svgNS);
+      svg.setAttribute("width", size);
+      svg.setAttribute("height", size);
+      svg.setAttribute("viewBox", "0 0 24 24");
+      svg.setAttribute("fill", "none");
+      svg.setAttribute("stroke", purple);
+      svg.setAttribute("stroke-width", "2");
+      svg.setAttribute("stroke-linecap", "round");
+      svg.setAttribute("stroke-linejoin", "round");
+      svg.classList.add("icon");
+      
+      const path1 = document.createElementNS(svgNS, "path");
+      path1.setAttribute("d", "M6 3h12l4 6-10 12L2 9z");
+      const path2 = document.createElementNS(svgNS, "path");
+      path2.setAttribute("d", "M11 3 8 9l4 12");
+      const path3 = document.createElementNS(svgNS, "path");
+      path3.setAttribute("d", "M12 21l4-12-3-6");
+      const path4 = document.createElementNS(svgNS, "path");
+      path4.setAttribute("d", "M2 9h20");
+      
+      svg.appendChild(path1);
+      svg.appendChild(path2);
+      svg.appendChild(path3);
+      svg.appendChild(path4);
+      return svg;
+    }
+  }
+
   function makeBreadcrumbSpan(text, onClick) {
     const s = document.createElement("span");
     s.textContent = text;