fix: weird DOM targetting issues

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>