pass mode as context

ui2/src/components/Commander/Commander.tsx

@@ -1,3 +1,4 @@
+import {useContext} from "react"
 import {Group} from "@mantine/core"
 
 import {useSelector, useDispatch} from "react-redux"
@@ -20,12 +21,10 @@ import type {RootState} from "@/app/types"
 import type {NType, NodeType, PanelMode} from "@/types"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import Pagination from "@/components/Pagination"
+import PanelContext from "@/contexts/PanelContext"
 
-type Args = {
-  mode: PanelMode
-}
-
-export default function Commander({mode}: Args) {
+export default function Commander() {
+  const mode: PanelMode = useContext(PanelContext)
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const {data, status, error} = useSelector((state: RootState) =>
@@ -111,14 +110,14 @@ export default function Commander({mode}: Args) {
   }
 
   const nodes = data.map((n: NodeType) => (
-    <Node onClick={onClick} key={n.id} node={n} mode={mode} />
+    <Node onClick={onClick} key={n.id} node={n} />
   ))
 
   if (nodes.length > 0) {
     return (
       <div>
-        <FolderNodeActions mode={mode} />
-        <Breadcrumbs mode={mode} onClick={onClick} />
+        <FolderNodeActions />
+        <Breadcrumbs onClick={onClick} />
         <Group>{nodes}</Group>
         <Pagination
           pagination={pagination}
@@ -132,8 +131,8 @@ export default function Commander({mode}: Args) {
 
   return (
     <div>
-      <FolderNodeActions mode={mode} />
-      <Breadcrumbs mode={mode} onClick={onClick} />
+      <FolderNodeActions />
+      <Breadcrumbs onClick={onClick} />
       <Group>Empty</Group>
     </div>
   )

ui2/src/components/DualPanel/DualPanel.tsx

@@ -3,17 +3,27 @@ import {useSelector} from "react-redux"
 import {selectPanels} from "@/slices/dualPanel"
 import SinglePanel from "@/components/SinglePanel"
 
+import PanelContext from "@/contexts/PanelContext"
+
 export default function DualPanel() {
   const [_, secondaryPanel] = useSelector(selectPanels)
 
   if (secondaryPanel) {
     return (
       <Group grow justify="space-between">
-        <SinglePanel mode="main" />
-        <SinglePanel mode="secondary" />
+        <PanelContext.Provider value={"main"}>
+          <SinglePanel />
+        </PanelContext.Provider>
+        <PanelContext.Provider value={"secondary"}>
+          <SinglePanel />
+        </PanelContext.Provider>
       </Group>
     )
   }
 
-  return <SinglePanel mode="main" />
+  return (
+    <PanelContext.Provider value="main">
+      <SinglePanel />
+    </PanelContext.Provider>
+  )
 }

ui2/src/components/SinglePanel/SinglePanel.tsx

@@ -1,24 +1,24 @@
+import {useContext} from "react"
+
 import {selectPanelComponents} from "@/slices/dualPanel"
 import {useSelector} from "react-redux"
 import Commander from "@/components/Commander"
 import Viewer from "@/components/Viewer"
+import PanelContext from "@/contexts/PanelContext"
 import {PanelMode} from "@/types"
 import {RootState} from "@/app/types"
 
-type Args = {
-  mode: PanelMode
-}
-
-export default function SinglePanel({mode}: Args) {
+export default function SinglePanel() {
+  const mode: PanelMode = useContext(PanelContext)
   const [commander, viewer] = useSelector((state: RootState) =>
     selectPanelComponents(state, mode)
   )
   if (commander) {
-    return <Commander mode={mode} />
+    return <Commander />
   }
 
   if (viewer) {
-    return <Viewer mode={mode} />
+    return <Viewer />
   }
 
   return <>Error: neither viewer nor commander</>

ui2/src/components/Viewer/Viewer.tsx

@@ -1,9 +1,3 @@
-import {PanelMode} from "@/types"
-
-type Args = {
-  mode: PanelMode
-}
-
-export default function Viewer({mode}: Args) {
-  return <div>Viewer {mode}</div>
+export default function Viewer() {
+  return <div>Viewer</div>
 }

ui2/src/contexts/PanelContext.ts

@@ -0,0 +1,6 @@
+import {createContext} from "react"
+import type {PanelMode} from "@/types"
+
+const PanelContext = createContext<PanelMode>("main")
+
+export default PanelContext