wip

ui2/src/components/Viewer/ActionButtons.tsx

@@ -0,0 +1,16 @@
+import {Group} from "@mantine/core"
+import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
+import EditTitleButton from "./EditTitleButton"
+
+export default function ActionButtons() {
+  return (
+    <Group justify="space-between">
+      <Group>
+        <EditTitleButton />
+      </Group>
+      <Group>
+        <ToggleSecondaryPanel />
+      </Group>
+    </Group>
+  )
+}

ui2/src/components/Viewer/EditTitleButton.tsx

@@ -0,0 +1,47 @@
+import {useContext} from "react"
+import {Tooltip, ActionIcon} from "@mantine/core"
+import {IconEdit} from "@tabler/icons-react"
+
+import {useSelector, useDispatch} from "react-redux"
+import {
+  selectSelectedNodes,
+  nodeUpdated,
+  clearNodesSelection
+} from "@/slices/dualPanel/dualPanel"
+import edit_node_title from "@/components/modals/EditNodeTitle"
+
+import type {RootState} from "@/app/types"
+
+import type {NodeType, PanelMode} from "@/types"
+
+import PanelContext from "@/contexts/PanelContext"
+
+export default function EditTitleButton() {
+  const mode: PanelMode = useContext(PanelContext)
+  const dispatch = useDispatch()
+  const selectedNodes = useSelector((state: RootState) =>
+    selectSelectedNodes(state, mode)
+  )
+  const onEditNodeTitle = () => {
+    if (selectedNodes.length < 1) {
+      console.log("Error: no selected nodes")
+      return
+    }
+
+    let node: NodeType = selectedNodes[0]
+
+    edit_node_title(node)
+      .then((node: NodeType) => {
+        dispatch(nodeUpdated({node, mode}))
+      })
+      .finally(() => dispatch(clearNodesSelection(mode)))
+  }
+
+  return (
+    <Tooltip label="Change title" withArrow>
+      <ActionIcon size={"lg"} variant="default" onClick={onEditNodeTitle}>
+        <IconEdit stroke={1.4} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}

ui2/src/components/Viewer/Viewer.tsx

@@ -4,6 +4,7 @@ import {useNavigate} from "react-router-dom"
 import type {PanelMode, NType} from "@/types"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import PanelContext from "@/contexts/PanelContext"
+import ActionButtons from "./ActionButtons"
 
 export default function Viewer() {
   const mode: PanelMode = useContext(PanelContext)
@@ -15,8 +16,10 @@ export default function Viewer() {
       navigate(`/folder/${node.id}`)
     }
   }
+
   return (
     <div>
+      <ActionButtons />
       <Breadcrumbs onClick={onClick} />
     </div>
   )

ui2/src/slices/dualPanel/helpers.ts

@@ -118,7 +118,7 @@ export function setCurrentNodeHelper({
       // viewer. Here node.ctype == "document"
       state.mainPanel.commander = null
       state.mainPanel.viewer = {
-        breadcrumb: []
+        breadcrumb: null
       }
     }
   }

ui2/src/slices/dualPanel/types.ts

@@ -41,7 +41,7 @@ export interface Commander {
 }
 
 export interface Viewer {
-  breadcrumb: Array<BreadcrumbItemType>
+  breadcrumb: Array<BreadcrumbItemType> | null
 }
 
 export interface SinglePanel {