aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-18 15:14:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: extend ThreePaneLayout with showSupport and support slot

Browse Source
This commit is contained in:
Gigi
2025-10-15 00:53:22 +02:00
parent 47ddf8ebe1
commit 6812584b8c
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ThreePaneLayout.tsx
View File

@@ -32,6 +32,7 @@ interface ThreePaneLayoutProps {
showExplore?: boolean showExplore?: boolean
showMe?: boolean showMe?: boolean
showProfile?: boolean showProfile?: boolean
showSupport?: boolean
// Bookmarks pane // Bookmarks pane
bookmarks: Bookmark[] bookmarks: Bookmark[]
@@ -93,6 +94,9 @@ interface ThreePaneLayoutProps {
// Optional Profile content // Optional Profile content
profile?: React.ReactNode profile?: React.ReactNode
// Optional Support content
support?: React.ReactNode
} }
const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => { const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
@@ -225,8 +229,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
return ( return (
<> <>
{/* Mobile bookmark button - only show when viewing article (not on settings/explore/me/profile) */} {/* Mobile bookmark button - only show when viewing article (not on settings/explore/me/profile/support) */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && !props.showSupport && (
<button <button
className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${ className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none' showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
@@ -245,8 +249,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
</button> </button>
)} )}
{/* Mobile highlights button - only show when viewing article (not on settings/explore/me/profile) */} {/* Mobile highlights button - only show when viewing article (not on settings/explore/me/profile/support) */}
{isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && ( {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && !props.showSupport && (
<button <button
className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${ className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none' showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
@@ -329,6 +333,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
<> <>
{props.profile} {props.profile}
</> </>
) : props.showSupport && props.support ? (
// Render Support inside the main pane to keep side panels
<>
{props.support}
</>
) : ( ) : (
<ContentPanel <ContentPanel
loading={props.readerLoading} loading={props.readerLoading}