|
|
|
@ -1,5 +1,4 @@ |
|
|
|
import Sidebar from '@/components/Sidebar' |
|
|
|
import Sidebar from '@/components/Sidebar' |
|
|
|
import { Separator } from '@/components/ui/separator' |
|
|
|
|
|
|
|
import { cn } from '@/lib/utils' |
|
|
|
import { cn } from '@/lib/utils' |
|
|
|
import NoteListPage from '@/pages/primary/NoteListPage' |
|
|
|
import NoteListPage from '@/pages/primary/NoteListPage' |
|
|
|
import HomePage from '@/pages/secondary/HomePage' |
|
|
|
import HomePage from '@/pages/secondary/HomePage' |
|
|
|
@ -15,6 +14,7 @@ import { |
|
|
|
useRef, |
|
|
|
useRef, |
|
|
|
useState |
|
|
|
useState |
|
|
|
} from 'react' |
|
|
|
} from 'react' |
|
|
|
|
|
|
|
import BottomNavigationBar from './components/BottomNavigationBar' |
|
|
|
import TooManyRelaysAlertDialog from './components/TooManyRelaysAlertDialog' |
|
|
|
import TooManyRelaysAlertDialog from './components/TooManyRelaysAlertDialog' |
|
|
|
import ExplorePage from './pages/primary/ExplorePage' |
|
|
|
import ExplorePage from './pages/primary/ExplorePage' |
|
|
|
import MePage from './pages/primary/MePage' |
|
|
|
import MePage from './pages/primary/MePage' |
|
|
|
@ -90,12 +90,10 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
} |
|
|
|
} |
|
|
|
]) |
|
|
|
]) |
|
|
|
const [secondaryStack, setSecondaryStack] = useState<TStackItem[]>([]) |
|
|
|
const [secondaryStack, setSecondaryStack] = useState<TStackItem[]>([]) |
|
|
|
const [isShared, setIsShared] = useState(false) |
|
|
|
|
|
|
|
const { isSmallScreen } = useScreenSize() |
|
|
|
const { isSmallScreen } = useScreenSize() |
|
|
|
const ignorePopStateRef = useRef(false) |
|
|
|
const ignorePopStateRef = useRef(false) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
const hasHistoryState = !!history.state |
|
|
|
|
|
|
|
if (['/npub1', '/nprofile1'].some((prefix) => window.location.pathname.startsWith(prefix))) { |
|
|
|
if (['/npub1', '/nprofile1'].some((prefix) => window.location.pathname.startsWith(prefix))) { |
|
|
|
window.history.replaceState( |
|
|
|
window.history.replaceState( |
|
|
|
null, |
|
|
|
null, |
|
|
|
@ -115,12 +113,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
} |
|
|
|
} |
|
|
|
window.history.pushState(null, '', window.location.href) |
|
|
|
window.history.pushState(null, '', window.location.href) |
|
|
|
if (window.location.pathname !== '/') { |
|
|
|
if (window.location.pathname !== '/') { |
|
|
|
if ( |
|
|
|
|
|
|
|
['/users', '/notes', '/relays'].some((path) => window.location.pathname.startsWith(path)) && |
|
|
|
|
|
|
|
!hasHistoryState |
|
|
|
|
|
|
|
) { |
|
|
|
|
|
|
|
setIsShared(true) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const url = window.location.pathname + window.location.search + window.location.hash |
|
|
|
const url = window.location.pathname + window.location.search + window.location.hash |
|
|
|
setSecondaryStack((prevStack) => { |
|
|
|
setSecondaryStack((prevStack) => { |
|
|
|
if (isCurrentPage(prevStack, url)) return prevStack |
|
|
|
if (isCurrentPage(prevStack, url)) return prevStack |
|
|
|
@ -248,7 +240,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
if (secondaryStack.length === 1) { |
|
|
|
if (secondaryStack.length === 1) { |
|
|
|
// back to home page
|
|
|
|
// back to home page
|
|
|
|
window.history.replaceState(null, '', '/') |
|
|
|
window.history.replaceState(null, '', '/') |
|
|
|
setIsShared(false) |
|
|
|
|
|
|
|
setSecondaryStack([]) |
|
|
|
setSecondaryStack([]) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
window.history.go(-1) |
|
|
|
window.history.go(-1) |
|
|
|
@ -301,6 +292,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
{element} |
|
|
|
{element} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
))} |
|
|
|
|
|
|
|
<BottomNavigationBar /> |
|
|
|
<TooManyRelaysAlertDialog /> |
|
|
|
<TooManyRelaysAlertDialog /> |
|
|
|
</NotificationProvider> |
|
|
|
</NotificationProvider> |
|
|
|
</SecondaryPageContext.Provider> |
|
|
|
</SecondaryPageContext.Provider> |
|
|
|
@ -308,39 +300,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (isShared && secondaryStack.length > 0) { |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<PrimaryPageContext.Provider |
|
|
|
|
|
|
|
value={{ |
|
|
|
|
|
|
|
navigate: navigatePrimaryPage, |
|
|
|
|
|
|
|
current: currentPrimaryPage, |
|
|
|
|
|
|
|
display: false |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<SecondaryPageContext.Provider |
|
|
|
|
|
|
|
value={{ |
|
|
|
|
|
|
|
push: pushSecondaryPage, |
|
|
|
|
|
|
|
pop: popSecondaryPage, |
|
|
|
|
|
|
|
currentIndex: secondaryStack[secondaryStack.length - 1].index |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<NotificationProvider> |
|
|
|
|
|
|
|
<div className="h-screen overflow-hidden max-w-4xl mx-auto border-x"> |
|
|
|
|
|
|
|
{secondaryStack.map((item, index) => ( |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
key={item.index} |
|
|
|
|
|
|
|
style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{item.component} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</NotificationProvider> |
|
|
|
|
|
|
|
</SecondaryPageContext.Provider> |
|
|
|
|
|
|
|
</PrimaryPageContext.Provider> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<PrimaryPageContext.Provider |
|
|
|
<PrimaryPageContext.Provider |
|
|
|
value={{ |
|
|
|
value={{ |
|
|
|
@ -357,11 +316,10 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<NotificationProvider> |
|
|
|
<NotificationProvider> |
|
|
|
<div className="flex h-screen overflow-hidden"> |
|
|
|
<div className="flex h-screen overflow-hidden bg-surface-background"> |
|
|
|
<Sidebar /> |
|
|
|
<Sidebar /> |
|
|
|
<Separator orientation="vertical" /> |
|
|
|
<div className="grid grid-cols-2 gap-2 w-full pr-2"> |
|
|
|
<div className="grid grid-cols-2 w-full"> |
|
|
|
<div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden"> |
|
|
|
<div className="flex border-r"> |
|
|
|
|
|
|
|
{primaryPages.map(({ name, element }) => ( |
|
|
|
{primaryPages.map(({ name, element }) => ( |
|
|
|
<div |
|
|
|
<div |
|
|
|
key={name} |
|
|
|
key={name} |
|
|
|
@ -374,16 +332,21 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden"> |
|
|
|
{secondaryStack.map((item, index) => ( |
|
|
|
{secondaryStack.map((item, index) => ( |
|
|
|
<div |
|
|
|
<div |
|
|
|
key={item.index} |
|
|
|
key={item.index} |
|
|
|
|
|
|
|
className="w-full" |
|
|
|
style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }} |
|
|
|
style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }} |
|
|
|
> |
|
|
|
> |
|
|
|
{item.component} |
|
|
|
{item.component} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
))} |
|
|
|
<div key="home" style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }}> |
|
|
|
<div |
|
|
|
|
|
|
|
key="home" |
|
|
|
|
|
|
|
className="w-full" |
|
|
|
|
|
|
|
style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }} |
|
|
|
|
|
|
|
> |
|
|
|
<HomePage /> |
|
|
|
<HomePage /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
codytseng
7 months ago