Refactor DocSearchView layout and update button text

- Added a new <Box> component to wrap <DocSearch> and <DocSort> for improved styling.
- Changed button text from "New post" to "New filter".
- Removed the old <Box> structure and integrated its contents into the new layout.

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -40,16 +40,25 @@ export function DocSearchView({ posts }: Props) {
   }, []);
 
   //#region example components
-    // <DocSearch posts={posts} />
+    // <Box
-    // <DocSort
+    //   sx={{
-    //   sortBy={sortBy}
+    //     mb: 5,
-    //   onSort={handleSort}
+    //     display: 'flex',
-    //   options={[
+    //     alignItems: 'center',
-    //     { value: 'latest', label: 'Latest' },
+    //     justifyContent: 'space-between',
-    //     { value: 'popular', label: 'Popular' },
+    //   }}
-    //     { value: 'oldest', label: 'Oldest' },
+    // >
-    //   ]}
+    //   <DocSearch posts={posts} />
-    // />
+    //   <DocSort
+    //     sortBy={sortBy}
+    //     onSort={handleSort}
+    //     options={[
+    //       { value: 'latest', label: 'Latest' },
+    //       { value: 'popular', label: 'Popular' },
+    //       { value: 'oldest', label: 'Oldest' },
+    //     ]}
+    //   />
+    // </Box>
   //#endregion
 
   return (
@@ -70,30 +79,10 @@ export function DocSearchView({ posts }: Props) {
           color="inherit"
           startIcon={<Iconify icon="mingcute:add-line" />}
         >
-          New post
+          New filter
         </Button>
       </Box>
 
-      <Box
-        sx={{
-          mb: 5,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <DocSearch posts={posts} />
-        <DocSort
-          sortBy={sortBy}
-          onSort={handleSort}
-          options={[
-            { value: 'latest', label: 'Latest' },
-            { value: 'popular', label: 'Popular' },
-            { value: 'oldest', label: 'Oldest' },
-          ]}
-        />
-      </Box>
-
       <>
         {filters.map((filter, index) =>
         (