From 755c791af54f3d7a06d9621e13d6de0fcab54580 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sat, 23 May 2026 17:23:49 -0700
Subject: [PATCH] fix(ui): use pushState for folder navigation in public share
 links

---
 frontend/src/app/share/[id]/page.tsx | 29 +++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/share/[id]/page.tsx b/frontend/src/app/share/[id]/page.tsx
index 6dc9ba5..e327536 100644
--- a/frontend/src/app/share/[id]/page.tsx
+++ b/frontend/src/app/share/[id]/page.tsx
@@ -26,6 +26,29 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
   const [fileInfo, setFileInfo] = useState<FileInfo | null>(null);
   const [currentPath, setCurrentPath] = useState('');
 
+  useEffect(() => {
+    const handlePopState = (e: PopStateEvent) => {
+      if (e.state && e.state.path !== undefined) {
+        setCurrentPath(e.state.path);
+      } else {
+        setCurrentPath(new URLSearchParams(window.location.search).get('path') || '');
+      }
+    };
+    window.addEventListener('popstate', handlePopState);
+    
+    // Initial sync
+    const urlPath = new URLSearchParams(window.location.search).get('path');
+    if (urlPath && urlPath !== currentPath) {
+      setCurrentPath(urlPath);
+    }
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  const navigateTo = (path: string) => {
+    setCurrentPath(path);
+    window.history.pushState({ path }, '', path ? `?path=${encodeURIComponent(path)}` : window.location.pathname);
+  };
+
   useEffect(() => {
     if (lockoutTime <= 0) return;
     const timer = setInterval(() => {
@@ -199,7 +222,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
             {fileInfo?.is_dir && (
               <div className="flex items-center justify-between mb-8 pb-6 border-b border-white/10">
                 <div className="flex items-center gap-2 text-white/80 overflow-x-auto whitespace-nowrap scrollbar-hide">
-                  <button onClick={() => setCurrentPath('')} className="hover:text-white transition-colors flex items-center gap-2">
+                  <button onClick={() => navigateTo('')} className="hover:text-white transition-colors flex items-center gap-2">
                     <Home className="w-5 h-5" />
                     <span className="font-medium">Shared Folder</span>
                   </button>
@@ -209,7 +232,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
                       <div key={pathToHere} className="flex items-center gap-2">
                         <ChevronRight className="w-4 h-4 text-white/40" />
                         <button 
-                          onClick={() => setCurrentPath(pathToHere)}
+                          onClick={() => navigateTo(pathToHere)}
                           className="hover:text-white transition-colors font-medium truncate max-w-[150px]"
                         >
                           {part}
@@ -292,7 +315,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
                           className={`group transition-colors ${f.is_dir ? 'cursor-pointer hover:bg-white/5' : 'hover:bg-white/5'}`}
                           onClick={() => {
                             if (f.is_dir) {
-                              setCurrentPath(currentPath ? `${currentPath}/${f.name}` : f.name);
+                              navigateTo(currentPath ? `${currentPath}/${f.name}` : f.name);
                             }
                           }}
                         >