frontend/chat: fold thread in bottom thread row, some cleanups

Author: haraldschilly

src/packages/frontend/chat/filter-messages.ts

@@ -6,13 +6,14 @@ NOTE: chat uses every imaginable way to store a timestamp at once,
 which is the may source of weirdness in the code below...  Beware.
 */
 
-import type { ChatMessages, ChatMessageTyped, MessageHistory } from "./types";
-import { search_match, search_split } from "@cocalc/util/misc";
 import { List } from "immutable";
+import LRU from "lru-cache";
+
 import type { TypedMap } from "@cocalc/frontend/app-framework";
 import { redux } from "@cocalc/frontend/app-framework";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
-import LRU from "lru-cache";
+import { search_match, search_split } from "@cocalc/util/misc";
+import type { ChatMessages, ChatMessageTyped, MessageHistory } from "./types";
 
 export function filterMessages({
   messages,

src/packages/frontend/chat/message.tsx

@@ -41,6 +41,7 @@ import { Name } from "./name";
 import { Time } from "./time";
 import { ChatMessageTyped, Mode, SubmitMentionsFn } from "./types";
 import {
+  getReplyToRoot,
   getThreadRootDate,
   is_editing,
   message_colors,
@@ -384,19 +385,15 @@ export default function Message({
   }
 
   function contentColumn() {
-    let marginTop;
-    let value = newest_content(message);
+    const value = newest_content(message);
 
     const { background, color, lighten, message_class } = message_colors(
       account_id,
       message,
     );
 
-    if (!is_prev_sender && is_viewers_message) {
-      marginTop = MARGIN_TOP_VIEWER;
-    } else {
-      marginTop = "5px";
-    }
+    const marginTop =
+      !is_prev_sender && is_viewers_message ? MARGIN_TOP_VIEWER : "5px";
 
     const messageStyle: CSSProperties = {
       color,
@@ -911,6 +908,21 @@ export default function Message({
         {showAISummarize && is_thread ? (
           <SummarizeThread message={message} actions={actions} />
         ) : undefined}
+        {is_thread ? (
+          <Button
+            type="text"
+            style={{ color: COLORS.GRAY_M }}
+            icon={<Icon name="to-top-outlined" />}
+            onClick={() =>
+              actions?.toggleFoldThread(
+                new Date(getThreadRootDate({ date, messages })),
+                index,
+              )
+            }
+          >
+            Fold Thread…
+          </Button>
+        ) : undefined}
       </div>
     );
   }
@@ -920,16 +932,13 @@ export default function Message({
       return;
     }
 
-    let label;
-    if (numChildren) {
-      label = (
-        <>
-          {numChildren} {plural(numChildren, "Reply", "Replies")}
-        </>
-      );
-    } else {
-      label = "View Replies";
-    }
+    const label = numChildren ? (
+      <>
+        Show {numChildren} {plural(numChildren, "Reply", "Replies")}…
+      </>
+    ) : (
+      "View Replies…"
+    );
 
     return (
       <Col xs={24}>
@@ -940,6 +949,7 @@ export default function Message({
             }
             type="link"
             style={{ color: "darkblue" }}
+            icon={<Icon name="to-top-outlined" rotate="180" />}
           >
             {label}
           </Button>
@@ -956,24 +966,26 @@ export default function Message({
       const style: CSS =
         mode === "standalone"
           ? {
-              color: "#666",
+              color: COLORS.GRAY_M,
               marginTop: MARGIN_TOP_VIEWER,
               marginLeft: "5px",
               marginRight: "5px",
             }
           : {
-              color: "#666",
+              color: COLORS.GRAY_M,
               marginTop: "5px",
               width: "100%",
               textAlign: "center",
             };
+
       const iconName = is_folded
         ? mode === "standalone"
           ? reverseRowOrdering
             ? "right-circle-o"
             : "left-circle-o"
           : "right-circle-o"
         : "down-circle-o";
+
       const button = (
         <Button
           type="text"

src/packages/frontend/chat/utils.ts

@@ -42,7 +42,7 @@ export function compute_cursor_offset_position(
   mentions: MentionList,
 ) {
   let index_offset = 0;
-  let usuable_cursor_index = cursor_plain_text_index;
+  let usable_cursor_index = cursor_plain_text_index;
   const mention_array = mentions.toJS() as any;
 
   for (let i = 0; i < mention_array.length; i++) {
@@ -60,19 +60,19 @@ export function compute_cursor_offset_position(
         index_offset = mention_offset + id.length + SINGLE_MENTION_OFFSET;
       }
     } else if (cursor_plain_text_index > plainTextIndex + display.length / 2) {
-      usuable_cursor_index = plainTextIndex + display.length;
+      usable_cursor_index = plainTextIndex + display.length;
       if (i == mention_array.length - 1) {
         // Cursor is inside the second half of the last mention.
         index_offset = mention_offset + id.length + SINGLE_MENTION_OFFSET;
       }
     } else if (cursor_plain_text_index <= plainTextIndex + display.length / 2) {
       // Cursor is inside the first half of this mention
-      usuable_cursor_index = plainTextIndex;
+      usable_cursor_index = plainTextIndex;
       index_offset = mention_offset;
       break;
     }
   }
-  return index_offset + usuable_cursor_index;
+  return index_offset + usable_cursor_index;
 }
 
 export function newest_content(message: ChatMessageTyped): string {

src/packages/frontend/components/icon.tsx

@@ -200,6 +200,7 @@ import {
   TagsFilled,
   TagsOutlined,
   TagsTwoTone,
+  ToTopOutlined,
   TeamOutlined,
   ThunderboltOutlined,
   ToolOutlined,
@@ -631,6 +632,7 @@ const IconSpec = {
   "down-square-outlined": DownSquareOutlined,
   "merge-cells-outlined": MergeCellsOutlined,
   "fork-outlined": ForkOutlined,
+  "to-top-outlined": ToTopOutlined,
 } as const;
 
 // Icon Fonts coming from https://www.iconfont.cn/?lang=en-us

src/packages/frontend/cspell.json

@@ -15,7 +15,6 @@
     "mathjax",
     "matplotlib",
     "Miniterm",
-    "Miniterm",
     "nbconvert",
     "nbgrader",
     "nbviewer",
@@ -45,6 +44,7 @@
   ],
   "ignoreWords": [
     "antd",
+    "collab",
     "immutablejs",
     "ipynb",
     "isdir",

src/packages/frontend/editors/slate/mostly-static-markdown.tsx

@@ -2,7 +2,7 @@
 Mostly static markdown, but with some minimal dynamic editable content, e.g., checkboxes,
 and maybe some other nice features, but much less than a full slate editor!
 
-This is used a lot in the fronend app, whereas the fully static one is used a lot in the next.js app.
+This is used a lot in the frontend app, whereas the fully static one is used a lot in the next.js app.
 
 Extras include:
 
@@ -59,7 +59,7 @@ interface Props {
   onChange?: (string) => void; // if given support some very minimal amount of editing, e.g., checkboxes; onChange is called with modified markdown.
   selectedHashtags?: Set<string>; // assumed lower case!
   toggleHashtag?: (string) => void;
-  searchWords?: Set<string> | string[]; // higlight text that matches anything in here
+  searchWords?: Set<string> | string[]; // highlight text that matches anything in here
 }
 
 export default function MostlyStaticMarkdown({