fix: navigation loop

README.md

@@ -59,4 +59,4 @@ docker run -p 3000:3000 \
 
 ## Authorization
 
-This application does not perform authorisation of users. I recommend using a proxy such as [oauth2-proxy](https://github.com/oauth2-proxy/oauth2-proxy) to protect your application.
+This application does not perform authorisation of users. I recommend using a proxy such as [oauth2-proxy](https://github.com/oauth2-proxy/oauth2-proxy) to protect your files from unauthorised access.

src/routes/views.ts

@@ -27,12 +27,27 @@ viewRoutes.get("/", async (c) => {
     continuationToken,
   });
 
-  // If it's an HTMX request, return just the browser content
+  // If it's an HTMX request, return both navigation and content
   if (c.req.header("HX-Request")) {
-    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);
+    return c.html(`
+      <div class="breadcrumbs">
+        <a href="/" 
+           hx-get="/"
+           hx-target="#browser-content"
+           hx-push-url="true">Home</a>
+        ${prefix.split("/").filter(Boolean).map((part, i, parts) => {
+          const path = parts.slice(0, i + 1).join("/");
+          return `
+            <a href="/?prefix=${path}"
+               hx-get="/?prefix=${path}"
+               hx-target="#browser-content"
+               hx-push-url="true">${part}</a>
+          `;
+        }).join(" / ")}
+      </div>
+      ${objectList(result)}
+      ${pagination(result)}
+    `);
   }
   
   // Otherwise return the full layout

src/templates/browser.ts

@@ -14,21 +14,13 @@ export function browser(
       
       ${search(query)}
       
-      <div class="browser-navigation">
-        ${renderBreadcrumbs(prefix)}
-      </div>
-      
       <div id="browser-content">
-        ${objectList(result)}
-        ${pagination(result)}
-      </div>
-    </div>
-  `;
-}
-
-export function renderBreadcrumbs(prefix: string) {
-  const parts = prefix.split("/").filter(Boolean);
-  const links = parts.map((part, i) => {
+        <div class="breadcrumbs">
+          <a href="/" 
+             hx-get="/"
+             hx-target="#browser-content"
+             hx-push-url="true">Home</a>
+          ${prefix.split("/").filter(Boolean).map((part, i, parts) => {
             const path = parts.slice(0, i + 1).join("/");
             return `
               <a href="/?prefix=${path}"
@@ -36,15 +28,11 @@ export function renderBreadcrumbs(prefix: string) {
                  hx-target="#browser-content"
                  hx-push-url="true">${part}</a>
             `;
-  });
-  
-  return `
-    <div class="breadcrumbs">
-      <a href="/" 
-         hx-get="/"
-         hx-target="#browser-content"
-         hx-push-url="true">Home</a>
-      ${links.length ? " / " + links.join(" / ") : ""}
+          }).join(" / ")}
+        </div>
+        ${objectList(result)}
+        ${pagination(result)}
+      </div>
     </div>
   `;
 } 

src/templates/components/object_list.ts

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