🐛fix: default show 3 dots

Author: urmauur

web-app/src/containers/DownloadManegement.tsx

@@ -182,7 +182,9 @@ export function DownloadManagement() {
       getProviders().then(setProviders)
       toast.success(t('common:toast.downloadComplete.title'), {
         id: 'download-complete',
-        description: t('common:toast.downloadComplete.description', { modelId: state.modelId }),
+        description: t('common:toast.downloadComplete.description', {
+          modelId: state.modelId,
+        }),
       })
     },
     [removeDownload, removeLocalDownloadingModel, setProviders, t]
@@ -237,10 +239,14 @@ export function DownloadManagement() {
           <PopoverTrigger asChild>
             {isLeftPanelOpen ? (
               <div className="bg-left-panel-fg/10 hover:bg-left-panel-fg/12 p-2 rounded-md my-1 relative border border-left-panel-fg/10 cursor-pointer text-left">
-                <div className="bg-primary font-bold size-5 rounded-full absolute -top-2 -right-1 flex items-center justify-center text-primary-fg">
-                  {downloadCount}
+                <div className="text-left-panel-fg/80 font-medium flex gap-2">
+                  <span>{t('downloads')}</span>
+                  <span>
+                    <div className="bg-primary font-bold size-5 rounded-full  flex items-center justify-center text-primary-fg">
+                      {downloadCount}
+                    </div>
+                  </span>
                 </div>
-                <p className="text-left-panel-fg/80 font-medium">{t('downloads')}</p>
                 <div className="mt-2 flex items-center justify-between space-x-2">
                   <Progress value={overallProgress * 100} />
                   <span className="text-xs font-medium text-left-panel-fg/80 shrink-0">
@@ -272,7 +278,9 @@ export function DownloadManagement() {
           >
             <div className="flex flex-col">
               <div className="p-2 py-1.5 bg-main-view-fg/5 border-b border-main-view-fg/6">
-                <p className="text-xs text-main-view-fg/70">{t('downloading')}</p>
+                <p className="text-xs text-main-view-fg/70">
+                  {t('downloading')}
+                </p>
               </div>
               <div className="p-2 max-h-[300px] overflow-y-auto space-y-2">
                 {appUpdateState.isDownloading && (
@@ -309,10 +317,15 @@ export function DownloadManagement() {
                           title="Cancel download"
                           onClick={() => {
                             abortDownload(download.name).then(() => {
-                              toast.info(t('common:toast.downloadCancelled.title'), {
-                                id: 'cancel-download',
-                                description: t('common:toast.downloadCancelled.description'),
-                              })
+                              toast.info(
+                                t('common:toast.downloadCancelled.title'),
+                                {
+                                  id: 'cancel-download',
+                                  description: t(
+                                    'common:toast.downloadCancelled.description'
+                                  ),
+                                }
+                              )
                               if (downloadProcesses.length === 0) {
                                 setIsPopoverOpen(false)
                               }

web-app/src/containers/ThreadList.tsx

@@ -105,8 +105,13 @@ const SortableItem = memo(({ thread }: { thread: Thread }) => {
       {...attributes}
       {...listeners}
       onClick={handleClick}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setOpenDropdown(true)
+      }}
       className={cn(
-        'mb-1 rounded hover:bg-left-panel-fg/10 flex items-center justify-between gap-2 px-1.5 group/thread-list transition-all',
+        'mb-1 rounded hover:bg-left-panel-fg/10 flex items-center justify-between gap-2 px-1.5  transition-all',
         isDragging ? 'cursor-move' : 'cursor-pointer',
         isActive && 'bg-left-panel-fg/10'
       )}
@@ -122,7 +127,7 @@ const SortableItem = memo(({ thread }: { thread: Thread }) => {
           <DropdownMenuTrigger asChild>
             <IconDots
               size={14}
-              className="text-left-panel-fg/60 shrink-0 cursor-pointer px-0.5 -mr-1 data-[state=open]:bg-left-panel-fg/10 rounded group-hover/thread-list:data-[state=closed]:size-5 size-5 data-[state=closed]:size-0"
+              className="text-left-panel-fg/60 shrink-0 cursor-pointer px-0.5 -mr-1 data-[state=open]:bg-left-panel-fg/10 rounded size-5"
               onClick={(e) => {
                 e.preventDefault()
                 e.stopPropagation()