Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): use pushState for folder navigation in public share links
All checks were successful
Automated Container Build / build-and-push (push) Successful in 36s
Details

Browse source
This commit is contained in:
Elijah 2026-05-23 17:23:49 -07:00
parent e00fac24cb
commit 755c791af5
1 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/share/[id]/page.tsx
View file

@ -26,6 +26,29 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
const [fileInfo, setFileInfo] = useState<FileInfo | null>(null); const [fileInfo, setFileInfo] = useState<FileInfo | null>(null);
const [currentPath, setCurrentPath] = useState(''); 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(() => { useEffect(() => {
if (lockoutTime <= 0) return; if (lockoutTime <= 0) return;
const timer = setInterval(() => { const timer = setInterval(() => {
@ -199,7 +222,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
{fileInfo?.is_dir && ( {fileInfo?.is_dir && (
<div className="flex items-center justify-between mb-8 pb-6 border-b border-white/10"> <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"> <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" /> <Home className="w-5 h-5" />
<span className="font-medium">Shared Folder</span> <span className="font-medium">Shared Folder</span>
</button> </button>
@ -209,7 +232,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
<div key={pathToHere} className="flex items-center gap-2"> <div key={pathToHere} className="flex items-center gap-2">
<ChevronRight className="w-4 h-4 text-white/40" /> <ChevronRight className="w-4 h-4 text-white/40" />
<button <button
onClick={() => setCurrentPath(pathToHere)} onClick={() => navigateTo(pathToHere)}
className="hover:text-white transition-colors font-medium truncate max-w-[150px]" className="hover:text-white transition-colors font-medium truncate max-w-[150px]"
> >
{part} {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'}`} className={`group transition-colors ${f.is_dir ? 'cursor-pointer hover:bg-white/5' : 'hover:bg-white/5'}`}
onClick={() => { onClick={() => {
if (f.is_dir) { if (f.is_dir) {
setCurrentPath(currentPath ? `${currentPath}/${f.name}` : f.name); navigateTo(currentPath ? `${currentPath}/${f.name}` : f.name);
} }
}} }}
> >