fix: weird DOM targetting issues

deno.lock

@@ -53,6 +53,28 @@
     "https://deno.land/x/aws_api@v0.8.1/services/s3/mod.ts": "03fcdeb80c046d69f35b787ceda383dcf7332c7581d5d2a401058f50323c1c33",
     "https://deno.land/x/aws_api@v0.8.1/services/s3/structs.ts": "099dee8ee8a1b803b5d9d2b40cb8da170163ea4fd5b9910b2565275a012f37da",
     "https://deno.land/x/aws_s3_presign@2.2.1/mod.ts": "87f81bb32cef531fa2fd503e43bde2779e52a52ab0c6b8e44bc20595595e7739",
+    "https://deno.land/x/deno_dom@v0.1.48/build/deno-wasm/deno-wasm.js": "d6841a06342eb6a2798ef28de79ad69c0f2fa349fa04d3ca45e5fcfbf50a9340",
+    "https://deno.land/x/deno_dom@v0.1.48/deno-dom-wasm.ts": "0669396686fb207f1354af33df6aabe2189b4eceafdb1bf7f3d6bbb2637b6b03",
+    "https://deno.land/x/deno_dom@v0.1.48/src/api.ts": "0ff5790f0a3eeecb4e00b7d8fbfa319b165962cf6d0182a65ba90f158d74f7d7",
+    "https://deno.land/x/deno_dom@v0.1.48/src/constructor-lock.ts": "0e7b297e8b9cf921a3b0d3a692ec5fb462c5afc47ec554292e20090b9e16b40a",
+    "https://deno.land/x/deno_dom@v0.1.48/src/deserialize.ts": "1cf4096678d8afed8ed28dbad690504c4d2c28149ba768b26eacd1416873425b",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/document-fragment.ts": "1c7352a3c816587ed7fad574b42636198f680f17abc3836fcfe7799b31e7718f",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/document.ts": "f8503c0ffe0d703535e84d174f1c30aa31eff15e1450777d7f2e8da81546c002",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/dom-parser.ts": "784ee0e766d4a01e14420f328053fd3a0016c6b40ee442edc3ae80f5d9777927",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/element.ts": "f662dbf28d2ac873ebbbe2d4ae53121d13879c2061416f6eae4e8cca58922e8b",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/elements/html-template-element.ts": "740b97a5378c9a14cccf3429299846eda240b613013e2d2d7f20b393897453c2",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/html-collection.ts": "eedc0b097612ef420d975df6924850a36a4829b35aafa4c92078609a15a52f08",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/node-list.ts": "d19fec8ed4979f43c8e117f9937b3da22acc2c8514cb1ef0074f54793cdfc8c9",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/node.ts": "c93e5f6b6c011cbad6f8728d65459782b911e097f9d0c8c99a51591f7c936449",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/selectors/custom-api.ts": "852696bd58e534bc41bd3be9e2250b60b67cd95fd28ed16b1deff1d548531a71",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/selectors/nwsapi-types.ts": "c43b36c36acc5d32caabaa54fda8c9d239b2b0fcbce9a28efb93c84aa1021698",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/selectors/nwsapi.js": "985d7d8fc1eabbb88946b47a1c44c1b2d4aa79ff23c21424219f1528fa27a2ff",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/selectors/selectors.ts": "83eab57be2290fb48e3130533448c93c6c61239f2a2f3b85f1917f80ca0fdc75",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/selectors/sizzle-types.ts": "78149e2502409989ce861ed636b813b059e16bc267bb543e7c2b26ef43e4798b",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/selectors/sizzle.js": "c3aed60c1045a106d8e546ac2f85cc82e65f62d9af2f8f515210b9212286682a",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/utils-types.ts": "96db30e3e4a75b194201bb9fa30988215da7f91b380fca6a5143e51ece2a8436",
+    "https://deno.land/x/deno_dom@v0.1.48/src/dom/utils.ts": "4c6206516fb8f61f37a209c829e812c4f5a183e46d082934dd14c91bde939263",
+    "https://deno.land/x/deno_dom@v0.1.48/src/parser.ts": "e06b2300d693e6ae7564e53dfa5c9a9e97fdb8c044c39c52c8b93b5d60860be3",
     "https://deno.land/x/hono@v3.12.0/client/client.ts": "ec277e5e4887926cab672022340c6e5750ff1ebc6acaeb020cae84a22e319453",
     "https://deno.land/x/hono@v3.12.0/client/index.ts": "3ff4cf246f3543f827a85a2c84d66a025ac350ee927613629bda47e854bfb7ba",
     "https://deno.land/x/hono@v3.12.0/client/utils.ts": "053273c002963b549d38268a1b423ac8ca211a8028bdab1ed0b781a62aa5e661",

src/routes/views.ts

@@ -1,9 +1,10 @@
 import { Hono } from "hono";
 import { StorageService } from "../services/storage.ts";
-import { browser, renderBreadcrumbs } from "../templates/browser.ts";
+import { browser } from "../templates/browser.ts";
 import { layout } from "../templates/layout.ts";
 import { objectList } from "../templates/components/object_list.ts";
 import { pagination } from "../templates/components/pagination.ts";
+import { DOMParser } from "https://deno.land/x/deno_dom@v0.1.48/deno-dom-wasm.ts";
 
 const viewRoutes = new Hono();
 
@@ -26,17 +27,12 @@ viewRoutes.get("/", async (c) => {
     continuationToken,
   });
 
-  // If it's an HTMX request, return both navigation and content
+  // If it's an HTMX request, return just the browser content
   if (c.req.header("HX-Request")) {
-    return c.html(`
-      <div id="browser-navigation">
-        ${renderBreadcrumbs(prefix)}
-      </div>
-      <div id="browser-content">
-        ${objectList(result)}
-        ${pagination(result)}
-      </div>
-    `);
+    const content = browser(result, prefix, query);
+    const doc = new DOMParser().parseFromString(content, "text/html");
+    const browserContent = doc?.querySelector("#browser-content")?.innerHTML || "";
+    return c.html(browserContent);
   }
   
   // Otherwise return the full layout

src/templates/browser.ts

@@ -14,7 +14,7 @@ export function browser(
       
       ${search(query)}
       
-      <div id="browser-navigation">
+      <div class="browser-navigation">
         ${renderBreadcrumbs(prefix)}
       </div>
       
@@ -33,8 +33,7 @@ export function renderBreadcrumbs(prefix: string) {
     return `
       <a href="/?prefix=${path}"
          hx-get="/?prefix=${path}"
-         hx-target="#browser-navigation, #browser-content"
-         hx-swap="innerHTML"
+         hx-target="#browser-content"
          hx-push-url="true">${part}</a>
     `;
   });
@@ -43,8 +42,7 @@ export function renderBreadcrumbs(prefix: string) {
     <div class="breadcrumbs">
       <a href="/" 
          hx-get="/"
-         hx-target="#browser-navigation, #browser-content"
-         hx-swap="innerHTML"
+         hx-target="#browser-content"
          hx-push-url="true">Home</a>
       ${links.length ? " / " + links.join(" / ") : ""}
     </div>

src/templates/components/object_list.ts

@@ -7,8 +7,7 @@ export function objectList(result: ListObjectsResult) {
         <div class="folder">
           <a href="/?prefix=${prefix}"
              hx-get="/?prefix=${prefix}"
-             hx-target="#browser-navigation, #browser-content"
-             hx-swap="innerHTML"
+             hx-target="#browser-content"
              hx-push-url="true">
             📁 ${prefix}
           </a>