web: make editor note properties work like toc

apps/web/src/components/editor/action-bar.tsx

@@ -23,6 +23,7 @@ import {
   ArrowLeft,
   ArrowRight,
   Cross,
+  Icon,
   Lock,
   NewTab,
   Note,
@@ -82,6 +83,16 @@ import useTablet from "../../hooks/use-tablet";
 import { isMac } from "../../utils/platform";
 import { CREATE_BUTTON_MAP } from "../../common";
 
+type ToolButton = {
+  title: string;
+  icon: Icon;
+  enabled?: boolean;
+  hidden?: boolean;
+  hideOnMobile?: boolean;
+  toggled?: boolean;
+  onClick: () => void;
+};
+
 export function EditorActionBar() {
   const { isMaximized, isFullscreen, hasNativeWindowControls } =
     useWindowControls();
@@ -94,6 +105,10 @@ export function EditorActionBar() {
     activeSession?.id ? store.editors[activeSession?.id] : undefined
   );
   const isLoggedIn = useUserStore((store) => store.isLoggedIn);
+  const arePropertiesVisible = useEditorStore(
+    (store) => store.arePropertiesVisible
+  );
+  const isTOCVisible = useEditorStore((store) => store.isTOCVisible);
   const monographs = useMonographStore((store) => store.monographs);
   const isNotePublished =
     activeSession &&
@@ -102,7 +117,7 @@ export function EditorActionBar() {
   const isMobile = useMobile();
   const isTablet = useTablet();
 
-  const tools = [
+  const tools: ToolButton[] = [
     {
       title: strings.newTab(),
       icon: NewTab,
@@ -146,7 +161,8 @@ export function EditorActionBar() {
         activeSession.type !== "locked" &&
         activeSession.type !== "diff" &&
         activeSession.type !== "conflicted",
-      onClick: () => useEditorStore.getState().toggleTableOfContents()
+      onClick: () => useEditorStore.getState().toggleTableOfContents(),
+      toggled: isTOCVisible
     },
     {
       title: strings.search(),
@@ -157,7 +173,7 @@ export function EditorActionBar() {
         activeSession.type !== "locked" &&
         activeSession.type !== "diff" &&
         activeSession.type !== "conflicted",
-      onClick: editorManager?.editor?.startSearch
+      onClick: () => editorManager?.editor?.startSearch()
     },
     {
       title: strings.properties(),
@@ -169,7 +185,8 @@ export function EditorActionBar() {
         activeSession.type !== "diff" &&
         activeSession.type !== "conflicted" &&
         !isFocusMode,
-      onClick: () => useEditorStore.getState().toggleProperties()
+      onClick: () => useEditorStore.getState().toggleProperties(),
+      toggled: arePropertiesVisible
     },
     ...getWindowControls(
       hasNativeWindowControls,
@@ -226,7 +243,7 @@ export function EditorActionBar() {
             sx={{
               p: 1,
               alignItems: "center",
-              bg: "transparent",
+              bg: tool.toggled ? "background-selected" : "transparent",
               display: [
                 "hideOnMobile" in tool && tool.hideOnMobile ? "none" : "flex",
                 tool.hidden ? "none" : "flex"

apps/web/src/components/editor/index.tsx

@@ -129,17 +129,6 @@ export default function TabsView() {
 
   return (
     <>
-      <Flex
-        className="editor-action-bar"
-        sx={{
-          zIndex: 2,
-          height: TITLE_BAR_HEIGHT,
-          bg: "background-secondary"
-          // borderBottom: "1px solid var(--border)"
-        }}
-      >
-        <EditorActionBar />
-      </Flex>
       <ScopedThemeProvider
         scope="editor"
         ref={dropRef}
@@ -148,11 +137,27 @@ export default function TabsView() {
           flex: 1,
           overflow: "hidden",
           display: "flex",
-          flexDirection: "column",
-          position: "relative"
+          flexDirection: "column"
         }}
       >
-        <SplitPane direction="vertical" autoSaveId={"editor-panels"}>
+        <Flex
+          className="editor-action-bar"
+          sx={{
+            zIndex: 2,
+            height: TITLE_BAR_HEIGHT,
+            bg: "background-secondary"
+            // borderBottom: "1px solid var(--border)"
+          }}
+        >
+          <EditorActionBar />
+        </Flex>
+        <SplitPane
+          style={{
+            position: "relative"
+          }}
+          direction="vertical"
+          autoSaveId={"editor-panels"}
+        >
           <Pane id="editor-panel" className="editor-pane">
             {tabs.map((tab) => {
               const session = useEditorStore
@@ -216,11 +221,13 @@ export default function TabsView() {
               <TableOfContents sessionId={activeSession.id} />
             </Pane>
           ) : null}
+          {arePropertiesVisible && activeSession && (
+            <Pane id="properties-pane" initialSize={250} minSize={250}>
+              <Properties sessionId={activeSession.id} />
+            </Pane>
+          )}
         </SplitPane>
         <DropZone overlayRef={overlayRef} />
-        {arePropertiesVisible && activeSession && (
-          <Properties sessionId={activeSession.id} />
-        )}
       </ScopedThemeProvider>
     </>
   );

apps/web/src/components/properties/index.tsx

@@ -122,23 +122,10 @@ function EditorProperties(props: EditorPropertiesProps) {
   if (isFocusMode || !session) return null;
   return (
     <Flex
-      css={`@keyframes slideIn {
-      from {
-        transform: translateX(600px);
-      }
-      to {
-        transform: translateX(0);
-      }`}
       sx={{
-        transform: "translateX(600)",
-        animation: "0.1s ease-out 0s 1 slideIn",
         display: "flex",
-        position: "absolute",
-        // top: TITLE_BAR_HEIGHT,
-        right: 0,
-        zIndex: 999,
         height: "100%",
-        width: "300px",
+        width: "100%",
         borderLeft: "1px solid",
         borderLeftColor: "border"
       }}

apps/web/src/stores/editor-store.ts

@@ -1101,7 +1101,7 @@ class EditorStore extends BaseStore<EditorStore> {
     const { tabs } = this.get();
     this.closeTabs(...tabs.map((t) => t.id));
   };
-  
+
   closeNotes = (...noteIds: string[]) => {
     const { getTabsForNote, closeTabs } = this.get();
     const tabs = noteIds
@@ -1171,18 +1171,21 @@ class EditorStore extends BaseStore<EditorStore> {
   };
 
   toggleProperties = (toggleState?: boolean) => {
-    this.set(
-      (state) =>
-        (state.arePropertiesVisible =
-          toggleState !== undefined ? toggleState : !state.arePropertiesVisible)
-    );
+    this.set((state) => {
+      state.arePropertiesVisible =
+        toggleState !== undefined ? toggleState : !state.arePropertiesVisible;
+    });
+    this.toggleTableOfContents(false);
   };
 
   toggleTableOfContents = (toggleState?: boolean) => {
-    const { isTOCVisible } = this.get();
+    const { isTOCVisible, arePropertiesVisible } = this.get();
     const isTOCVisibleState =
       toggleState !== undefined ? toggleState : !isTOCVisible;
-    this.set({ isTOCVisible: isTOCVisibleState });
+    this.set({
+      isTOCVisible: isTOCVisibleState,
+      arePropertiesVisible: isTOCVisibleState ? false : arePropertiesVisible
+    });
     Config.set("editor:toc", isTOCVisibleState);
   };