Replace hotwire with htmx

In the process, also improve the feedback from the import/add feed
forms.

I also replaced the frontend code to replace utc timestamps with local
time strings with @hotwired/stimulus with vanilla js.

frontend/css/styles.css

@@ -156,7 +156,7 @@ form.feed-form .form-grid button {
   grid-column: 3 / 4;
 }
 
-ul#add-feed-messages {
+ul.stream-messages {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -164,7 +164,7 @@ ul#add-feed-messages {
   white-space: nowrap;
 }
 
-ul#add-feed-messages li {
+ul.stream-messages li {
   overflow: hidden;
   white-space: no-wrap;
   text-overflow: ellipsis;

frontend/js/index.ts

@@ -1,9 +1,4 @@
-import { Application } from "@hotwired/stimulus";
-
-import LocalTimeController from "./local_time_controller";
-
 // import CSS so it gets named with a content hash that busts caches
 import "../css/styles.css";
 
-window.Stimulus = Application.start();
-window.Stimulus.register("local-time", LocalTimeController);
+import "./localTimeController";

frontend/js/localTimeController.ts

@@ -0,0 +1,24 @@
+function convertTimeElements() {
+  const timeElements = document.querySelectorAll('time.local-time');
+  timeElements.forEach((element) => {
+    const utcString = element.getAttribute("datetime");
+    if (utcString) {
+      const utcTime = new Date(utcString);
+      element.textContent = utcTime.toLocaleDateString(window.navigator.language, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    } else {
+      console.error("Missing datetime attribute on time.local-time element", element);
+    }
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  convertTimeElements();
+});
+
+document.body.addEventListener('htmx:afterSwap', function() {
+  convertTimeElements();
+});

frontend/js/local_time_controller.ts

@@ -1,28 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-// Replaces all UTC timestamps with time formated for the local timezone
-export default class extends Controller {
-  connect() {
-    this.renderLocalTime();
-  }
-
-  renderLocalTime() {
-    this.element.textContent = this.localTimeString;
-  }
-
-  get localTimeString(): string {
-    if (this.utcTime) {
-      return this.utcTime.toLocaleDateString(window.navigator.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      });
-    }
-    return "Unknown datetime"
-  }
-
-  get utcTime(): Date | null {
-    const utcString = this.element.getAttribute("datetime");
-    return utcString ? new Date(utcString) : null;
-  }
-}

frontend/package.json

@@ -1,14 +1,11 @@
 {
-  "dependencies": {
-    "@hotwired/stimulus": "^3.2.1"
-  },
   "name": "crawlnicle-frontend",
   "module": "js/index.ts",
-  "type": "module",
   "devDependencies": {
     "bun-types": "^0.6.0"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
-  }
+  },
+  "type": "module"
 }