Fix: Optimize list display and rename functionality #3221 (#9875)

### What problem does this PR solve?

Fix: Optimize list display and rename functionality #3221

- Updated the homepage search list display style and added rename
functionality
- Used the RenameDialog component for rename searches
- Optimized list height calculation
- Updated the style and layout of related pages
- fix issue #9779

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/home/index.tsx

@@ -7,8 +7,10 @@ const Home = () => {
     <div className="mx-8">
       <section>
         <NextBanner></NextBanner>
-        <Datasets></Datasets>
-        <Applications></Applications>
+        <section className="h-[calc(100dvh-260px)] overflow-auto scrollbar-thin">
+          <Datasets></Datasets>
+          <Applications></Applications>
+        </section>
       </section>
     </div>
   );

web/src/pages/home/search-list.tsx

@@ -1,20 +1,57 @@
+import { IconFont } from '@/components/icon-font';
+import { MoreButton } from '@/components/more-button';
+import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { useFetchSearchList } from '../next-searches/hooks';
+import { useFetchSearchList, useRenameSearch } from '../next-searches/hooks';
+import { SearchDropdown } from '../next-searches/search-dropdown';
 import { ApplicationCard } from './application-card';
 
 export function SearchList() {
-  const { data } = useFetchSearchList();
+  const { data, refetch: refetchList } = useFetchSearchList();
   const { navigateToSearch } = useNavigatePage();
-
-  return data?.data.search_apps.slice(0, 10).map((x) => (
-    <ApplicationCard
-      key={x.id}
-      app={{
-        avatar: x.avatar,
-        title: x.name,
-        update_time: x.update_time,
-      }}
-      onClick={navigateToSearch(x.id)}
-    ></ApplicationCard>
-  ));
+  const {
+    openCreateModal,
+    showSearchRenameModal,
+    hideSearchRenameModal,
+    searchRenameLoading,
+    onSearchRenameOk,
+    initialSearchName,
+  } = useRenameSearch();
+  const onSearchRenameConfirm = (name: string) => {
+    onSearchRenameOk(name, () => {
+      refetchList();
+    });
+  };
+  return (
+    <>
+      {data?.data.search_apps.slice(0, 10).map((x) => (
+        <ApplicationCard
+          key={x.id}
+          app={{
+            avatar: x.avatar,
+            title: x.name,
+            update_time: x.update_time,
+          }}
+          onClick={navigateToSearch(x.id)}
+          moreDropdown={
+            <SearchDropdown
+              dataset={x}
+              showSearchRenameModal={showSearchRenameModal}
+            >
+              <MoreButton></MoreButton>
+            </SearchDropdown>
+          }
+        ></ApplicationCard>
+      ))}
+      {openCreateModal && (
+        <RenameDialog
+          hideModal={hideSearchRenameModal}
+          onOk={onSearchRenameConfirm}
+          initialName={initialSearchName}
+          loading={searchRenameLoading}
+          title={<IconFont name="search" className="size-6"></IconFont>}
+        ></RenameDialog>
+      )}
+    </>
+  );
 }