search results styling

ui2/src/components/Header/Search.tsx

@@ -6,7 +6,7 @@ import {fetchPaginatedSearchResults} from "@/slices/dualPanel/dualPanel"
 
 export default function Search() {
   const dispatch = useDispatch()
-  const [value, setValue] = useState("Clear me")
+  const [value, setValue] = useState("")
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.currentTarget.value)

ui2/src/components/SearchResults/SearchResultItem.tsx

@@ -1,10 +1,30 @@
+import {Group} from "@mantine/core"
 import type {SearchResultNode} from "@/types"
+import classes from "./item.module.css"
 
 type Args = {
   item: SearchResultNode
   onClick: (item: SearchResultNode) => void
 }
 
 export default function SearchResultItem({item, onClick}: Args) {
-  return <div onClick={() => onClick(item)}>{item.title}</div>
+  if (item.entity_type == "folder") {
+    return (
+      <Group
+        className={classes.item}
+        my={"sm"}
+        align="center"
+        onClick={() => onClick(item)}
+      >
+        <div className={classes.folderIcon}></div>
+        <div className={classes.title}>{item.title}</div>
+      </Group>
+    )
+  }
+
+  return (
+    <Group className={classes.item} my={"sm"} onClick={() => onClick(item)}>
+      <div className={classes.title}>{item.title}</div>
+    </Group>
+  )
 }

ui2/src/components/SearchResults/SearchResults.tsx

@@ -1,13 +1,22 @@
 import {Flex} from "@mantine/core"
-import {useDispatch} from "react-redux"
+import {useDispatch, useSelector} from "react-redux"
+import type {RootState} from "@/app/types"
 
-import {fetchPaginatedDocument} from "@/slices/dualPanel/dualPanel"
+import {
+  fetchPaginatedDocument,
+  fetchPaginatedNodes,
+  selectLastPageSize,
+  setCurrentNode
+} from "@/slices/dualPanel/dualPanel"
 import ActionButtons from "./ActionButtons"
 import SearchResultItems from "./SearchResultItems"
 import {SearchResultNode} from "@/types"
 
 export default function SearchResults() {
   const dispatch = useDispatch()
+  const lastPageSize = useSelector((state: RootState) =>
+    selectLastPageSize(state, "secondary")
+  )
 
   const onClick = (item: SearchResultNode) => {
     if (item.entity_type == "document") {
@@ -18,6 +27,20 @@ export default function SearchResults() {
           urlParams: new URLSearchParams("page_size=100")
         })
       )
+    } else if (item.entity_type == "folder") {
+      dispatch(
+        fetchPaginatedNodes({
+          nodeId: item.id,
+          panel: "secondary",
+          urlParams: new URLSearchParams(`page_size=${lastPageSize}`)
+        })
+      )
+      dispatch(
+        setCurrentNode({
+          node: {id: item.id, ctype: "folder", breadcrumb: null},
+          panel: "secondary"
+        })
+      )
     }
   }
 

ui2/src/components/SearchResults/item.module.css

@@ -0,0 +1,15 @@
+.item {
+  cursor: pointer;
+}
+
+.folderIcon {
+  margin-bottom: 0.7rem;
+  background-image: url("/public/folder.svg");
+  background-size: 100% 100%;
+  width: 32px;
+  height: 32px;
+}
+
+.title:hover {
+  text-decoration: underline;
+}