From a747bafa6919484d3db19bcfa780033b07ba2a2d Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 2 Aug 2023 13:10:23 +0500
Subject: [PATCH] web: use new editorSidebar

---
 apps/web/src/components/editor/index.tsx     | 157 ++++++++++---------
 apps/web/src/components/properties/index.jsx |  52 +++---
 2 files changed, 111 insertions(+), 98 deletions(-)

diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx
index 0a324d404..c9c734db0 100644
--- a/apps/web/src/components/editor/index.tsx
+++ b/apps/web/src/components/editor/index.tsx
@@ -205,90 +205,97 @@ export default function EditorManager({
   }, [noteId]);
 
   return (
-    <Allotment
-      proportionalLayout={true}
-      onDragEnd={(sizes) => {
-        Config.set("editor:panesize", sizes[1]);
-      }}
-    >
-      <Allotment.Pane className="editor-pane">
-        <Flex
-          ref={dropRef}
-          id="editorContainer"
-          sx={{
-            position: "relative",
-            alignSelf: "stretch",
-            overflow: "hidden",
-            flex: 1,
-            flexDirection: "column",
-            background: "background"
-          }}
-        >
-          {previewSession.current && (
-            <PreviewModeNotice
-              {...previewSession.current}
-              onDiscard={() => openSession(noteId)}
-            />
-          )}
-          <Editor
-            nonce={timestamp}
-            content={() =>
-              previewSession.current?.content?.data ||
-              editorstore.get().session?.content?.data
-            }
-            onPreviewDocument={(url) => setDocPreview(url)}
-            onContentChange={() => (lastSavedTime.current = Date.now())}
-            options={{
-              readonly: isReadonly || isPreviewSession,
-              onRequestFocus: () => toggleProperties(false),
-              onLoadMedia: loadMedia,
-              focusMode: isFocusMode,
-              isMobile: isMobile || isTablet
+    <ScopedThemeProvider scope="editor" sx={{ flex: 1 }}>
+      <Allotment
+        proportionalLayout={true}
+        onDragEnd={(sizes) => {
+          Config.set("editor:panesize", sizes[1]);
+        }}
+      >
+        <Allotment.Pane className="editor-pane">
+          <Flex
+            ref={dropRef}
+            id="editorContainer"
+            sx={{
+              position: "relative",
+              alignSelf: "stretch",
+              overflow: "hidden",
+              flex: 1,
+              flexDirection: "column",
+              background: "background"
             }}
-          />
-
-          {arePropertiesVisible && (
-            <Properties
-              onOpenPreviewSession={async (session: PreviewSession) => {
-                previewSession.current = session;
-                setTimestamp(Date.now());
+          >
+            {previewSession.current && (
+              <PreviewModeNotice
+                {...previewSession.current}
+                onDiscard={() => openSession(noteId)}
+              />
+            )}
+            <Editor
+              nonce={timestamp}
+              content={() =>
+                previewSession.current?.content?.data ||
+                editorstore.get().session?.content?.data
+              }
+              onPreviewDocument={(url) => setDocPreview(url)}
+              onContentChange={() => (lastSavedTime.current = Date.now())}
+              options={{
+                readonly: isReadonly || isPreviewSession,
+                onRequestFocus: () => toggleProperties(false),
+                onLoadMedia: loadMedia,
+                focusMode: isFocusMode,
+                isMobile: isMobile || isTablet
               }}
             />
-          )}
-          <DropZone overlayRef={overlayRef} />
-        </Flex>
-      </Allotment.Pane>
-      {docPreview && (
-        <Allotment.Pane
-          minSize={450}
-          preferredSize={Config.get("editor:panesize", 500)}
-        >
-          {docPreview.url ? (
-            <Flex
+
+            {arePropertiesVisible && (
+              <Properties
+                onOpenPreviewSession={async (session: PreviewSession) => {
+                  previewSession.current = session;
+                  setTimestamp(Date.now());
+                }}
+              />
+            )}
+            <DropZone overlayRef={overlayRef} />
+          </Flex>
+        </Allotment.Pane>
+        {docPreview && (
+          <Allotment.Pane
+            minSize={450}
+            preferredSize={Config.get("editor:panesize", 500)}
+          >
+            <ScopedThemeProvider
+              scope="editorSidebar"
               id="editorSidebar"
               sx={{
+                display: "flex",
                 flexDirection: "column",
                 overflow: "hidden",
                 borderLeft: "1px solid var(--border)",
-                height: "100%"
+                height: "100%",
+                bg: "background"
               }}
             >
-              <Suspense
-                fallback={<DownloadAttachmentProgress hash={docPreview.hash} />}
-              >
-                <PDFPreview
-                  fileUrl={docPreview.url}
-                  hash={docPreview.hash}
-                  onClose={() => setDocPreview(undefined)}
-                />
-              </Suspense>
-            </Flex>
-          ) : (
-            <DownloadAttachmentProgress hash={docPreview.hash} />
-          )}
-        </Allotment.Pane>
-      )}
-    </Allotment>
+              {docPreview.url ? (
+                <Suspense
+                  fallback={
+                    <DownloadAttachmentProgress hash={docPreview.hash} />
+                  }
+                >
+                  <PDFPreview
+                    fileUrl={docPreview.url}
+                    hash={docPreview.hash}
+                    onClose={() => setDocPreview(undefined)}
+                  />
+                </Suspense>
+              ) : (
+                <DownloadAttachmentProgress hash={docPreview.hash} />
+              )}
+            </ScopedThemeProvider>
+          </Allotment.Pane>
+        )}
+      </Allotment>
+    </ScopedThemeProvider>
   );
 }
 
@@ -317,7 +324,7 @@ function DownloadAttachmentProgress(props: DownloadAttachmentProgressProps) {
   return (
     <Flex
       sx={{
-        height: "100%",
+        flex: 1,
         alignItems: "center",
         justifyContent: "center",
         flexDirection: "column"
diff --git a/apps/web/src/components/properties/index.jsx b/apps/web/src/components/properties/index.jsx
index 6e7e42ecc..7ec933b05 100644
--- a/apps/web/src/components/properties/index.jsx
+++ b/apps/web/src/components/properties/index.jsx
@@ -48,6 +48,7 @@ import Notebook from "../notebook";
 import { getTotalNotes } from "@notesnook/common";
 import Reminder from "../reminder";
 import { getFormattedDate } from "@notesnook/common";
+import { ScopedThemeProvider } from "../theme-provider";
 
 const tools = [
   { key: "pin", property: "pinned", icon: Pin, label: "Pin" },
@@ -149,33 +150,38 @@ function Properties(props) {
 
   if (isFocusMode || !sessionId) return null;
   return (
-    <>
-      <AnimatedFlex
-        animate={{
-          x: 0
-        }}
-        transition={{
-          duration: 0.1,
-          bounceDamping: 1,
-          bounceStiffness: 1,
-          ease: "easeOut"
-        }}
-        initial={{ x: 600 }}
+    <AnimatedFlex
+      animate={{
+        x: 0
+      }}
+      transition={{
+        duration: 0.1,
+        bounceDamping: 1,
+        bounceStiffness: 1,
+        ease: "easeOut"
+      }}
+      initial={{ x: 600 }}
+      sx={{
+        display: "flex",
+        position: "absolute",
+        right: 0,
+        zIndex: 3,
+        height: "100%",
+        width: "300px",
+        borderLeft: "1px solid",
+        borderLeftColor: "border"
+      }}
+    >
+      <ScopedThemeProvider
+        scope="editorSidebar"
         sx={{
+          flex: 1,
           display: "flex",
-          position: "absolute",
-          right: 0,
-          zIndex: 3,
-          height: "100%",
-          width: "300px",
-          borderLeft: "1px solid",
-          borderLeftColor: "border",
+          bg: "background",
           overflowY: "hidden",
           overflowX: "hidden",
           flexDirection: "column"
         }}
-        bg="background"
-        // px={2}
       >
         <ScrollContainer>
           <Card
@@ -392,8 +398,8 @@ function Properties(props) {
             })}
           </Card>
         </ScrollContainer>
-      </AnimatedFlex>
-    </>
+      </ScopedThemeProvider>
+    </AnimatedFlex>
   );
 }
 export default React.memo(Properties);