Wait to scroll comments until sidebar animation is complete

Cleanup some unused code

app/components/Sidebar/Right.tsx

@@ -8,6 +8,7 @@ import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
+import { sidebarAppearDuration } from "~/styles/animations";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
@@ -82,7 +83,7 @@ function Right({ children, border, className }: Props) {
           : {
               type: "spring",
               bounce: 0.2,
-              duration: 0.6,
+              duration: sidebarAppearDuration / 1000,
             },
         width: ui.sidebarRightWidth,
       }}

app/scenes/Document/components/CommentThread.tsx

@@ -16,6 +16,7 @@ import { WebsocketContext } from "~/components/WebsocketProvider";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useStores from "~/hooks/useStores";
+import { sidebarAppearDuration } from "~/styles/animations";
 import CommentForm from "./CommentForm";
 import CommentThreadItem from "./CommentThreadItem";
 
@@ -95,16 +96,29 @@ function CommentThread({
   }, [focused, autoFocus]);
 
   React.useEffect(() => {
-    if (focused && topRef.current) {
-      scrollIntoView(topRef.current, {
-        scrollMode: "if-needed",
-        behavior: "smooth",
-        block: "start",
-        boundary: (parent) => {
-          // Prevents body and other parent elements from being scrolled
-          return parent.id !== "comments";
+    if (focused) {
+      // If the thread is already visible, scroll it into view immediately,
+      // otherwise wait for the sidebar to appear.
+      const isVisible =
+        (topRef.current?.getBoundingClientRect().left ?? 0) < window.innerWidth;
+
+      setTimeout(
+        () => {
+          if (!topRef.current) {
+            return;
+          }
+          scrollIntoView(topRef.current, {
+            scrollMode: "if-needed",
+            behavior: "smooth",
+            block: "start",
+            boundary: (parent) => {
+              // Prevents body and other parent elements from being scrolled
+              return parent.id !== "comments";
+            },
+          });
         },
-      });
+        isVisible ? 0 : sidebarAppearDuration
+      );
 
       setTimeout(() => {
         const commentMarkElement = window.document?.getElementById(

app/scenes/Document/components/Comments.tsx

@@ -40,7 +40,12 @@ function Comments() {
       onClose={() => ui.collapseComments(document?.id)}
       scrollable={false}
     >
-      <Scrollable bottomShadow={!focusedComment} hiddenScrollbars topShadow>
+      <Scrollable
+        bottomShadow={!focusedComment}
+        id="comments"
+        hiddenScrollbars
+        topShadow
+      >
         <Wrapper $hasComments={hasComments}>
           {hasComments ? (
             threads.map((thread) => (

app/styles/animations.ts

@@ -115,3 +115,8 @@ export const pulse = keyframes`
   50% { transform: scale(1.1); }
   100% { transform: scale(1); }
 `;
+
+/**
+ * The duration of the sidebar appearing animation in ms
+ */
+export const sidebarAppearDuration = 600;

app/typings/styled-components.d.ts

@@ -138,7 +138,6 @@ declare module "styled-components" {
     textDiffDeletedBackground: string;
     placeholder: string;
     commentBackground: string;
-    commentActiveBackground: string;
     sidebarBackground: string;
     sidebarActiveBackground: string;
     sidebarControlHoverBackground: string;