chore: update the plugins tab button

web/app/components/header/plugins-nav/index.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import classNames from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
+import { useSelectedLayoutSegment } from 'next/navigation'
+
 type PluginsNavProps = {
   className?: string
 }
@@ -12,12 +14,17 @@ const PluginsNav = ({
   className,
 }: PluginsNavProps) => {
   const { t } = useTranslation()
+  const selectedSegment = useSelectedLayoutSegment()
+  const activated = selectedSegment === 'plugins'
 
   return (
     <Link href="/plugins" className={classNames(
       className, 'group',
     )}>
-      <div className='flex flex-row h-8 p-1.5 gap-0.5 items-center justify-center rounded-xl system-sm-medium-uppercase hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary'>
+      <div className={`flex flex-row h-8 p-1.5 gap-0.5 items-center justify-center 
+        rounded-xl system-sm-medium-uppercase ${activated
+      ? 'border border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text'
+      : 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'}`}>
         <div className='flex w-4 h-4 justify-center items-center'>
           <Group />
         </div>

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

@@ -7,7 +7,8 @@ import Card from '../../../card'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useTranslation } from 'react-i18next'
-import { installPackageFromGitHub, updateFromGitHub } from '@/service/plugins'
+import { updateFromGitHub } from '@/service/plugins'
+import { useInstallPackageFromGitHub } from '@/service/use-plugins'
 import { RiLoader2Line } from '@remixicon/react'
 import { usePluginTaskList } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
@@ -40,6 +41,7 @@ const Loaded: React.FC<LoadedProps> = ({
 }) => {
   const { t } = useTranslation()
   const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
   const { handleRefetch } = usePluginTaskList()
   const { check } = checkTaskStatus()
 
@@ -72,12 +74,12 @@ const Loaded: React.FC<LoadedProps> = ({
         onInstalled()
       }
       else {
-        const { all_installed: isInstalled, task_id: taskId } = await installPackageFromGitHub(
-          `${owner}/${repo}`,
+        const { all_installed: isInstalled, task_id: taskId } = await installPackageFromGitHub({
+          repoUrl: `${owner}/${repo}`,
           selectedVersion,
           selectedPackage,
           uniqueIdentifier,
-        )
+        })
 
         if (isInstalled) {
           onInstalled()

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

@@ -132,7 +132,7 @@ const PluginPage = ({
               options={options}
             />
           </div>
-          <div className='flex flex-shrink-0 items-center gap-1'>
+          <div className='flex shrink-0 items-center gap-1'>
             <PluginTasks />
             {canManagement && (
               <InstallPluginDropdown
@@ -172,7 +172,7 @@ const PluginPage = ({
           )}
           <div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
             <RiDragDropLine className="w-4 h-4" />
-            <span className="system-xs-regular">Drop plugin package here to install</span>
+            <span className="system-xs-regular">{t('plugin.installModal.dropPluginToInstall')}</span>
           </div>
           {currentFile && (
             <InstallFromLocalPackage