From 45bd71429dde7878cee1258fdca7463636fcc064 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 20 Nov 2024 11:16:12 +0530
Subject: [PATCH] condense: Modify height offset to collapse messages.

Fixes #31501

Collapse all unread messages that are over min(150 em, 2*viewport_height).
Collapse all bot messages and human messages marked as read that are over max(35 em, 0.65*viewport_height).
---
 web/src/condense.ts         | 13 +++++++++++--
 web/src/message_viewport.ts |  7 -------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/src/condense.ts b/web/src/condense.ts
index 9ec1b3cf91..3d566d9cab 100644
--- a/web/src/condense.ts
+++ b/web/src/condense.ts
@@ -8,6 +8,7 @@ import * as message_lists from "./message_lists.ts";
 import type {Message} from "./message_store.ts";
 import * as message_viewport from "./message_viewport.ts";
 import * as rows from "./rows.ts";
+import {user_settings} from "./user_settings.ts";
 import * as util from "./util.ts";
 
 /*
@@ -169,9 +170,16 @@ export function condense_and_collapse(elems: JQuery): void {
         return;
     }
 
-    const height_cutoff = message_viewport.max_message_height();
-    const rows_to_resize = [];
+    const height_cutoff_unread = Math.min(
+        150 * user_settings.web_font_size_px,
+        message_viewport.height() * 2,
+    );
+    const height_cutoff_read = Math.max(
+        35 * user_settings.web_font_size_px,
+        0.65 * message_viewport.height(),
+    );
 
+    const rows_to_resize = [];
     for (const elem of elems) {
         const $content = $(elem).find(".message_content");
 
@@ -207,6 +215,7 @@ export function condense_and_collapse(elems: JQuery): void {
     // changing the layout of the page, which is more performanant.
     // More information here: https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/#avoid-layout-thrashing
     for (const {elem, $content, message, message_height} of rows_to_resize) {
+        const height_cutoff = message.unread ? height_cutoff_unread : height_cutoff_read;
         const long_message = message_height > height_cutoff;
         if (long_message) {
             // All long messages are flagged as such.
diff --git a/web/src/message_viewport.ts b/web/src/message_viewport.ts
index c921242e10..f429481abd 100644
--- a/web/src/message_viewport.ts
+++ b/web/src/message_viewport.ts
@@ -23,13 +23,6 @@ const cached_height = new util.CachedValue({compute_value: () => $scroll_contain
 export const width = cached_width.get.bind(cached_width);
 export const height = cached_height.get.bind(cached_height);
 
-// TODO: This function lets us use the DOM API instead of jquery
-// (<10x faster) for condense.js, but we want to eventually do a
-// bigger of refactor `height` and `width` above to do the same.
-export function max_message_height(): number {
-    return document.querySelector("html")!.offsetHeight * 0.65;
-}
-
 // Includes both scroll and arrow events. Negative means scroll up,
 // positive means scroll down.
 export let last_movement_direction = 1;