feat: add auto collapse feature for all memos issue #1463 (#1550)

* add auto collapse feature

* fix some styles

* pass eslint

---------

Co-authored-by: liyang <liyangg@umich.edu>

web/.gitignore

@@ -8,3 +8,4 @@ dist-ssr
 /playwright-report/
 /playwright/.cache/
 /playwright-screenshot/
+

web/src/components/MemoContent.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { marked } from "@/labs/marked";
+import { useUserStore } from "@/store/module";
 import Icon from "./Icon";
 import "@/less/memo-content.less";
 
@@ -29,6 +30,10 @@ const MemoContent: React.FC<Props> = (props: Props) => {
   });
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
 
+  //variable for auto-collapse
+  const userStore = useUserStore();
+  const { localSetting } = userStore.state.user as User;
+
   useEffect(() => {
     if (showFull) {
       return;
@@ -67,13 +72,15 @@ const MemoContent: React.FC<Props> = (props: Props) => {
     <div className={`memo-content-wrapper ${className || ""}`}>
       <div
         ref={memoContentContainerRef}
-        className={`memo-content-text ${state.expandButtonStatus === 0 ? "max-h-64 overflow-y-hidden" : ""}`}
+        className={`memo-content-text ${
+          localSetting.enableAutoCollapse && state.expandButtonStatus === 0 ? "max-h-64 overflow-y-hidden" : ""
+        }`}
         onClick={handleMemoContentClick}
         onDoubleClick={handleMemoContentDoubleClick}
       >
         {marked(content)}
       </div>
-      {state.expandButtonStatus !== -1 && (
+      {localSetting.enableAutoCollapse && state.expandButtonStatus !== -1 && (
         <div className={`expand-btn-container ${state.expandButtonStatus === 0 && "!-mt-7"}`}>
           <div className="absolute top-0 left-0 w-full h-full blur-lg bg-white dark:bg-zinc-700"></div>
           <span className={`btn z-10 ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>

web/src/components/Settings/PreferencesSection.tsx

@@ -44,6 +44,11 @@ const PreferencesSection = () => {
     userStore.upsertLocalSetting({ ...localSetting, dailyReviewTimeOffset: value });
   };
 
+  //enableAutoCollapse
+  const handleAutoCollapseChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    userStore.upsertLocalSetting({ ...localSetting, enableAutoCollapse: event.target.checked });
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -108,6 +113,11 @@ const PreferencesSection = () => {
         <span className="normal-text">{t("setting.preference-section.enable-double-click")}</span>
         <Switch className="ml-2" checked={localSetting.enableDoubleClickEditing} onChange={handleDoubleClickEnabledChanged} />
       </label>
+
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.auto-collapse")}</span>
+        <Switch className="ml-2" checked={localSetting.enableAutoCollapse} onChange={handleAutoCollapseChanged} />
+      </label>
     </div>
   );
 };

web/src/locales/de.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Angezeigter Memo-Zeitpunkt",
       "created_ts": "Erstellungszeitpunkt",
       "updated_ts": "Änderungszeitpunkt",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Doppelklick zum Bearbeiten aktivieren",
+      "auto-collapse": "Automatisch reduzieren"
     },
     "member-section": {
       "create-a-member": "Mitglied hinzufügen"

web/src/locales/en.json

@@ -187,7 +187,8 @@
       "default-memo-sort-option": "Memo display time",
       "created_ts": "Created Time",
       "updated_ts": "Updated Time",
-      "daily-review-time-offset": "Daily Review Time Offset"
+      "daily-review-time-offset": "Daily Review Time Offset",
+      "auto-collapse": "Auto Collapse"
     },
     "storage-section": {
       "current-storage": "Current storage",

web/src/locales/es.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Hora de visualización de la nota",
       "created_ts": "Hora de Creación",
       "updated_ts": "Hora de Actualización",
-      "enable-double-click": "Habilitar doble clic para editar"
+      "enable-double-click": "Habilitar doble clic para editar",
+      "auto-collapse": "Colapso automático"
     },
     "member-section": {
       "create-a-member": "Crear un miembro"

web/src/locales/fr.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Memo display time",
       "created_ts": "Heure de création",
       "updated_ts": "Heure de mise à jour",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Activer le double-clic",
+      "auto-collapse": "Réduction automatique"
     },
     "member-section": {
       "create-a-member": "Créer un membre"

web/src/locales/it.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Ordine visualizzazione memo",
       "created_ts": "Data di creazione",
       "updated_ts": "Ultima modifica",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Abilita il doppio clic",
+      "auto-collapse": "Comprimi automaticamente"
     },
     "member-section": {
       "create-a-member": "Crea un membro"

web/src/locales/ko.json

@@ -164,7 +164,8 @@
       "default-memo-sort-option": "메모에 표시할 시각",
       "created_ts": "생성된 시각",
       "updated_ts": "변경된 시각",
-      "daily-review-time-offset": "날마다 돌아보기 기준 시각"       
+      "daily-review-time-offset": "날마다 돌아보기 기준 시각"  ,
+      "auto-collapse": "자동 축소"     
     },
     "storage-section": {
       "storage-services-list": "저장소 서비스 목록",

web/src/locales/nl.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Sorteer op tijd van aanmaken/wijziging",
       "created_ts": "Tijd van aanmaken",
       "updated_ts": "Tijd van wijziging",
-      "enable-double-click": "Dubbelklik voor bewerken aanzetten"
+      "enable-double-click": "Dubbelklik voor bewerken aanzetten",
+      "auto-collapse": "Automatisch samenvouwen"
     },
     "member-section": {
       "create-a-member": "Lid toevoegen"

web/src/locales/pl.json

@@ -168,7 +168,8 @@
       "mobile-editor-style": "Styl edytora mobilnego",
       "default-memo-sort-option": "Wyświetlana data notatki",
       "created_ts": "Data utworzenia",
-      "updated_ts": "Data aktualizacji"
+      "updated_ts": "Data aktualizacji",
+      "auto-collapse": "Automatyczne zwijanie"
     },
     "storage-section": {
       "storage-services-list": "Lista usług przechowywania",

web/src/locales/pt-BR.json

@@ -187,7 +187,8 @@
       "default-memo-sort-option": "Memo display time",
       "created_ts": "Hora de criação",
       "updated_ts": "Hora de atualização",
-      "daily-review-time-offset": "Compensação de tempo do Resumo Diário"
+      "daily-review-time-offset": "Compensação de tempo do Resumo Diário",
+      "auto-collapse": "Recolher automaticamente"
     },
     "storage-section": {
       "current-storage": "Armazenamento atual",

web/src/locales/ru.json

@@ -196,7 +196,8 @@
       "created_ts": "Время создания",
       "updated_ts": "Время обновления",
       "enable-double-click": "Разрешить двойной клик для редактирования",
-      "daily-review-time-offset": "Смещение времени ежедневного просмотра"
+      "daily-review-time-offset": "Смещение времени ежедневного просмотра",
+      "auto-collapse": "Автоматическое свертывание"
     },
     "member-section": {
       "create-a-member": "Создать пользователя"

web/src/locales/sl.json

@@ -198,7 +198,8 @@
       "default-memo-sort-option": "Čas prikaza beležke",
       "created_ts": "Čas ustvarjanja",
       "updated_ts": "Čas posodobitve",
-      "daily-review-time-offset": "Časovni odmik dnevnega pregleda"
+      "daily-review-time-offset": "Časovni odmik dnevnega pregleda",
+      "auto-collapse":"Samodejno strni"
     },
     "storage-section": {
       "storage-services-list": "Seznam storitev shramb",

web/src/locales/sv.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Anteckning visningstid",
       "created_ts": "Skapade tid",
       "updated_ts": "Upodaterad tid",
-      "enable-double-click": "Aktivera dubbelklick för att redigera"
+      "enable-double-click": "Aktivera dubbelklick för att redigera",
+      "auto-collapse": "Autokollaps"
     },
     "member-section": {
       "create-a-member": "Skapa en medlem"

web/src/locales/tr.json

@@ -156,7 +156,8 @@
       "default-memo-sort-option": "Yer İşareti Görüntüleme Zamanı",
       "created_ts": "Oluşturulma zamanı",
       "updated_ts": "Güncelleme zamanı",
-      "enable-double-click": "Düzenlemek için çift tıklatmayı etkinleştir"
+      "enable-double-click": "Düzenlemek için çift tıklatmayı etkinleştir",
+      "auto-collapse": "Otomatik Daralt"
     },
     "member-section": {
       "create-a-member": "Kullanıcı oluştur"

web/src/locales/uk.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Час відображення закладки",
       "created_ts": "Час створення",
       "updated_ts": "Час оновлення",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Enable double-click to edit",
+      "auto-collapse": "Автоматичне згортання"
     },
     "member-section": {
       "create-a-member": "Створити користувача"

web/src/locales/vi.json

@@ -166,7 +166,8 @@
       "default-memo-sort-option": "Thời gian hiện ghi chú",
       "created_ts": "Thời gian tạo",
       "updated_ts": "Thời gian cập nhật",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Bật nhấp đúp để chỉnh sửa",
+      "auto-collapse": "Tự động thu gọn"
     },
     "member-section": {
       "create-a-member": "Thêm thành viên"

web/src/locales/zh-Hans.json

@@ -207,7 +207,8 @@
       "created_ts": "创建时间",
       "updated_ts": "更新时间",
       "daily-review-time-offset": "每日回顾时间偏移",
-      "default-resource-visibility": "默认资源可见性"
+      "default-resource-visibility": "默认资源可见性",
+      "auto-collapse": "自动折叠"
     },
     "storage-section": {
       "storage-services-list": "存储服务列表",

web/src/locales/zh-Hant.json

@@ -207,7 +207,8 @@
       "created_ts": "建立時間",
       "updated_ts": "更新時間",
       "daily-review-time-offset": "每日回顧時間偏移",
-      "default-resource-visibility": "默認資源可見性"
+      "default-resource-visibility": "默認資源可見性",
+      "auto-collapse": "自動摺疊"
     },
     "storage-section": {
       "storage-services-list": "存儲服務列表",

web/src/store/module/user.ts

@@ -16,6 +16,7 @@ const defaultSetting: Setting = {
 const defaultLocalSetting: LocalSetting = {
   enableDoubleClickEditing: true,
   dailyReviewTimeOffset: 0,
+  enableAutoCollapse: true,
 };
 
 export const convertResponseModelUser = (user: User): User => {

web/src/types/modules/setting.d.ts

@@ -9,6 +9,7 @@ interface Setting {
 interface LocalSetting {
   enableDoubleClickEditing: boolean;
   dailyReviewTimeOffset: number;
+  enableAutoCollapse: boolean;
 }
 
 interface UserLocaleSetting {