Remove duplicate store for right sidebar width, increase default size

app/components/Sidebar/Right.tsx

@@ -5,7 +5,7 @@ import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
-import usePersistedState from "~/hooks/usePersistedState";
+import useStores from "~/hooks/useStores";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
@@ -14,10 +14,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
 
 function Right({ children, border, className }: Props) {
   const theme = useTheme();
-  const [width, setWidth] = usePersistedState(
-    "rightSidebarWidth",
-    theme.sidebarWidth
-  );
+  const { ui } = useStores();
   const [isResizing, setResizing] = React.useState(false);
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
@@ -30,14 +27,14 @@ function Right({ children, border, className }: Props) {
         Math.min(window.innerWidth - event.pageX, maxWidth),
         minWidth
       );
-      setWidth(width);
+      ui.setRightSidebarWidth(width);
     },
-    [minWidth, maxWidth, setWidth]
+    [minWidth, maxWidth, ui]
   );
 
   const handleReset = React.useCallback(() => {
-    setWidth(theme.sidebarWidth);
-  }, [setWidth, theme.sidebarWidth]);
+    ui.setRightSidebarWidth(theme.sidebarRightWidth);
+  }, [ui, theme.sidebarRightWidth]);
 
   const handleStopDrag = React.useCallback(() => {
     setResizing(false);
@@ -66,9 +63,9 @@ function Right({ children, border, className }: Props) {
 
   const style = React.useMemo(
     () => ({
-      width: `${width}px`,
+      width: `${ui.sidebarRightWidth}px`,
     }),
-    [width]
+    [ui.sidebarRightWidth]
   );
 
   return (
@@ -84,7 +81,7 @@ function Right({ children, border, className }: Props) {
               bounce: 0.2,
               duration: 0.6,
             },
-        width,
+        width: ui.sidebarRightWidth,
       }}
       exit={{
         width: 0,
@@ -115,7 +112,7 @@ const Sidebar = styled(m.div)<{ $border?: boolean }>`
   position: relative;
   flex-shrink: 0;
   background: ${(props) => props.theme.background};
-  width: ${(props) => props.theme.sidebarWidth}px;
+  width: ${(props) => props.theme.sidebarRightWidth}px;
   border-left: 1px solid ${(props) => props.theme.divider};
   transition: border-left 100ms ease-in-out;
   z-index: 1;

app/stores/UiStore.ts

@@ -98,7 +98,7 @@ class UiStore {
     this.sidebarCollapsed = !!data.sidebarCollapsed;
     this.sidebarWidth = data.sidebarWidth || defaultTheme.sidebarWidth;
     this.sidebarRightWidth =
-      data.sidebarRightWidth || defaultTheme.sidebarWidth;
+      data.sidebarRightWidth || defaultTheme.sidebarRightWidth;
     this.tocVisible = !!data.tocVisible;
     this.theme = data.theme || Theme.System;
 
@@ -165,6 +165,11 @@ class UiStore {
     this.sidebarWidth = width;
   };
 
+  @action
+  setRightSidebarWidth = (width: number): void => {
+    this.sidebarRightWidth = width;
+  };
+
   @action
   collapseSidebar = () => {
     this.sidebarCollapsed = true;

app/typings/styled-components.d.ts

@@ -111,6 +111,7 @@ declare module "styled-components" {
     vpadding: string;
     hpadding: string;
     sidebarWidth: number;
+    sidebarRightWidth: number;
     sidebarCollapsedWidth: number;
     sidebarMinWidth: number;
     sidebarMaxWidth: number;

shared/styles/theme.ts

@@ -48,6 +48,7 @@ const spacing = {
   vpadding: "1.5vw",
   hpadding: "1.875vw",
   sidebarWidth: 260,
+  sidebarRightWidth: 300,
   sidebarCollapsedWidth: 16,
   sidebarMinWidth: 200,
   sidebarMaxWidth: 600,