@univerjs/thread-comment-ui 1.0.0-rc.0 → 1.0.0

package/lib/cjs/index.js

@@ -10,7 +10,7 @@ let _univerjs_icons = require("@univerjs/icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -21,7 +21,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -34,14 +34,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -52,7 +52,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -60,7 +60,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -134,7 +134,7 @@ const SetActiveCommentOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/thread-comment-ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -507,7 +507,8 @@ const transformDocument2TextNodes = (doc) => {
 	if (!doc) return [];
 	const { paragraphs = [] } = doc;
 	return paragraphs.map((paragraph, index) => {
-		const body = (0, _univerjs_core.getBodySlice)(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex);
+		const lastIndex = index === 0 ? 0 : paragraphs[index - 1].startIndex + 1;
+		const body = (0, _univerjs_core.getBodySlice)(doc, lastIndex, paragraph.startIndex);
 		return transformDocument2TextNodesInParagraph(body);
 	});
 };
@@ -533,7 +534,6 @@ const transformTextNodes2Document = (nodes) => {
 				});
 				break;
 			}
-			default: break;
 		}
 	});
 	str += "\r\n";
@@ -759,6 +759,7 @@ const ThreadCommentItem = (props) => {
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const regionService = (0, _univerjs_ui.useDependency)(_univerjs_core.RegionService);
 	const userManagerService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	(0, _univerjs_ui.useObservable)(userManagerService.userChange$);
 	const user = userManagerService.getUser(item.personId);
 	const currentUser = (0, _univerjs_ui.useObservable)(userManagerService.currentUser$);
 	const isCommentBySelf = (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) === item.personId;
@@ -793,11 +794,11 @@ const ThreadCommentItem = (props) => {
 				className: "univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat rtl:univer-left-auto rtl:univer-right-0",
 				style: { backgroundImage: `url(${(user === null || user === void 0 ? void 0 : user.avatar) || avatarFallback})` }
 			}),
-			user ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			user || item.authorName ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-text-sm univer-font-medium univer-leading-5",
-					children: (user === null || user === void 0 ? void 0 : user.name) || " "
+					children: (user === null || user === void 0 ? void 0 : user.name) || item.authorName || " "
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [isMock || resolved ? null : showReply && user ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": localeService.t("thread-comment-ui.editor.reply"),
@@ -1092,10 +1093,298 @@ const ThreadCommentTree = (props) => {
 	});
 };
 
