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;