Add flexlayout (#22)

Author: hyp3rflow

.pnp.cjs

@@ -11,6 +11,7 @@
     "@types/chrome": "^0.0.171",
     "@types/node": "^17.0.0",
     "@types/react": "17.0.26",
+    "flexlayout-react": "^0.7.3",
     "jotai": "^1.4.8",
     "next": "11.1.2",
     "normalize.css": "^8.0.1",

.yarn/cache/@next-swc-darwin-arm64-npm-11.1.2-df4a11023e-8.zip

@@ -2,6 +2,7 @@ import type { AppProps } from "next/app";
 import "normalize.css/normalize.css";
 import "open-color/open-color.css";
 import "./_app.scss";
+import "flexlayout-react/style/dark.scss";
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

.yarn/cache/uuid-npm-8.3.2-eca0baba53-5575a8a75c.zip

@@ -27,8 +27,13 @@
   }
 }
 
+#__next {
+  height: 100%;
+}
+
 body {
   color: var(--pb-fg);
+  background: var(--pb-bg);
   max-height: 100vh;
 }
 

package.json

@@ -1,5 +1,6 @@
 .main-panel {
   display: flex;
+  height: 100%;
 }
 
 .side-page {
@@ -22,12 +23,13 @@
 }
 
 .main-page {
+  display: flex;
+  flex-direction: column;
   flex: 1;
 }
 
 .request-list {
-  display: flex;
-  flex-direction: column;
+  height: 100%;
 
   background-color: var(--oc-gray-2);
   border-right: 1px solid var(--pb-sep);

src/pages/_app.page.tsx

@@ -1,10 +1,11 @@
 import type { NextPage } from "next";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useAtom } from "jotai";
 import { useUpdateAtom } from "jotai/utils";
 import style from "./index.module.scss";
 import Events from "../Events";
 import {
+  requestsAtom,
   updateRequestAtom,
   updateRequestErrorAtom,
   updateRequestPayloadAtom,
@@ -21,9 +22,54 @@ import Settings from "./index/Settings";
 import Experimental from "./index/Experimental";
 import SidePage from "./index/SidePage";
 import { sidePageStatusAtom } from "./index/atoms/page";
+import * as FlexLayout from "flexlayout-react";
+
+const json: FlexLayout.IJsonModel = {
+  global: {
+    borderEnableDrop: false,
+  },
+  borders: [
+    {
+      type: "border",
+      location: "left",
+      selected: 0,
+      children: [
+        {
+          type: "tab",
+          enableDrag: false,
+          enableClose: false,
+          name: "Requests",
+          component: "RequestList",
+        },
+      ],
+    },
+  ],
+  layout: {
+    type: "row",
+    weight: 100,
+    children: [
+      {
+        id: "RequestDetail",
+        type: "tabset",
+        weight: 50,
+        children: [
+          {
+            type: "tab",
+            enableClose: false,
+            name: "Detail",
+            component: "RequestDetail",
+          },
+        ],
+      },
+    ],
+  },
+};
+const model = FlexLayout.Model.fromJson(json);
 
 const Page: NextPage = () => {
+  const layoutRef = useRef<FlexLayout.Layout>(null);
   const [isSidePageOpened] = useAtom(sidePageStatusAtom);
+  const [requests] = useAtom(requestsAtom);
   useDevtoolsCommunicationLogic();
   return (
     <div className={style["main-panel"]}>
@@ -37,11 +83,38 @@ const Page: NextPage = () => {
           <Settings />
           {process.env.NODE_ENV === "development" && <Experimental />}
         </div>
-        <div className={style["request-page"]}>
-          <div className={style["request-list"]}>
-            <RequestList />
-          </div>
-          <RequestDetail />
+        <div style={{ position: "relative", flex: 1 }}>
+          <FlexLayout.Layout
+            ref={layoutRef}
+            model={model}
+            factory={(node) => {
+              const component = node.getComponent();
+              switch (component) {
+                case "RequestList": {
+                  return (
+                    <div className={style["request-list"]}>
+                      <RequestList
+                        onRequestDragMouseDown={(key, name) => {
+                          layoutRef.current?.addTabWithDragAndDrop(name, {
+                            id: key,
+                            component: "RequestDetail",
+                            name,
+                          });
+                        }}
+                      />
+                    </div>
+                  );
+                }
+                case "RequestDetail": {
+                  const id = node.getId();
+                  if (id) {
+                    return <RequestDetail requestAtom={requests[id]} />;
+                  }
+                  return <RequestDetail />;
+                }
+              }
+            }}
+          />
         </div>
       </div>
     </div>

src/pages/_app.scss

@@ -1,4 +1,5 @@
 .request-detail {
+  height: 100%;
   @media (prefers-color-scheme: dark) {
     background-color: var(--oc-gray-9);
   }

src/pages/index.module.scss

@@ -1,13 +1,19 @@
 import { memo } from "react";
-import { useAtom } from "jotai";
+import { Atom, useAtom } from "jotai";
 import { selectedRequestAtom } from "../atoms/ui";
+import { Request } from "../atoms/request";
 import style from "./index.module.scss";
 import Tabs from "../../../components/Tabs";
 import JsonView from "../../../components/JsonView";
 
-interface RequestDetailProps {}
-const RequestDetail: React.FC<RequestDetailProps> = () => {
-  const [selectedRequest] = useAtom(selectedRequestAtom);
+interface RequestDetailProps {
+  requestAtom?: Atom<Request | undefined>;
+}
+const RequestDetail: React.FC<RequestDetailProps> = ({
+  requestAtom = selectedRequestAtom,
+}) => {
+  const [selectedRequest] = useAtom(requestAtom);
+  console.log(selectedRequest);
   if (!selectedRequest) {
     return <div className={style["request-detail"]}></div>;
   }
@@ -17,11 +23,13 @@ const RequestDetail: React.FC<RequestDetailProps> = () => {
         tabs={{
           request: {
             label: () => "Request",
-            Component: RequestDetailRequest,
+            Component: () => <RequestDetailRequest requestAtom={requestAtom} />,
           },
           response: {
             label: () => "Response",
-            Component: RequestDetailResponse,
+            Component: () => (
+              <RequestDetailResponse requestAtom={requestAtom} />
+            ),
           },
         }}
       />
@@ -30,8 +38,10 @@ const RequestDetail: React.FC<RequestDetailProps> = () => {
 };
 export default memo(RequestDetail);
 
-const RequestDetailRequest: React.FC = () => {
-  const [selectedRequest] = useAtom(selectedRequestAtom);
+const RequestDetailRequest: React.FC<RequestDetailProps> = ({
+  requestAtom = selectedRequestAtom,
+}) => {
+  const [selectedRequest] = useAtom(requestAtom);
   if (!selectedRequest) return null;
   const [requestPayloads] = useAtom(selectedRequest.requestPayloadsAtom);
   const { requestError } = selectedRequest;
@@ -59,8 +69,10 @@ const RequestDetailRequest: React.FC = () => {
   );
 };
 
-const RequestDetailResponse: React.FC = () => {
-  const [selectedRequest] = useAtom(selectedRequestAtom);
+const RequestDetailResponse: React.FC<RequestDetailProps> = ({
+  requestAtom = selectedRequestAtom,
+}) => {
+  const [selectedRequest] = useAtom(requestAtom);
   if (!selectedRequest) return null;
   const { headerJson, trailerJson, responseError } = selectedRequest;
   const [responsePayloads] = useAtom(selectedRequest.responsePayloadsAtom);

src/pages/index.page.tsx

@@ -26,30 +26,48 @@
     text-overflow: ellipsis;
   }
 
-  .list-status {
+  .list-right {
     flex-shrink: 0;
-    position: relative;
-    color: var(--pb-fg-active);
+    display: flex;
+    flex-direction: row;
 
-    .payload-circle {
-      background-color: var(--oc-green-8);
-    }
+    .list-status {
+      flex-shrink: 0;
+      position: relative;
+      color: var(--pb-fg-active);
 
-    .error-circle {
-      background-color: var(--oc-red-8);
-    }
+      .payload-circle {
+        background-color: var(--oc-green-8);
+      }
 
-    .payload-circle,
-    .error-circle {
-      margin-left: 0.25em;
+      .error-circle {
+        background-color: var(--oc-red-8);
+      }
 
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1em;
-      height: 1em;
-      border-radius: 50%;
+      .payload-circle,
+      .error-circle {
+        margin-left: 0.25em;
+
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1em;
+        height: 1em;
+        border-radius: 50%;
+      }
+    }
+
+    .drag-area {
+      margin-left: 0.5em;
+      width: 6px;
+      height: 23px;
+      background-color: currentColor;
+      opacity: 0.3;
+      margin-top: -1px;
+      border: 3px solid;
+      border-radius: 999px;
+      cursor: grab;
     }
   }
 }