chore: remove auto collapse setting (#2169)

web/src/components/DailyMemo.tsx

@@ -17,7 +17,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
         <span className="normal-text">{displayTimeStr}</span>
       </div>
       <div className="memo-container">
-        <MemoContent content={memo.content} showFull={true} />
+        <MemoContent content={memo.content} />
         <MemoResourceListView resourceList={memo.resourceList} />
       </div>
       <div className="split-line"></div>

web/src/components/Memo.tsx

@@ -24,14 +24,13 @@ import "@/less/memo.less";
 interface Props {
   memo: Memo;
   showCreator?: boolean;
-  showFull?: boolean;
   showVisibility?: boolean;
   showRelatedMemos?: boolean;
   lazyRendering?: boolean;
 }
 
 const Memo: React.FC<Props> = (props: Props) => {
-  const { memo, showCreator, showFull, showRelatedMemos, lazyRendering } = props;
+  const { memo, showCreator, showRelatedMemos, lazyRendering } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
   const filterStore = useFilterStore();
@@ -303,7 +302,6 @@ const Memo: React.FC<Props> = (props: Props) => {
         </div>
         <MemoContent
           content={memo.content}
-          showFull={showFull}
           onMemoContentClick={handleMemoContentClick}
           onMemoContentDoubleClick={handleMemoContentDoubleClick}
         />

web/src/components/MemoContent.tsx

@@ -1,51 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { marked } from "@/labs/marked";
-import { useUserStore } from "@/store/module";
-import { useTranslate } from "@/utils/i18n";
-import Icon from "./Icon";
 import "@/less/memo-content.less";
 
-const MAX_EXPAND_HEIGHT = 384;
-
 interface Props {
   content: string;
   className?: string;
-  showFull?: boolean;
   onMemoContentClick?: (e: React.MouseEvent) => void;
   onMemoContentDoubleClick?: (e: React.MouseEvent) => void;
 }
 
-type ExpandButtonStatus = -1 | 0 | 1;
-
-interface State {
-  expandButtonStatus: ExpandButtonStatus;
-}
-
 const MemoContent: React.FC<Props> = (props: Props) => {
-  const { className, content, showFull, onMemoContentClick, onMemoContentDoubleClick } = props;
-  const t = useTranslate();
-  const userStore = useUserStore();
-  const [state, setState] = useState<State>({
-    expandButtonStatus: -1,
-  });
+  const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props;
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
-  const isVisitorMode = userStore.isVisitorMode();
-  const autoCollapse: boolean = !showFull && (isVisitorMode ? true : (userStore.state.user as User).localSetting.enableAutoCollapse);
-
-  useEffect(() => {
-    if (!autoCollapse) {
-      return;
-    }
-
-    if (memoContentContainerRef.current) {
-      const height = memoContentContainerRef.current.scrollHeight;
-      if (height > MAX_EXPAND_HEIGHT) {
-        setState({
-          expandButtonStatus: 0,
-        });
-      }
-    }
-  }, [autoCollapse]);
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     if (onMemoContentClick) {
@@ -59,32 +25,16 @@ const MemoContent: React.FC<Props> = (props: Props) => {
     }
   };
 
-  const handleExpandBtnClick = () => {
-    const expandButtonStatus = Boolean(!state.expandButtonStatus);
-    setState({
-      expandButtonStatus: Number(expandButtonStatus) as ExpandButtonStatus,
-    });
-  };
-
   return (
     <div className={`memo-content-wrapper ${className || ""}`}>
       <div
         ref={memoContentContainerRef}
-        className={`memo-content-text ${autoCollapse && state.expandButtonStatus < 1 ? "max-h-64 overflow-y-hidden" : ""}`}
+        className="memo-content-text"
         onClick={handleMemoContentClick}
         onDoubleClick={handleMemoContentDoubleClick}
       >
         {marked(content)}
       </div>
-      {autoCollapse && 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}>
-            {state.expandButtonStatus === 0 ? t("common.expand") : t("common.fold")}
-            <Icon.ChevronRight className="icon-img opacity-80" />
-          </span>
-        </div>
-      )}
     </div>
   );
 };

web/src/components/Settings/PreferencesSection.tsx

@@ -47,10 +47,6 @@ const PreferencesSection = () => {
     userStore.upsertLocalSetting({ ...localSetting, dailyReviewTimeOffset: value });
   };
 
-  const handleAutoCollapseChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    userStore.upsertLocalSetting({ ...localSetting, enableAutoCollapse: event.target.checked });
-  };
-
   const handleSaveTelegramUserId = async () => {
     try {
       await userStore.upsertUserSetting("telegram-user-id", telegramUserId);
@@ -130,11 +126,6 @@ const PreferencesSection = () => {
         <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>
-
       <Divider className="!mt-3 !my-4" />
 
       <div className="mb-2 w-full flex flex-row justify-between items-center">

web/src/components/ShareMemoDialog.tsx

@@ -174,7 +174,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{memo.displayTsStr}</span>
             <div className="w-full px-6 text-base pb-4">
-              <MemoContent content={memo.content} showFull={true} />
+              <MemoContent content={memo.content} />
               <MemoResourceListView className="!grid-cols-2" resourceList={memo.resourceList} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">

web/src/pages/MemoDetail.tsx

@@ -45,7 +45,7 @@ const MemoDetail = () => {
           (memo ? (
             <>
               <main className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
-                <Memo memo={memo} showCreator showFull showRelatedMemos />
+                <Memo memo={memo} showCreator showRelatedMemos />
               </main>
               <div className="mt-4 w-full flex flex-row justify-center items-center gap-2">
                 <Link

web/src/store/module/user.ts

@@ -16,7 +16,6 @@ const defaultSetting: Setting = {
 
 const defaultLocalSetting: LocalSetting = {
   enableDoubleClickEditing: false,
-  enableAutoCollapse: false,
   dailyReviewTimeOffset: 0,
 };
 

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

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