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/change-password-component.ts

@@ -21,19 +21,26 @@ const component: ClosureComponent<Attrs> = () => {
       const form = [
         m(
           "p",
-          m("label", { for: "username" }, "Username"),
-          m("input", {
-            name: "username",
-            type: "text",
-            value: vnode.state["username"],
-            disabled: !!username,
-            oninput: (e) => {
-              vnode.state["username"] = e.target.value;
+          m(
+            "label.block text-sm font-semibold text-stone-700 mt-2 mb-1",
+            { for: "username" },
+            "Username",
+          ),
+          m(
+            "input.shadow-sm focus:ring-cyan-500 focus:border-cyan-500 block sm:text-sm border-stone-300 rounded-md",
+            {
+              name: "username",
+              type: "text",
+              value: vnode.state["username"],
+              disabled: !!username,
+              oninput: (e) => {
+                vnode.state["username"] = e.target.value;
+              },
+              oncreate: (_vnode) => {
+                (_vnode.dom as HTMLSelectElement).focus();
+              },
             },
-            oncreate: (_vnode) => {
-              (_vnode.dom as HTMLSelectElement).focus();
-            },
-          }),
+          ),
         ),
       ];
 
@@ -48,31 +55,38 @@ const component: ClosureComponent<Attrs> = () => {
         form.push(
           m(
             "p",
-            m("label", { for: f }, l),
-            m("input", {
-              name: f,
-              type: "password",
-              value: vnode.state[f],
-              oninput: (e) => {
-                vnode.state[f] = e.target.value;
+            m(
+              "label.block text-sm font-semibold text-stone-700 mt-2 mb-1",
+              { for: f },
+              l,
+            ),
+            m(
+              "input.shadow-sm focus:ring-cyan-500 focus:border-cyan-500 block sm:text-sm border-stone-300 rounded-md",
+              {
+                name: f,
+                type: "password",
+                value: vnode.state[f],
+                oninput: (e) => {
+                  vnode.state[f] = e.target.value;
+                },
               },
-            }),
+            ),
           ),
         );
       }
 
       const submit = m(
-        "button.primary",
+        "button.ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500",
         {
           type: "submit",
         },
         "Change password",
       ) as VnodeDOM;
 
-      form.push(m(".actions-bar", submit));
+      form.push(m("div.flex justify-end mt-5", submit));
 
       const children = [
-        m("h1", "Change password"),
+        m("h2.text-lg leading-6 font-medium text-stone-900", "Change password"),
         m(
           "form",
           {