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,7 +96,17 @@ function CommentThread({
   }, [focused, autoFocus]);
 
   React.useEffect(() => {
-    if (focused && topRef.current) {
+    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",
@@ -105,6 +116,9 @@ function CommentThread({
               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;

server/models/View.ts

@@ -1,4 +1,3 @@
-import { subMilliseconds } from "date-fns";
 import { FindOrCreateOptions, Op } from "sequelize";
 import {
   BelongsTo,
@@ -9,7 +8,6 @@ import {
   DataType,
   Scopes,
 } from "sequelize-typescript";
-import { USER_PRESENCE_INTERVAL } from "@shared/constants";
 import Document from "./Document";
 import User from "./User";
 import IdModel from "./base/IdModel";
@@ -94,18 +92,6 @@ class View extends IdModel {
     });
   }
 
-  static async findRecentlyEditingByDocument(documentId: string) {
-    return this.findAll({
-      where: {
-        documentId,
-        lastEditingAt: {
-          [Op.gt]: subMilliseconds(new Date(), USER_PRESENCE_INTERVAL * 2),
-        },
-      },
-      order: [["lastEditingAt", "DESC"]],
-    });
-  }
-
   static async touch(documentId: string, userId: string, isEditing: boolean) {
     const values: Partial<View> = {
       updatedAt: new Date(),

shared/styles/theme.ts

@@ -126,7 +126,6 @@ export const buildLightTheme = (input: Partial<Colors>): DefaultTheme => {
     shadow: "rgba(0, 0, 0, 0.2)",
 
     commentBackground: colors.warmGrey,
-    commentActiveBackground: "#d7e0ea",
 
     modalBackdrop: colors.black10,
     modalBackground: colors.white,
@@ -194,8 +193,7 @@ export const buildDarkTheme = (input: Partial<Colors>): DefaultTheme => {
     backdrop: "rgba(0, 0, 0, 0.5)",
     shadow: "rgba(0, 0, 0, 0.6)",
 
-    commentBackground: colors.veryDarkBlue,
+    commentBackground: "#1f232e",
-    commentActiveBackground: colors.black,
 
     modalBackdrop: colors.black50,
     modalBackground: "#1f2128",