Merge pull request #6560 from menloresearch/fix/layout-downlod-management

fix: download management ui and double refresh model

Author: urmauur

web-app/src/containers/DownloadManegement.tsx

@@ -400,20 +400,23 @@ export function DownloadManagement() {
                           className="text-main-view-fg/70 cursor-pointer"
                           title="Cancel download"
                           onClick={() => {
-                            serviceHub.models().abortDownload(download.name).then(() => {
-                              toast.info(
-                                t('common:toast.downloadCancelled.title'),
-                                {
-                                  id: 'cancel-download',
-                                  description: t(
-                                    'common:toast.downloadCancelled.description'
-                                  ),
+                            serviceHub
+                              .models()
+                              .abortDownload(download.name)
+                              .then(() => {
+                                toast.info(
+                                  t('common:toast.downloadCancelled.title'),
+                                  {
+                                    id: 'cancel-download',
+                                    description: t(
+                                      'common:toast.downloadCancelled.description'
+                                    ),
+                                  }
+                                )
+                                if (downloadProcesses.length === 0) {
+                                  setIsPopoverOpen(false)
                                 }
-                              )
-                              if (downloadProcesses.length === 0) {
-                                setIsPopoverOpen(false)
-                              }
-                            })
+                              })
                           }}
                         />
                       </div>

web-app/src/containers/LeftPanel.tsx

@@ -35,7 +35,7 @@ import { toast } from 'sonner'
 import { DownloadManagement } from '@/containers/DownloadManegement'
 import { useSmallScreen } from '@/hooks/useMediaQuery'
 import { useClickOutside } from '@/hooks/useClickOutside'
-import { useDownloadStore } from '@/hooks/useDownloadStore'
+
 import { DeleteAllThreadsDialog } from '@/containers/dialogs'
 
 const mainMenus = [
@@ -122,7 +122,7 @@ const LeftPanel = () => {
       ) {
         if (currentIsSmallScreen && open) {
           setLeftPanel(false)
-        } else if(!open) {
+        } else if (!open) {
           setLeftPanel(true)
         }
         prevScreenSizeRef.current = currentIsSmallScreen
@@ -179,8 +179,6 @@ const LeftPanel = () => {
     }
   }, [isSmallScreen, open])
 
-  const { downloads, localDownloadingModels } = useDownloadStore()
-
   return (
     <>
       {/* Backdrop overlay for small screens */}
@@ -262,15 +260,8 @@ const LeftPanel = () => {
           )}
         </div>
 
-        <div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)]">
-          <div
-            className={cn(
-              'flex flex-col',
-              Object.keys(downloads).length > 0 || localDownloadingModels.size > 0
-                ? 'h-[calc(100%-200px)]'
-                : 'h-[calc(100%-140px)]'
-            )}
-          >
+        <div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)] ">
+          <div className={cn('flex flex-col !h-[calc(100%-200px)]')}>
             {IS_MACOS && (
               <div
                 ref={searchContainerMacRef}
@@ -379,7 +370,9 @@ const LeftPanel = () => {
                           </button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent side="bottom" align="end">
-                          <DeleteAllThreadsDialog onDeleteAll={deleteAllThreads} />
+                          <DeleteAllThreadsDialog
+                            onDeleteAll={deleteAllThreads}
+                          />
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </div>
@@ -469,8 +462,9 @@ const LeftPanel = () => {
                 </Link>
               )
             })}
-            <DownloadManagement />
           </div>
+
+          <DownloadManagement />
         </div>
       </aside>
     </>