feat(ui): redesign UI with Tailwind CSS, CodeMirror 6, and new layout

- Replace all hand-written CSS with Tailwind utility classes
- Upgrade CodeMirror 5 to CodeMirror 6 (scoped @codemirror/* packages)
- Redesign layout with responsive sidebar navigation using JSX/Mithril
- Flatten admin routes (e.g. /admin/presets -> /presets)
- Add "remember me" login option with 2-week persistent cookie
- Add delete confirmation dialogs across admin pages
- Upgrade esbuild from 0.21 to 0.27 and update browser targets
- Add Inter and Roboto Mono variable fonts with subset script

ui/overview-page.ts

@@ -41,28 +41,43 @@ export const component: ClosureComponent = (): Component => {
       document.title = "Overview - GenieACS";
       const children = [];
       for (const group of Object.values(GROUPS)) {
-        if (group["label"])
+        if (group["label"]) {
           children.push(
-            m("h1", store.evaluateExpression(group["label"], null)),
+            m(
+              "h1.text-xl font-medium text-stone-900 mb-5",
+              store.evaluateExpression(group["label"], null),
+            ),
           );
+        }
 
         const groupChildren = [];
         for (const chartName of Object.values(group["charts"]) as string[]) {
           const chart = vnode.attrs["charts"][chartName];
           const chartChildren = [];
-          if (chart.label)
+          if (chart.label) {
             chartChildren.push(
-              m("h2", store.evaluateExpression(chart.label, null)),
+              m(
+                "h2.text-lg font-semibold text-stone-700 truncate mb-5 text-center",
+                store.evaluateExpression(chart.label, null),
+              ),
             );
+          }
 
           const attrs = {};
           attrs["chart"] = chart;
           chartChildren.push(m(pieChartComponent, attrs));
 
-          groupChildren.push(m(".overview-chart", chartChildren));
+          groupChildren.push(
+            m(
+              "div.p-4 bg-white shadow-sm rounded-lg sm:p-6 sm:px-8",
+              chartChildren,
+            ),
+          );
         }
 
-        children.push(m(".overview-chart-group", groupChildren));
+        children.push(
+          m("div.flex justify-center mt-5 mb-10 gap-x-10", groupChildren),
+        );
       }
 
       return children;