fix: enhance plugin installation and update handling

web/app/components/base/tab-slider/index.tsx

@@ -40,7 +40,7 @@ const TabSlider: FC<TabSliderProps> = ({
     const newIndex = options.findIndex(option => option.value === value)
     setActiveIndex(newIndex)
     updateSliderStyle(newIndex)
-  }, [value, options])
+  }, [value, options, pluginList])
 
   return (
     <div className={cn(className, 'inline-flex p-0.5 rounded-[10px] bg-components-segmented-control-bg-normal relative items-center justify-center')}>

web/app/components/plugins/install-plugin/install-from-github/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import Modal from '@/app/components/base/modal'
 import type { Item } from '@/app/components/base/select'
 import type { InstallState } from '@/app/components/plugins/types'
@@ -134,6 +134,11 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
     })
   }
 
+  useEffect(() => {
+    if (state.step === InstallStepFromGitHub.selectPackage)
+      handleUrlSubmit()
+  }, [])
+
   return (
     <Modal
       isShow={true}

web/app/components/plugins/install-plugin/utils.ts

@@ -48,6 +48,6 @@ export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManife
 }
 
 export const parseGitHubUrl = (url: string): GitHubUrlInfo => {
-  const match = url.match(/^https:\/\/github\.com\/([^/]+)\/([^/]+)\/?$/)
+  const match = url.match(/^https:\/\/github\.com\/([^\/]+)\/([^\/]+)\/?$/)
   return match ? { isValid: true, owner: match[1], repo: match[2] } : { isValid: false }
 }

web/app/components/plugins/plugin-item/action.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import type { MetaData } from '../types'
+import { type MetaData, PluginSource } from '../types'
 import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
@@ -13,6 +13,7 @@ import { uninstallPlugin } from '@/service/plugins'
 import { useGitHubReleases } from '../install-plugin/hooks'
 import { compareVersion, getLatestVersion } from '@/utils/semver'
 import Toast from '@/app/components/base/toast'
+import { useModalContext } from '@/context/modal-context'
 
 const i18nPrefix = 'plugin.action'
 
@@ -49,6 +50,7 @@ const Action: FC<Props> = ({
     setFalse: hideDeleting,
   }] = useBoolean(false)
   const { fetchReleases } = useGitHubReleases()
+  const { setShowUpdatePluginModal } = useModalContext()
 
   const handleFetchNewVersion = async () => {
     try {
@@ -56,8 +58,19 @@ const Action: FC<Props> = ({
       const versions = fetchedReleases.map(release => release.tag_name)
       const latestVersion = getLatestVersion(versions)
       if (compareVersion(latestVersion, version) === 1) {
-        // todo: open plugin updating modal
+        setShowUpdatePluginModal({
-        console.log('New version available:', latestVersion)
+          payload: {
+            type: PluginSource.github,
+            github: {
+              originalPackageInfo: {
+                id: installationId,
+                repo: `https://github.com/${meta!.repo}`,
+                version: meta!.version,
+                package: meta!.package,
+              },
+            },
+          },
+        })
       }
       else {
         Toast.notify({
@@ -87,7 +100,7 @@ const Action: FC<Props> = ({
       hideDeleteConfirm()
       onDelete()
     }
-  }, [installationId])
+  }, [installationId, onDelete])
   return (
     <div className='flex space-x-1'>
       {/* Only plugin installed from GitHub need to check if it's the new version  */}

web/app/components/plugins/plugin-item/index.tsx

@@ -125,7 +125,7 @@ const PluginItem: FC<Props> = ({
         <div className='flex items-center'>
           {source === PluginSource.github
             && <>
-              <a href={meta!.repo} target='_blank' className='flex items-center gap-1'>
+              <a href={`https://github.com/${meta!.repo}`} target='_blank' className='flex items-center gap-1'>
                 <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</div>
                 <div className='flex items-center space-x-0.5 text-text-secondary'>
                   <Github className='w-3 h-3' />