@lobehub/lobehub 2.0.0-next.294 → 2.0.0-next.296

package/src/features/Conversation/TodoProgress/index.tsx

@@ -3,7 +3,7 @@
 import { type StepContextTodos } from '@lobechat/types';
 import { Checkbox, Flexbox, Icon, Tag } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { ChevronDown, ChevronUp, ListTodo } from 'lucide-react';
+import { ChevronDown, ChevronUp, CircleArrowRight, ListTodo } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -73,6 +73,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       opacity 0.2s ${cssVar.motionEaseInOut},
       padding 0.2s ${cssVar.motionEaseInOut};
   `,
+  processingRow: css`
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  `,
   progress: css`
     flex: 1;
     height: 4px;
@@ -85,10 +90,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     background: ${cssVar.colorSuccess};
     transition: width 0.3s ${cssVar.motionEaseInOut};
   `,
-  textChecked: css`
+  textCompleted: css`
     color: ${cssVar.colorTextQuaternary};
     text-decoration: line-through;
   `,
+  textProcessing: css`
+    color: ${cssVar.colorText};
+  `,
+  textTodo: css`
+    color: ${cssVar.colorTextSecondary};
+  `,
 }));
 
 interface TodoProgressProps {
@@ -112,11 +123,13 @@ const TodoProgress = memo<TodoProgressProps>(({ className }) => {
   // Calculate progress
   const items = todos?.items || [];
   const total = items.length;
-  const completed = items.filter((item) => item.completed).length;
+  const completed = items.filter((item) => item.status === 'completed').length;
   const progressPercent = total > 0 ? (completed / total) * 100 : 0;
 
-  // Find current pending task (first incomplete item)
-  const currentPendingTask = items.find((item) => !item.completed);
+  // Find current pending task (first non-completed item, prioritize processing)
+  const currentPendingTask =
+    items.find((item) => item.status === 'processing') ||
+    items.find((item) => item.status === 'todo');
 
   // Don't render if no todos
   if (total === 0) return null;
@@ -156,24 +169,44 @@ const TodoProgress = memo<TodoProgressProps>(({ className }) => {
 
         {/* Expandable Todo List */}
         <div className={cx(styles.listContainer, expanded ? styles.expanded : styles.collapsed)}>
-          {items.map((item, index) => (
-            <Checkbox
-              backgroundColor={cssVar.colorSuccess}
-              checked={item.completed}
-              classNames={{
-                text: item.completed ? styles.textChecked : undefined,
-                wrapper: styles.itemRow,
-              }}
-              key={index}
-              shape="circle"
-              style={{ borderWidth: 1.5, cursor: 'default', pointerEvents: 'none' }}
-              textProps={{
-                type: item.completed ? 'secondary' : undefined,
-              }}
-            >
-              {item.text}
-            </Checkbox>
-          ))}
+          {items.map((item, index) => {
+            const isCompleted = item.status === 'completed';
+            const isProcessing = item.status === 'processing';
+
+            // Processing state uses CircleArrowRight icon
+            if (isProcessing) {
+              return (
+                <div className={cx(styles.itemRow, styles.processingRow)} key={index}>
+                  <Icon
+                    icon={CircleArrowRight}
+                    size={17}
+                    style={{ color: cssVar.colorTextSecondary }}
+                  />
+                  <span className={styles.textProcessing}>{item.text}</span>
+                </div>
+              );
+            }
+
+            // Todo and completed states use Checkbox
+            return (
+              <Checkbox
+                backgroundColor={cssVar.colorSuccess}
+                checked={isCompleted}
+                classNames={{
+                  text: cx(styles.textTodo, isCompleted && styles.textCompleted),
+                  wrapper: styles.itemRow,
+                }}
+                key={index}
+                shape="circle"
+                style={{ borderWidth: 1.5, cursor: 'default', pointerEvents: 'none' }}
+                textProps={{
+                  type: isCompleted ? 'secondary' : undefined,
+                }}
+              >
+                {item.text}
+              </Checkbox>
+            );
+          })}
         </div>
       </div>
     </WideScreenContainer>

package/src/features/DataImporter/Error.tsx

@@ -1,7 +1,6 @@
 import { Alert, Button, Flexbox, Highlighter, Icon } from '@lobehub/ui';
 import { Result } from 'antd';
 import { ShieldAlert } from 'lucide-react';
-import Link from 'next/link';
 import React, { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import Balancer from 'react-wrap-balancer';
@@ -41,17 +40,18 @@ const Error = memo<ErrorProps>(({ error, onClick }) => {
         <Balancer>
           <Trans i18nKey="importModal.error.desc" ns={'common'}>
             非常抱歉，数据库升级过程发生异常。请重试升级，或
-            <Link
+            <a
               aria-label={'issue'}
               href={GITHUB_ISSUES}
               onClick={(e) => {
                 e.preventDefault();
                 githubService.submitImportError(error!);
               }}
+              rel="noreferrer"
               target="_blank"
             >
               提交问题
-            </Link>
+            </a>
             我们将会第一时间帮你排查问题。
           </Trans>
         </Balancer>

package/src/features/DevPanel/CacheViewer/cacheProvider.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
 import {
   type PropsWithChildren,
   createContext,
@@ -10,6 +9,8 @@ import {
   useTransition,
 } from 'react';
 
+import { usePathname } from '@/libs/router/navigation';
+
 import { getCacheFiles } from './getCacheEntries';
 import type { NextCacheFileData } from './schema';
 

package/src/features/DevPanel/MetadataViewer/Og.tsx

@@ -1,5 +1,5 @@
 import { Flexbox, Form, Input, TextArea } from '@lobehub/ui';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { memo } from 'react';
 
 import { useHead } from './useHead';

package/src/features/DevPanel/features/FloatPanel.tsx

@@ -5,11 +5,11 @@ import { ActionIcon, Flexbox, FluentEmoji, Icon, SideNav } from '@lobehub/ui';
 import { FloatButton } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { BugIcon, BugOff, XIcon } from 'lucide-react';
-import { usePathname } from 'next/navigation';
 import { type ReactNode, memo, useEffect, useState } from 'react';
 import { Rnd } from 'react-rnd';
 
 import { isDesktop } from '@/const/version';
+import { usePathname } from '@/libs/next/navigation';
 
 // 定义样式
 const styles = createStaticStyles(({ css }) => {

package/src/features/DevPanel/features/Table/TooltipContent.tsx

@@ -1,6 +1,5 @@
 import { Flexbox, Highlighter } from '@lobehub/ui';
-import Image from 'next/image';
-import Link from 'next/link';
+import Image from '@/libs/next/Image';
 import { type ReactNode, memo } from 'react';
 
 const TooltipContent = memo<{ children: ReactNode }>(({ children }) => {
@@ -19,9 +18,9 @@ const TooltipContent = memo<{ children: ReactNode }>(({ children }) => {
 
   if (children.startsWith('http'))
     return (
-      <Link href={children} target={'_blank'}>
+      <a href={children} rel="noreferrer" target="_blank">
         {children}
-      </Link>
+      </a>
     );
 
   const code = children.trim().trimEnd();

package/src/features/DevPanel/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { BookText, Cog, FlagIcon, GlobeLockIcon } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import CacheViewer from './CacheViewer';
 import FeatureFlagViewer from './FeatureFlagViewer';

package/src/features/EditorCanvas/InlineToolbar.tsx

@@ -1,11 +1,6 @@
 'use client';
 
-import {
-  HotkeyEnum,
-  INSERT_HEADING_COMMAND,
-  getHotkeyById,
-  type IEditor,
-} from '@lobehub/editor';
+import { HotkeyEnum, type IEditor, INSERT_HEADING_COMMAND, getHotkeyById } from '@lobehub/editor';
 import {
   ChatInputActions,
   type ChatInputActionsProps,

package/src/features/FileViewer/NotSupport/index.tsx

@@ -1,6 +1,5 @@
 import { Button, Center, Flexbox, FluentEmoji } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import Link from 'next/link';
 import { type CSSProperties, type ComponentType, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -37,9 +36,9 @@ const NotSupport: ComponentType<NotSupportProps> = ({ fileName, url, style }) =>
           <Flexbox style={{ textAlign: 'center' }}>
             <Trans i18nKey="preview.unsupportedFileAndContact" ns={'file'}>
               此文件格式暂不支持在线预览，如有预览诉求，欢迎
-              <Link aria-label={'todo'} href={MORE_FILE_PREVIEW_REQUEST_URL} target="_blank">
+              <a aria-label={'todo'} href={MORE_FILE_PREVIEW_REQUEST_URL} rel="noreferrer" target="_blank">
                 反馈给我们
-              </Link>
+              </a>
             </Trans>
           </Flexbox>
           {url && (

package/src/features/Follow/index.tsx

@@ -4,7 +4,6 @@ import { SiDiscord, SiGithub, SiMedium, SiX } from '@icons-pack/react-simple-ico
 import { SOCIAL_URL } from '@lobechat/business-const';
 import { ActionIcon, Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -30,30 +29,30 @@ const Follow = memo(() => {
   const { t } = useTranslation('common');
   return (
     <Flexbox gap={8} horizontal>
-      <Link href={GITHUB} rel="noreferrer" target={'_blank'}>
+      <a href={GITHUB} rel="noreferrer" target="_blank">
         <ActionIcon
           className={styles.icon}
           icon={SiGithub as any}
           title={t('follow', { name: 'GitHub' })}
         />
-      </Link>
-      <Link href={SOCIAL_URL.x} rel="noreferrer" target={'_blank'}>
+      </a>
+      <a href={SOCIAL_URL.x} rel="noreferrer" target="_blank">
         <ActionIcon className={styles.icon} icon={SiX as any} title={t('follow', { name: 'X' })} />
-      </Link>
-      <Link href={SOCIAL_URL.discord} rel="noreferrer" target={'_blank'}>
+      </a>
+      <a href={SOCIAL_URL.discord} rel="noreferrer" target="_blank">
         <ActionIcon
           className={styles.icon}
           icon={SiDiscord as any}
           title={t('follow', { name: 'Discord' })}
         />
-      </Link>
-      <Link href={SOCIAL_URL.medium} rel="noreferrer" target={'_blank'}>
+      </a>
+      <a href={SOCIAL_URL.medium} rel="noreferrer" target="_blank">
         <ActionIcon
           className={styles.icon}
           icon={SiMedium as any}
           title={t('follow', { name: 'Medium' })}
         />
-      </Link>
+      </a>
     </Flexbox>
   );
 });

package/src/features/LibraryModal/AddFilesToKnowledgeBase/SelectForm.tsx

@@ -1,8 +1,8 @@
 import { Block, Button, Flexbox, Form, MaterialFileTypeIcon, Select } from '@lobehub/ui';
 import { App } from 'antd';
-import Link from 'next/link';
 import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import RepoIcon from '@/components/LibIcon';
 import { useKnowledgeBaseStore } from '@/store/library';
@@ -34,7 +34,7 @@ const SelectForm = memo<CreateFormProps>(({ onClose, knowledgeBaseId, fileIds })
           <Trans
             components={[
               <span key="0" />,
-              <Link href={`/knowledge/library/${values.id}`} key="1" />,
+              <Link key="1" to={`/knowledge/library/${values.id}`} />,
             ]}
             i18nKey={'addToKnowledgeBase.addSuccess'}
             ns={'knowledgeBase'}

package/src/features/MCP/Scores.tsx

@@ -3,7 +3,7 @@
 import { Center, Flexbox, Icon, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { CircleDashedIcon, HammerIcon, LayersIcon, MessageSquareQuoteIcon } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from '@/libs/router';
 import qs from 'query-string';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/MCPPluginDetail/Nav.tsx

@@ -12,7 +12,6 @@ import {
   PackageCheckIcon,
   SettingsIcon,
 } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -178,21 +177,22 @@ const Nav = memo<NavProps>(
         {nav}
         {!inModal && (
           <Flexbox gap={12} horizontal>
-            <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
+            <a className={styles.link} href={SOCIAL_URL.discord} rel="noreferrer" target="_blank">
               {t('mcp.details.nav.needHelp')}
-            </Link>
+            </a>
             {github?.url && (
               <>
-                <Link className={styles.link} href={github.url} target={'_blank'}>
+                <a className={styles.link} href={github.url} rel="noreferrer" target="_blank">
                   {t('mcp.details.nav.viewSourceCode')}
-                </Link>
-                <Link
+                </a>
+                <a
                   className={styles.link}
                   href={urlJoin(github.url, 'issues')}
-                  target={'_blank'}
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   {t('mcp.details.nav.reportIssue')}
-                </Link>
+                </a>
               </>
             )}
           </Flexbox>

package/src/features/MCPPluginDetail/Overview/TagList.tsx

@@ -2,7 +2,7 @@
 
 import { Flexbox, Tag } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import Link from 'next/link';
+import { Link } from '@/libs/router';
 import qs from 'query-string';
 import { memo } from 'react';
 

package/src/features/MobileTabBar/index.tsx

@@ -2,10 +2,11 @@ import { Icon } from '@lobehub/ui';
 import { TabBar, type TabBarProps } from '@lobehub/ui/mobile';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { Bot, MessageSquare, User } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useRouter } from '@/libs/router/navigation';
+
 import { SidebarTabKey } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 

package/src/features/OllamaSetupGuide/Desktop.tsx

@@ -1,7 +1,6 @@
 import { Ollama } from '@lobehub/icons';
 import { Center } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -17,7 +16,7 @@ const OllamaDesktopSetupGuide = memo(() => {
         description={
           <span>
             <Trans
-              components={[<span key="0" />, <Link href={'https://ollama.com/download'} key="1" />]}
+              components={[<span key="0" />, <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />]}
               i18nKey={'OllamaSetupGuide.install.description'}
               ns={'components'}
             />

package/src/features/PWAInstall/Install.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { BRANDING_NAME } from '@lobechat/business-const';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useEffect, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/features/PWAInstall/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { pwaInstallHandler } from 'pwa-install-handler';
 import { memo, useEffect, useState } from 'react';
 

package/src/features/PluginStore/McpList/index.tsx

@@ -1,6 +1,6 @@
 import { DraggablePanel, Flexbox } from '@lobehub/ui';
 import { cssVar, useTheme } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useRef } from 'react';
 
 import { useServerConfigStore } from '@/store/serverConfig';

package/src/features/PluginStore/PluginList/Detail/Header.tsx

@@ -4,7 +4,6 @@ import { Github } from '@lobehub/icons';
 import { ActionIcon, Avatar, Collapse, Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, useResponsive } from 'antd-style';
 import { DotIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -77,16 +76,17 @@ const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile
             </Flexbox>
             {identifier && (
               <Flexbox align={'center'} gap={6} horizontal>
-                <Link
+                <a
                   href={urlJoin(
                     'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
                     identifier,
                   )}
                   onClick={(e) => e.stopPropagation()}
-                  target={'_blank'}
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <ActionIcon fill={cssVar.colorTextDescription} icon={Github} />
-                </Link>
+                </a>
               </Flexbox>
             )}
           </Flexbox>
@@ -94,9 +94,9 @@ const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile
             <Flexbox>
               <Flexbox align={'center'} gap={4} horizontal>
                 {author && (
-                  <Link href={urlJoin('https://github.com', author)} target={'_blank'}>
+                  <a href={urlJoin('https://github.com', author)} rel="noreferrer" target="_blank">
                     {author}
-                  </Link>
+                  </a>
                 )}
                 <Icon icon={DotIcon} />
                 <PublishedTime

package/src/features/PluginsUI/Render/DefaultType/index.tsx

@@ -1,5 +1,5 @@
 import { Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { Suspense, memo } from 'react';
 
 import { useToolStore } from '@/store/tool';

package/src/features/PluginsUI/Render/MCPType/index.tsx

@@ -1,7 +1,7 @@
 import { Flexbox, Image, Markdown } from '@lobehub/ui';
 import { memo } from 'react';
 
-import Arguments from '@/features/Conversation/Messages/AssistantGroup/Tool/Render/Arguments';
+import Arguments from '@/features/Conversation/Messages/AssistantGroup/Tool/Detail/Arguments';
 import { type ToolCallResult } from '@/libs/mcp';
 
 export interface MCPTypeProps {

package/src/features/Portal/Artifacts/Body/Renderer/index.tsx

@@ -1,5 +1,5 @@
 import { Markdown, Mermaid } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import HTMLRenderer from './HTML';

package/src/features/ResourceManager/components/ChunkDrawer/index.tsx

@@ -1,7 +1,7 @@
 import { Flexbox } from '@lobehub/ui';
 import { Drawer } from 'antd';
 import { cssVar } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import { fileManagerSelectors, useFileStore } from '@/store/file';

package/src/features/ResourceManager/components/Explorer/Header/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { ActionIcon, Flexbox } from '@lobehub/ui';
+import { App } from 'antd';
 import { cssVar } from 'antd-style';
-import { SearchIcon } from 'lucide-react';
+import { BookMinusIcon, FileBoxIcon, SearchIcon, Trash2Icon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +19,8 @@ import ViewSwitcher from '../ToolBar/ViewSwitcher';
 import Breadcrumb from './Breadcrumb';
 
 const Header = memo(() => {
-  const { t } = useTranslation('file');
+  const { t } = useTranslation(['components', 'common', 'file', 'knowledgeBase']);
+  const { modal, message } = App.useApp();
 
   // Get state and actions from store
   const [libraryId, category, onActionClick, selectFileIds] = useResourceManagerStore((s) => [
@@ -29,8 +31,59 @@ const Header = memo(() => {
   ]);
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
 
+  const selectCount = selectFileIds.length;
+  const isMultiSelected = selectCount > 1;
+
   // If no libraryId, show category name or "Resource" for All
-  const leftContent = !libraryId ? (
+  const leftContent = isMultiSelected ? (
+    <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 0 }}>
+      {libraryId ? (
+        <ActionIcon
+          icon={BookMinusIcon}
+          onClick={() => {
+            modal.confirm({
+              okButtonProps: {
+                danger: true,
+              },
+              onOk: async () => {
+                await onActionClick('removeFromKnowledgeBase');
+                message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
+              },
+              title: t('FileManager.actions.confirmRemoveFromKnowledgeBase', {
+                count: selectCount,
+              }),
+            });
+          }}
+          title={t('FileManager.actions.removeFromKnowledgeBase')}
+        />
+      ) : null}
+
+      <ActionIcon
+        icon={FileBoxIcon}
+        onClick={async () => {
+          await onActionClick('batchChunking');
+        }}
+        title={t('FileManager.actions.batchChunking')}
+      />
+
+      <ActionIcon
+        icon={Trash2Icon}
+        onClick={() => {
+          modal.confirm({
+            okButtonProps: {
+              danger: true,
+            },
+            onOk: async () => {
+              await onActionClick('delete');
+              message.success(t('FileManager.actions.deleteSuccess'));
+            },
+            title: t('FileManager.actions.confirmDeleteMultiFiles', { count: selectCount }),
+          });
+        }}
+        title={t('delete', { ns: 'common' })}
+      />
+    </Flexbox>
+  ) : !libraryId ? (
     <Flexbox style={{ marginLeft: 8 }}>
       {category === FilesTabs.All
         ? t('resource', { defaultValue: 'Resource' })
@@ -49,7 +102,7 @@ const Header = memo(() => {
         <>
           <ActionIcon icon={SearchIcon} onClick={() => toggleCommandMenu(true)} />
           <SortDropdown />
-          <BatchActionsDropdown onActionClick={onActionClick} selectCount={selectFileIds.length} />
+          <BatchActionsDropdown onActionClick={onActionClick} selectCount={selectCount} />
           <ViewSwitcher />
           <Flexbox style={{ marginLeft: 8 }}>
             <AddButton />

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -48,11 +48,12 @@ const styles = createStaticStyles(({ css }) => {
     `,
 
     dragOver: css`
-      color: ${cssVar.colorBgElevated} !important;
-      background-color: ${cssVar.colorText} !important;
+      outline: 1px dashed ${cssVar.colorPrimaryBorder};
+      outline-offset: -2px;
 
-      * {
-        color: ${cssVar.colorBgElevated} !important;
+      &,
+      &:hover {
+        background: ${cssVar.colorPrimaryBg};
       }
     `,
 
@@ -510,6 +511,7 @@ const FileListItem = memo<FileListItemProps>(
                 e.stopPropagation();
               }}
               onPointerDown={(e) => e.stopPropagation()}
+              paddingInline={8}
             >
               {!isFolder &&
                 !isPage &&