From 2357234f39eb06a52ecea79071607547351cd1d8 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 13 Oct 2025 17:11:51 +0800
Subject: [PATCH] chore: sidebar ui

---
 web/app/components/explore/app-list/index.tsx        |  2 +-
 web/app/components/explore/item-operation/index.tsx  |  2 +-
 .../explore/sidebar/app-nav-item/index.tsx           |  2 +-
 web/app/components/explore/sidebar/index.tsx         | 12 ++++++------
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index bd7b84f6a0..ce7f4c311f 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -151,7 +151,7 @@ const Apps = ({
 
   return (
     <div className={cn(
-      'flex h-full flex-col border-l-[0.5px] border-divider-regular',
+      'flex h-full flex-col',
     )}>
       {systemFeatures.enable_explore_banner && (
         <div className='mt-4 px-12'>
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 6fd11fd084..3959f4710e 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -52,7 +52,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
       <PortalToFollowElemTrigger
         onClick={() => setOpen(v => !v)}
       >
-        <div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} !bg-components-actionbar-bg !shadow-none`)}></div>
+        <div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open}`)}></div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent
         className="z-50"
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index 9b3ca09be6..7fe988404d 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -57,7 +57,7 @@ export default function AppNavItem({
         <>
           <div className='flex w-0 grow items-center space-x-2'>
             <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />
-            <div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div>
+            <div className='system-sm-regular truncate text-components-menu-item-text' title={name}>{name}</div>
           </div>
           <div className='h-6 shrink-0' onClick={e => e.stopPropagation()}>
             <ItemOperation
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 7567b9442d..c936029fea 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -72,21 +72,21 @@ const SideBar: FC<IExploreSideBarProps> = ({
 
   const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length
   return (
-    <div className='w-fit shrink-0 cursor-pointer border-r border-divider-burn px-4 pt-6 sm:w-[216px]'>
+    <div className='w-fit shrink-0 cursor-pointer px-4 pt-6 sm:w-[240px]'>
       <Link
         href='/explore/apps'
         className={cn(isDiscoverySelected ? 'bg-state-base-active' : 'hover:bg-state-base-hover',
           'flex h-8 items-center gap-2 rounded-lg px-1 mobile:w-fit mobile:justify-center pc:w-full pc:justify-start')}
       >
-        <div className='flex size-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid'>
+        <div className='flex size-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid'>
           <RiAppsFill className='size-3.5 text-components-avatar-shape-fill-stop-100' />
         </div>
-        {!isMobile && <div className={cn(isDiscoverySelected ? 'system-sm-semibold text-components-menu-item-text-active' : 'system-sm-regular text-components-menu-item-text')}>{t('explore.sidebar.title')}</div>}
+        {!isMobile && <div className={cn('truncate', isDiscoverySelected ? 'system-sm-semibold text-components-menu-item-text-active' : 'system-sm-regular text-components-menu-item-text')}>{t('explore.sidebar.title')}</div>}
       </Link>
       {installedApps.length > 0 && (
-        <div className='mt-10'>
-          <p className='break-all pl-2 text-xs font-medium uppercase text-text-tertiary mobile:px-0'>{t('explore.sidebar.webApps')}</p>
-          <div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
+        <div className='mt-5'>
+          <p className='system-xs-medium-uppercase break-all pl-2 uppercase text-text-tertiary mobile:px-0'>{t('explore.sidebar.webApps')}</p>
+          <div className='mt-1.5 space-y-0.5 overflow-y-auto overflow-x-hidden'
             style={{
               height: 'calc(100vh - 250px)',
             }}