Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions web-app/src/containers/LeftPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
import { DownloadManagement } from '@/containers/DownloadManegement'
import { useSmallScreen } from '@/hooks/useMediaQuery'
import { useClickOutside } from '@/hooks/useClickOutside'
import { useDownloadStore } from '@/hooks/useDownloadStore'

const mainMenus = [
{
Expand Down Expand Up @@ -85,10 +86,10 @@
// Use click outside hook for panel with debugging
useClickOutside(
() => {
if (isSmallScreen && open) {
setLeftPanel(false)
}
},

Check warning on line 92 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

89-92 lines are not covered with tests
null,
[
panelRef.current,
Expand All @@ -100,28 +101,28 @@
// Auto-collapse panel only when window is resized
useEffect(() => {
const handleResize = () => {
const currentIsSmallScreen = window.innerWidth <= 768

Check warning on line 104 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

104 line is not covered with tests

// Skip on initial mount
if (isInitialMountRef.current) {
isInitialMountRef.current = false
prevScreenSizeRef.current = currentIsSmallScreen
return
}

Check warning on line 111 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

107-111 lines are not covered with tests

// Only trigger if the screen size actually changed
if (
prevScreenSizeRef.current !== null &&
prevScreenSizeRef.current !== currentIsSmallScreen
) {
if (currentIsSmallScreen) {
setLeftPanel(false)
} else {
setLeftPanel(true)
}
prevScreenSizeRef.current = currentIsSmallScreen
}
}

Check warning on line 125 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

114-125 lines are not covered with tests

// Add resize listener
window.addEventListener('resize', handleResize)
Expand Down Expand Up @@ -161,7 +162,7 @@
// Disable body scroll when panel is open on small screens
useEffect(() => {
if (isSmallScreen && open) {
document.body.style.overflow = 'hidden'

Check warning on line 165 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

165 line is not covered with tests
} else {
document.body.style.overflow = ''
}
Expand All @@ -171,23 +172,25 @@
}
}, [isSmallScreen, open])

const { downloads, localDownloadingModels } = useDownloadStore()

return (
<>
{/* Backdrop overlay for small screens */}
{isSmallScreen && open && (
<div
className="fixed inset-0 bg-black/50 backdrop-blur z-30"
onClick={(e) => {

Check warning on line 183 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

181-183 lines are not covered with tests
// Don't close if clicking on search container or if currently searching
if (
searchContainerRef.current?.contains(e.target as Node) ||
searchContainerMacRef.current?.contains(e.target as Node)
) {
return
}
setLeftPanel(false)
}}
/>

Check warning on line 193 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

185-193 lines are not covered with tests
)}
<aside
ref={panelRef}
Expand All @@ -197,7 +200,7 @@
isResizableContext && 'h-full w-full',
// Small screen context: fixed positioning and styling
isSmallScreen &&
'fixed h-[calc(100%-16px)] bg-main-view z-40 rounded-sm border border-left-panel-fg/10 m-2 px-1 w-48',

Check warning on line 203 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

203 line is not covered with tests
// Default context: original styling
!isResizableContext &&
!isSmallScreen &&
Expand Down Expand Up @@ -237,23 +240,30 @@
onChange={(e) => setSearchTerm(e.target.value)}
/>
{searchTerm && (
<button
className="absolute right-2 top-1/2 -translate-y-1/2 text-left-panel-fg/70 hover:text-left-panel-fg"
onClick={(e) => {
e.preventDefault()
e.stopPropagation() // prevent bubbling
setSearchTerm('')
}}

Check warning on line 249 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

243-249 lines are not covered with tests
>
<IconX size={14} />
</button>

Check warning on line 252 in web-app/src/containers/LeftPanel.tsx

View workflow job for this annotation

GitHub Actions / coverage-check

251-252 lines are not covered with tests
)}
</div>
)}
</div>

<div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)]">
<div className="flex flex-col !h-[calc(100%-140px)]">
<div
className={cn(
'flex flex-col',
Object.keys(downloads).length > 0 || localDownloadingModels.size > 0
? 'h-[calc(100%-200px)]'
: 'h-[calc(100%-140px)]'
)}
>
{IS_MACOS && (
<div
ref={searchContainerMacRef}
Expand Down Expand Up @@ -486,8 +496,8 @@
</Link>
)
})}
<DownloadManagement />
</div>
<DownloadManagement />
</div>
</aside>
</>
Expand Down
Loading