From b17d97816b17374363f84fe7e38ef21415ab348e Mon Sep 17 00:00:00 2001
From: Giulio Home <3272563+giuliohome@users.noreply.github.com>
Date: Fri, 6 Oct 2023 18:35:13 +0000
Subject: [PATCH] Resizable split panes

---
 src/web/package-lock.json     | 16 ++++++++++++
 src/web/package.json          |  3 ++-
 src/web/src/layout/layout.tsx | 46 ++++++++++++++++++++++++++---------
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/web/package-lock.json b/src/web/package-lock.json
index 4e944a9d..4fcb5c18 100644
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.3.0",
+        "split-pane-react": "^0.1.3",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -16077,6 +16078,15 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split-pane-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/split-pane-react/-/split-pane-react-0.1.3.tgz",
+      "integrity": "sha512-+50VW9+1yglO+2AgL7MhvJ3UazYTqJ4LBJTs44od/D/CTvsqQ9xoDlaHdIpJ5SbXxUqBxvdJD5zoIVnoG+mNTg==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -29910,6 +29920,12 @@
         "wbuf": "^1.7.3"
       }
     },
+    "split-pane-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/split-pane-react/-/split-pane-react-0.1.3.tgz",
+      "integrity": "sha512-+50VW9+1yglO+2AgL7MhvJ3UazYTqJ4LBJTs44od/D/CTvsqQ9xoDlaHdIpJ5SbXxUqBxvdJD5zoIVnoG+mNTg==",
+      "requires": {}
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
diff --git a/src/web/package.json b/src/web/package.json
index d394358a..2e81507c 100644
--- a/src/web/package.json
+++ b/src/web/package.json
@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.3.0",
+    "split-pane-react": "^0.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -75,4 +76,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/web/src/layout/layout.tsx b/src/web/src/layout/layout.tsx
index 4e26fd3e..b54b7904 100644
--- a/src/web/src/layout/layout.tsx
+++ b/src/web/src/layout/layout.tsx
@@ -1,4 +1,6 @@
-import React, { FC, ReactElement, useContext, useEffect, useMemo } from 'react';
+import React, { FC, ReactElement, useContext, useEffect, useMemo, useState } from 'react';
+import SplitPane, { Pane, SashContent } from 'split-pane-react';
+import 'split-pane-react/esm/themes/default.css';
 import Header from './header';
 import Sidebar from './sidebar';
 import { Routes, Route, useNavigate } from 'react-router-dom';
@@ -15,7 +17,14 @@ import { headerStackStyles, mainStackStyles, rootStackStyles, sidebarStackStyles
 import TodoItemDetailPane from '../components/todoItemDetailPane';
 import { bindActionCreators } from '../actions/actionCreators';
 
-const Layout: FC = (): ReactElement => {
+const Layout: FC = (): ReactElement => {  
+    const [sizes, setSizes] = useState([ 300, 'auto', '30%']);
+    const layoutCSS = {
+        height: '100%',
+        display: 'flex',
+        alignItems: 'strech',
+        justifyContent: 'top'
+    };
     const navigate = useNavigate();
     const appContext = useContext<AppContext>(TodoContext)
     const actions = useMemo(() => ({
@@ -49,33 +58,48 @@ const Layout: FC = (): ReactElement => {
     }
 
     return (
-        <Stack styles={rootStackStyles}>
+        <div style={{ height: 800 }}>
+            <Stack styles={rootStackStyles}>
             <Stack.Item styles={headerStackStyles}>
                 <Header></Header>
             </Stack.Item>
-            <Stack horizontal grow={1}>
-                <Stack.Item styles={sidebarStackStyles}>
+            <SplitPane
+                split='vertical'
+                sizes={sizes}
+                onChange={setSizes}
+                sashRender={(_, active) => (
+                    <SashContent active={active} type="vscode" />
+                    )}
+            >
+                <Pane >
+                    <Stack styles={sidebarStackStyles} style={{ ...layoutCSS}}>
                     <Sidebar
                         selectedList={appContext.state.selectedList}
                         lists={appContext.state.lists}
                         onListCreate={onListCreated} />
-                </Stack.Item>
-                <Stack.Item grow={1} styles={mainStackStyles}>
+                    </Stack>
+                </Pane>
+                <Pane>
+                    <Stack styles={mainStackStyles} style={{ ...layoutCSS}}>
                     <Routes>
                         <Route path="/lists/:listId/items/:itemId" element={<HomePage />} />
                         <Route path="/lists/:listId" element={<HomePage />} />
                         <Route path="/lists" element={<HomePage />} />
                         <Route path="/" element={<HomePage />} />
                     </Routes>
-                </Stack.Item>
-                <Stack.Item styles={sidebarStackStyles}>
+                    </Stack>
+                </Pane>
+                <Pane>
+                    <Stack styles={sidebarStackStyles} style={{ ...layoutCSS}}>
                     <TodoItemDetailPane
                         item={appContext.state.selectedItem}
                         onEdit={onItemEdited}
                         onCancel={onItemEditCancel} />
-                </Stack.Item>
+                    </Stack>
+                </Pane>
+            </SplitPane>
             </Stack>
-        </Stack>
+        </div>
     );
 }