+//#endregion
+//#region src/views/mobile/MobileThreadCommentEditor.tsx
+const MobileThreadCommentEditor = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentEditor, {
+	...props,
+	ref,
+	ActionRowComponent: _univerjs_design.MobileActionRowGroup
+}));
+
+//#endregion
+//#region src/views/mobile/MobileThreadCommentTree.tsx
+function MobileThreadCommentTree(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentTree, {
+		...props,
+		DropdownComponent: _univerjs_design.MobileDropdown,
+		EditorComponent: MobileThreadCommentEditor
+	});
+}
+
+//#endregion
+//#region src/views/mobile/MobileThreadCommentPanel.tsx
+function MobileCommentFilter({ value, options = [], onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-flex univer-gap-1 univer-overflow-x-auto univer-rounded-xl univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800",
+		children: options.flatMap((option) => option.options ?? [option]).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-pressed": option.value === value,
+			className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-h-10 univer-shrink-0 univer-rounded-lg univer-px-3 univer-text-sm univer-text-gray-700 active:univer-scale-95 dark:!univer-text-gray-200", option.value === value && "univer-bg-gray-0 univer-font-medium univer-text-primary-600 univer-shadow-sm dark:!univer-bg-gray-700 dark:!univer-text-primary-300"),
+			onClick: () => option.value != null && (onChange === null || onChange === void 0 ? void 0 : onChange(option.value)),
+			children: option.label
+		}, option.value))
+	});
+}
+function MobileCommentHeader({ comment: activeComment, displayRef }) {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-mt-2 univer-flex univer-min-h-12 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-pb-2 dark:!univer-border-gray-700",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": localeService.t("thread-comment-ui.mobile.back"),
+			className: `
+                  ${_univerjs_design.resetButtonClassName}
+                  univer-flex univer-size-12 univer-shrink-0 univer-items-center univer-justify-center univer-rounded-xl
+                  univer-text-2xl univer-text-gray-700
+                  active:univer-bg-gray-100
+                  dark:!univer-text-gray-200
+                  dark:active:!univer-bg-gray-700
+                `,
+			onClick: () => commandService.executeCommand(SetActiveCommentOperation.id),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-min-w-0 univer-flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-truncate univer-text-base univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-0",
+				children: localeService.t("thread-comment-ui.panel.title")
+			}), activeComment.ref && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-truncate univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+				children: displayRef ?? activeComment.ref
+			})]
+		})]
+	});
+}
+function MobileAddComment({ onAdd }) {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRowGroup, {
+		className: "univer-mt-3",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+			className: "univer-w-full",
+			onClick: onAdd,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1.5" }), localeService.t("thread-comment-ui.panel.addComment")]
+		})
+	});
+}
+function MobileThreadCommentPanel(props) {
+	const { unitId, subUnitId$, type, onAdd, getSubUnitName, onResolve, sortComments, onItemLeave, onItemEnter, disableAdd, tempComment, onAddComment, onDeleteComment, onAfterDeleteComment, showComments, formatRef, onTempCommentClose, autoFocusActiveComment = false } = props;
+	const [unit, setUnit] = (0, react.useState)("all");
+	const [status, setStatus] = (0, react.useState)("all");
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const userService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	const threadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment.ThreadCommentModel);
+	const panelService = (0, _univerjs_ui.useDependency)(ThreadCommentPanelService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const activeCommentId = (0, _univerjs_ui.useObservable)(panelService.activeCommentId$);
+	(0, _univerjs_ui.useObservable)(threadCommentModel.commentUpdate$);
+	const subUnitId = (0, _univerjs_ui.useObservable)(subUnitId$);
+	const currentUser = (0, _univerjs_ui.useObservable)(userService.currentUser$);
+	const shouldScrollRef = (0, react.useRef)(true);
+	const location = "PANEL";
+	const unitComments = threadCommentModel.getUnit(unitId);
+	const scopedTempComment = (tempComment === null || tempComment === void 0 ? void 0 : tempComment.unitId) === unitId ? tempComment : null;
+	const activeExists = activeCommentId ? Boolean(threadCommentModel.getComment(activeCommentId.unitId, activeCommentId.subUnitId, activeCommentId.commentId) || scopedTempComment && isSameThreadCommentTarget(activeCommentId, scopedTempComment)) : false;
+	const shouldClearActiveTarget = shouldClearThreadCommentTarget(activeCommentId, unitId, activeExists);
+	const comments = (0, react.useMemo)(() => {
+		const allComments = unit === "all" && type !== _univerjs_core.UniverInstanceType.UNIVER_SLIDE ? unitComments : unitComments.filter((comment) => comment.subUnitId === subUnitId);
+		const sortedComments = sortComments ?? ((commentList) => commentList);
+		const result = allComments.map((comment) => ({
+			...comment.root,
+			children: comment.children ?? [],
+			users: comment.relativeUsers
+		}));
+		if (!showComments) return sortedComments(result);
+		const commentMap = new Map(result.map((comment) => [comment.id, comment]));
+		return [...showComments, ""].map((id) => commentMap.get(id)).filter(Boolean);
+	}, [
+		showComments,
+		sortComments,
+		subUnitId,
+		type,
+		unit,
+		unitComments
+	]);
+	const commentsSorted = (0, react.useMemo)(() => [...comments.filter((comment) => !comment.resolved), ...comments.filter((comment) => comment.resolved)], [comments]);
+	const statusComments = (0, react.useMemo)(() => {
+		if (status === "resolved") return commentsSorted.filter((comment) => comment.resolved);
+		if (status === "unsolved") return commentsSorted.filter((comment) => !comment.resolved);
+		if (status === "concern_me" && (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID)) return commentsSorted.filter((comment) => comment.users.has(currentUser.userID));
+		return commentsSorted;
+	}, [
+		commentsSorted,
+		currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID,
+		status
+	]);
+	const renderComments = scopedTempComment ? [scopedTempComment, ...statusComments] : statusComments;
+	const activeComment = activeCommentId ? renderComments.find((comment) => isSameThreadCommentTarget(activeCommentId, comment)) : void 0;
+	const visibleComments = activeComment ? [activeComment] : renderComments;
+	const unsolvedComments = visibleComments.filter((comment) => !comment.resolved);
+	const solvedComments = visibleComments.filter((comment) => comment.resolved);
+	const isFiltering = status !== "all" || unit !== "all";
+	const unitFilterOptions = [{
+		value: "current",
+		label: localeService.t("thread-comment-ui.filter.sheet.current")
+	}, {
+		value: "all",
+		label: localeService.t("thread-comment-ui.filter.sheet.all")
+	}];
+	const statusFilterOptions = [
+		{
+			value: "all",
+			label: localeService.t("thread-comment-ui.filter.status.all")
+		},
+		{
+			value: "resolved",
+			label: localeService.t("thread-comment-ui.filter.status.resolved")
+		},
+		{
+			value: "unsolved",
+			label: localeService.t("thread-comment-ui.filter.status.unsolved")
+		},
+		{
+			value: "concern_me",
+			label: localeService.t("thread-comment-ui.filter.status.concernMe")
+		}
+	];
+	const handleReset = () => {
+		setStatus("all");
+		setUnit("all");
+	};
+	(0, react.useEffect)(() => {
+		if (shouldClearActiveTarget) panelService.setActiveComment(void 0);
+	}, [panelService, shouldClearActiveTarget]);
+	(0, react.useEffect)(() => {
+		if (tempComment && (tempComment.unitId !== unitId || subUnitId && tempComment.subUnitId !== subUnitId)) onTempCommentClose === null || onTempCommentClose === void 0 || onTempCommentClose();
+	}, [
+		onTempCommentClose,
+		subUnitId,
+		tempComment,
+		unitId
+	]);
+	(0, react.useEffect)(() => {
+		if (!activeCommentId) return;
+		const handlePointerDown = (event) => {
+			const activeTarget = panelService.activeCommentId;
+			const target = event.target;
+			if (event.button !== 0 || !activeTarget || !(target instanceof Element)) return;
+			const activeElement = document.getElementById(`${location}-${activeTarget.unitId}-${activeTarget.subUnitId}-${activeTarget.commentId}`);
+			if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.contains(target)) || target.closest("button, input, textarea, select, a, [contenteditable=\"true\"], [role=\"menu\"], [role=\"menuitem\"], [role=\"option\"], [role=\"listbox\"], [role=\"combobox\"], [role=\"separator\"]")) return;
+			commandService.executeCommand(SetActiveCommentOperation.id);
+			if (scopedTempComment && isSameThreadCommentTarget(activeTarget, scopedTempComment)) onTempCommentClose === null || onTempCommentClose === void 0 || onTempCommentClose();
+		};
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+	}, [
+		activeCommentId,
+		commandService,
+		location,
+		onTempCommentClose,
+		panelService,
+		scopedTempComment
+	]);
+	(0, react.useEffect)(() => {
+		var _document$getElementB;
+		if (!activeCommentId) return;
+		if (!shouldScrollRef.current) {
+			shouldScrollRef.current = true;
+			return;
+		}
+		const { unitId: activeUnitId, subUnitId: activeSubUnitId, commentId } = activeCommentId;
+		(_document$getElementB = document.getElementById(`${location}-${activeUnitId}-${activeSubUnitId}-${commentId}`)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({ block: "center" });
+	}, [activeCommentId, location]);
+	const renderComment = (section) => (comment, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileThreadCommentTree, {
+		full: true,
+		location,
+		getSubUnitName,
+		id: comment.id,
+		unitId: comment.unitId,
+		subUnitId: comment.subUnitId,
+		refStr: comment.ref,
+		displayRef: formatRef === null || formatRef === void 0 ? void 0 : formatRef(comment),
+		type,
+		showEdit: !comment.id || isSameThreadCommentTarget(activeCommentId, comment),
+		showHighlight: isSameThreadCommentTarget(activeCommentId, comment),
+		autoFocus: autoFocusActiveComment && isSameThreadCommentTarget(activeCommentId, comment),
+		onClick: () => {
+			shouldScrollRef.current = false;
+			if (comment.resolved) {
+				commandService.executeCommand(SetActiveCommentOperation.id);
+				return;
+			}
+			commandService.executeCommand(SetActiveCommentOperation.id, {
+				unitId: comment.unitId,
+				subUnitId: comment.subUnitId,
+				commentId: comment.id,
+				temp: false
+			});
+		},
+		onMouseEnter: () => {
+			panelService.setHoveredComment({
+				unitId: comment.unitId,
+				subUnitId: comment.subUnitId,
+				commentId: comment.id,
+				trigger: "panel-hover"
+			});
+			onItemEnter === null || onItemEnter === void 0 || onItemEnter(comment);
+		},
+		onMouseLeave: () => {
+			if (isSameThreadCommentTarget(panelService.hoveredCommentId, comment)) panelService.setHoveredComment(void 0);
+			onItemLeave === null || onItemLeave === void 0 || onItemLeave(comment);
+		},
+		onAddComment,
+		onDeleteComment,
+		onAfterDeleteComment,
+		onResolve: (resolved) => onResolve === null || onResolve === void 0 ? void 0 : onResolve(comment.id, resolved),
+		onClose: !comment.id ? onTempCommentClose : void 0
+	}, getThreadCommentPanelItemKey(comment, index, section));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3",
+		children: [
+			activeComment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileCommentHeader, {
+				comment: activeComment,
+				displayRef: formatRef === null || formatRef === void 0 ? void 0 : formatRef(activeComment)
+			}),
+			!activeComment && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-mt-3 univer-flex univer-flex-col univer-gap-2",
+				children: [type === _univerjs_core.UniverInstanceType.UNIVER_SHEET && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileCommentFilter, {
+					value: unit,
+					options: unitFilterOptions,
+					onChange: setUnit
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileCommentFilter, {
+					value: status,
+					options: statusFilterOptions,
+					onChange: setStatus
+				})]
+			}),
+			!activeComment && !disableAdd && !scopedTempComment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileAddComment, { onAdd }),
+			visibleComments.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+				children: [localeService.t("thread-comment-ui.panel.empty"), isFiltering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRowGroup, {
+					className: "univer-mt-2 univer-flex univer-flex-row",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: handleReset,
+						children: localeService.t("thread-comment-ui.panel.reset")
+					})
+				}) : null]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3",
+				children: [
+					unsolvedComments.map(renderComment("unsolved")),
+					solvedComments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-text-xs",
+						children: localeService.t("thread-comment-ui.panel.solved")
+					}),
+					solvedComments.map(renderComment("solved"))
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/ThreadCommentPanel.tsx
 const ThreadCommentPanel = (props) => {
-	const { unitId, subUnitId$, type, onAdd, getSubUnitName, onResolve, sortComments, onItemLeave, onItemEnter, disableAdd, tempComment, onAddComment, onDeleteComment, onAfterDeleteComment, showComments, formatRef, onTempCommentClose, autoFocusActiveComment = false, ActionRowComponent = _univerjs_design.ActionRow, SelectComponent = _univerjs_design.Select, ThreadCommentTreeComponent = ThreadCommentTree } = props;
+	const { unitId, subUnitId$, type, onAdd, getSubUnitName, onResolve, sortComments, onItemLeave, onItemEnter, disableAdd, tempComment, onAddComment, onDeleteComment, onAfterDeleteComment, showComments, formatRef, onTempCommentClose, autoFocusActiveComment = false } = props;
 	const [unit, setUnit] = (0, react.useState)("all");
 	const [status, setStatus] = (0, react.useState)("all");
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
@@ -1106,7 +1395,8 @@ const ThreadCommentPanel = (props) => {
 	(0, _univerjs_ui.useObservable)(threadCommentModel.commentUpdate$);
 	const unitComments = threadCommentModel.getUnit(unitId);
 	const scopedTempComment = (tempComment === null || tempComment === void 0 ? void 0 : tempComment.unitId) === unitId ? tempComment : null;
-	const shouldClearActiveTarget = shouldClearThreadCommentTarget(activeCommentId, unitId, activeCommentId ? Boolean(threadCommentModel.getComment(activeCommentId.unitId, activeCommentId.subUnitId, activeCommentId.commentId) || scopedTempComment && isSameThreadCommentTarget(activeCommentId, scopedTempComment)) : false);
+	const activeExists = activeCommentId ? Boolean(threadCommentModel.getComment(activeCommentId.unitId, activeCommentId.subUnitId, activeCommentId.commentId) || scopedTempComment && isSameThreadCommentTarget(activeCommentId, scopedTempComment)) : false;
+	const shouldClearActiveTarget = shouldClearThreadCommentTarget(activeCommentId, unitId, activeExists);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const subUnitId = (0, _univerjs_ui.useObservable)(subUnitId$);
 	const shouldScrollRef = (0, react.useRef)(true);
@@ -1200,7 +1490,7 @@ const ThreadCommentPanel = (props) => {
 		const id = `${location}-${unitId}-${subUnitId}-${commentId}`;
 		(_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({ block: "center" });
 	}, [activeCommentId, location]);
-	const renderComment = (section) => (comment, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentTreeComponent, {
+	const renderComment = (section) => (comment, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentTree, {
 		full: true,
 		location,
 		getSubUnitName,
@@ -1246,7 +1536,7 @@ const ThreadCommentPanel = (props) => {
 		className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between",
-			children: [type === _univerjs_core.UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectComponent, {
+			children: [type === _univerjs_core.UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 				borderless: true,
 				value: unit,
 				options: [{
@@ -1257,7 +1547,7 @@ const ThreadCommentPanel = (props) => {
 					label: localeService.t("thread-comment-ui.filter.sheet.all")
 				}],
 				onChange: setUnit
-			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectComponent, {
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 				borderless: true,
 				value: status,
 				options: [
@@ -1282,13 +1572,13 @@ const ThreadCommentPanel = (props) => {
 			})]
 		}), renderComments.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
-			children: [localeService.t("thread-comment-ui.panel.empty"), isFiltering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRowComponent, {
+			children: [localeService.t("thread-comment-ui.panel.empty"), isFiltering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ActionRow, {
 				className: "univer-mt-2 univer-flex univer-flex-row",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 					onClick: onReset,
 					children: localeService.t("thread-comment-ui.panel.reset")
 				})
-			}) : !disableAdd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRowComponent, {
+			}) : !disableAdd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ActionRow, {
 				className: "univer-mt-2 univer-flex univer-flex-row",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
 					onClick: onAdd,
@@ -1309,35 +1599,6 @@ const ThreadCommentPanel = (props) => {
 	});
 };
 
-//#endregion
-//#region src/views/mobile/MobileThreadCommentEditor.tsx
-const MobileThreadCommentEditor = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentEditor, {
-	...props,
-	ref,
-	ActionRowComponent: _univerjs_design.MobileActionRowGroup
-}));
-
-//#endregion
-//#region src/views/mobile/MobileThreadCommentTree.tsx
-function MobileThreadCommentTree(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentTree, {
-		...props,
-		DropdownComponent: _univerjs_design.MobileDropdown,
-		EditorComponent: MobileThreadCommentEditor
-	});
-}
-
-//#endregion
-//#region src/views/mobile/MobileThreadCommentPanel.tsx
-function MobileThreadCommentPanel(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentPanel, {
-		...props,
-		ActionRowComponent: _univerjs_design.MobileActionRowGroup,
-		SelectComponent: _univerjs_design.MobileSelect,
-		ThreadCommentTreeComponent: MobileThreadCommentTree
-	});
-}
-
 //#endregion
 exports.MobileThreadCommentPanel = MobileThreadCommentPanel;
 exports.MobileThreadCommentTree = MobileThreadCommentTree;

package/lib/cjs/locale/ar-SA.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/ar-SA.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "رجوع" },
 	panel: {
+		title: "إدارة التعليقات",
 		empty: "لا توجد تعليقات بعد",
 		reset: "إعادة ضبط التصفية",
 		addComment: "إضافة تعليق",

package/lib/cjs/locale/ca-ES.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/ca-ES.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Enrere" },
 	panel: {
+		title: "Gestió de comentaris",
 		empty: "Encara no hi ha comentaris",
 		reset: "Restableix el filtre",
 		addComment: "Afegeix un comentari",

package/lib/cjs/locale/de-DE.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/de-DE.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Zurück" },
 	panel: {
+		title: "Kommentarverwaltung",
 		empty: "Noch keine Kommentare",
 		reset: "Filter zurücksetzen",
 		addComment: "Kommentar hinzufügen",

package/lib/cjs/locale/en-US.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/en-US.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
@@ -16,7 +15,9 @@
 * limitations under the License.
 */
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Back" },
 	panel: {
+		title: "Comment Management",
 		empty: "No comments yet",
 		reset: "Reset Filter",
 		addComment: "Add Comment",

package/lib/cjs/locale/es-ES.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/es-ES.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Atrás" },
 	panel: {
+		title: "Gestión de comentarios",
 		empty: "Aún no hay comentarios",
 		reset: "Restablecer filtro",
 		addComment: "Añadir comentario",

package/lib/cjs/locale/fa-IR.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/fa-IR.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "بازگشت" },
 	panel: {
+		title: "مدیریت نظرات",
 		empty: "هنوز نظری وجود ندارد",
 		reset: "بازنشانی فیلتر",
 		addComment: "افزودن نظر",

package/lib/cjs/locale/fr-FR.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/fr-FR.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Retour" },
 	panel: {
+		title: "Gestion des commentaires",
 		empty: "Pas encore de commentaires",
 		reset: "Réinitialiser le filtre",
 		addComment: "Ajouter un commentaire",

package/lib/cjs/locale/id-ID.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/id-ID.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Kembali" },
 	panel: {
+		title: "Manajemen Komentar",
 		empty: "Belum ada komentar",
 		reset: "Atur Ulang Filter",
 		addComment: "Tambah Komentar",

package/lib/cjs/locale/it-IT.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/it-IT.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Indietro" },
 	panel: {
+		title: "Gestione Commenti",
 		empty: "Nessun commento",
 		reset: "Reimposta filtro",
 		addComment: "Aggiungi commento",

package/lib/cjs/locale/ja-JP.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/ja-JP.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "戻る" },
 	panel: {
+		title: "コメント管理",
 		empty: "まだコメントはありません",
 		reset: "フィルタをリセット",
 		addComment: "コメントを追加",

package/lib/cjs/locale/ko-KR.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/ko-KR.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "뒤로" },
 	panel: {
+		title: "댓글 관리",
 		empty: "아직 댓글이 없습니다",
 		reset: "필터 초기화",
 		addComment: "댓글 추가",

package/lib/cjs/locale/pl-PL.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/pl-PL.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Wstecz" },
 	panel: {
+		title: "Zarządzanie komentarzami",
 		empty: "Brak komentarzy",
 		reset: "Resetuj filtr",
 		addComment: "Dodaj komentarz",

package/lib/cjs/locale/pt-BR.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/pt-BR.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Voltar" },
 	panel: {
+		title: "Gerenciamento de Comentários",
 		empty: "Nenhum comentário ainda",
 		reset: "Redefinir Filtro",
 		addComment: "Adicionar Comentário",

package/lib/cjs/locale/ru-RU.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/ru-RU.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Назад" },
 	panel: {
+		title: "Управление комментариями",
 		empty: "Комментариев пока нет",
 		reset: "Сбросить фильтр",
 		addComment: "Добавить комментарий",

package/lib/cjs/locale/sk-SK.js

@@ -1,7 +1,8 @@
-
 //#region src/locale/sk-SK.ts
 const locale = { "thread-comment-ui": {
+	mobile: { back: "Späť" },
 	panel: {
+		title: "Správa komentárov",
 		empty: "Zatiaľ žiadne komentáre",
 		reset: "Obnoviť filter",
 		addComment: "Pridať komentár",