From 8c31b69c8e03dcfa72696ff650bacc9c90c4db61 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 5 Feb 2026 14:44:51 +0800
Subject: [PATCH] chore: sticky the applist header in explore page (#31967)

---
 web/app/components/explore/app-list/index.tsx | 121 +++++++++---------
 web/app/components/explore/index.tsx          |   2 +-
 2 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 04f75107da..5021185a03 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -159,69 +159,74 @@ const Apps = ({
 
   return (
     <div className={cn(
-      'flex h-full flex-col border-l-[0.5px] border-divider-regular',
+      'flex h-full min-h-0 flex-col overflow-hidden border-l-[0.5px] border-divider-regular',
     )}
     >
-      {systemFeatures.enable_explore_banner && (
-        <div className="mt-4 px-12">
-          <Banner />
-        </div>
-      )}
-      <div className={cn(
-        'mt-6 flex items-center justify-between px-12',
-      )}
-      >
-        <div className="flex items-center">
-          <div className="system-xl-semibold grow truncate text-text-primary">{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}</div>
-          {hasFilterCondition && (
-            <>
-              <div className="mx-3 h-4 w-px bg-divider-regular"></div>
-              <Button size="medium" onClick={handleResetFilter}>{t('apps.resetFilter', { ns: 'explore' })}</Button>
-            </>
-          )}
-        </div>
-        <Input
-          showLeftIcon
-          showClearIcon
-          wrapperClassName="w-[200px] self-start"
-          value={keywords}
-          onChange={e => handleKeywordsChange(e.target.value)}
-          onClear={() => handleKeywordsChange('')}
-        />
-      </div>
+      <div className="flex flex-1 flex-col overflow-y-auto">
+        {systemFeatures.enable_explore_banner && (
+          <div className="mt-4 px-12">
+            <Banner />
+          </div>
+        )}
 
-      <div className="mt-2 px-12">
-        <Category
-          list={categories}
-          value={currCategory}
-          onChange={setCurrCategory}
-          allCategoriesEn={allCategoriesEn}
-        />
-      </div>
-
-      <div className={cn(
-        'relative mt-4 flex flex-1 shrink-0 grow flex-col overflow-auto pb-6',
-      )}
-      >
-        <nav
-          className={cn(
-            s.appList,
-            'grid shrink-0 content-start gap-4 px-6 sm:px-12',
+        <div className="sticky top-0 z-10 bg-background-body">
+          <div className={cn(
+            'flex items-center justify-between px-12 pt-6',
           )}
-        >
-          {searchFilteredList.map(app => (
-            <AppCard
-              key={app.app_id}
-              isExplore
-              app={app}
-              canCreate={hasEditPermission}
-              onCreate={() => {
-                setCurrApp(app)
-                setIsShowCreateModal(true)
-              }}
+          >
+            <div className="flex items-center">
+              <div className="system-xl-semibold grow truncate text-text-primary">{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}</div>
+              {hasFilterCondition && (
+                <>
+                  <div className="mx-3 h-4 w-px bg-divider-regular"></div>
+                  <Button size="medium" onClick={handleResetFilter}>{t('apps.resetFilter', { ns: 'explore' })}</Button>
+                </>
+              )}
+            </div>
+            <Input
+              showLeftIcon
+              showClearIcon
+              wrapperClassName="w-[200px] self-start"
+              value={keywords}
+              onChange={e => handleKeywordsChange(e.target.value)}
+              onClear={() => handleKeywordsChange('')}
             />
-          ))}
-        </nav>
+          </div>
+
+          <div className="px-12 pb-4 pt-2">
+            <Category
+              list={categories}
+              value={currCategory}
+              onChange={setCurrCategory}
+              allCategoriesEn={allCategoriesEn}
+            />
+          </div>
+        </div>
+
+        <div className={cn(
+          'relative flex flex-1 shrink-0 grow flex-col pb-6',
+        )}
+        >
+          <nav
+            className={cn(
+              s.appList,
+              'grid shrink-0 content-start gap-4 px-6 sm:px-12',
+            )}
+          >
+            {searchFilteredList.map(app => (
+              <AppCard
+                key={app.app_id}
+                isExplore
+                app={app}
+                canCreate={hasEditPermission}
+                onCreate={() => {
+                  setCurrApp(app)
+                  setIsShowCreateModal(true)
+                }}
+              />
+            ))}
+          </nav>
+        </div>
       </div>
       {isShowCreateModal && (
         <CreateAppModal
diff --git a/web/app/components/explore/index.tsx b/web/app/components/explore/index.tsx
index 0b5e18a1de..2576ee4007 100644
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@@ -71,7 +71,7 @@ const Explore: FC<IExploreProps> = ({
         }
       >
         <Sidebar controlUpdateInstalledApps={controlUpdateInstalledApps} />
-        <div className="w-0 grow">
+        <div className="h-full min-h-0 w-0 grow">
           {children}
         </div>
       </ExploreContext.Provider>