@templatical/editor 0.26.2 → 0.27.0

package/dist/cdn/chunks/CommentsSidebar-Dxke-vUP.js

@@ -0,0 +1,460 @@
+import { B as e, F as t, H as n, N as r, Q as i, S as a, U as o, at as s, b as c, ct as l, f as u, g as d, h as f, k as ee, lt as te, m as p, n as m, o as h, p as g, u as _, ut as v, y as ne } from "./draggable-BfpsXFg7.js";
+import { W as re, h as ie } from "./keys-CbQuRX85.js";
+import { t as ae } from "./useI18n-DVWCJJFH.js";
+import { It as oe, K as y, L as se, Lt as ce, M as b, Nt as le, d as x, it as S, jt as ue, n as C, tt as w } from "./icons-C36Ha5VU.js";
+import { t as T } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as de } from "./formatRelativeTime-CtUU-QZ8.js";
+//#region src/components/CommentsSidebar.vue?vue&type=script&setup=true&lang.ts
+var fe = {
+	key: 0,
+	"data-testid": "comments-sidebar",
+	class: "tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
+}, pe = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, me = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, he = {
+	key: 0,
+	class: "tpl:ml-1 tpl:inline-flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]"
+}, ge = { class: "tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2" }, _e = { class: "tpl:flex-1 tpl:overflow-y-auto" }, ve = {
+	key: 0,
+	class: "tpl:flex tpl:h-full tpl:items-center tpl:justify-center"
+}, ye = {
+	key: 1,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center"
+}, be = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, xe = {
+	key: 2,
+	class: "tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3"
+}, Se = { class: "tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3" }, Ce = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, we = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, Te = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Ee = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, De = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
+}, Oe = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, ke = ["title", "onClick"], Ae = ["title", "onClick"], je = ["title", "onClick"], Me = {
+	key: 0,
+	class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]"
+}, Ne = {
+	key: 0,
+	class: "tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]"
+}, Pe = ["onClick"], Fe = {
+	key: 2,
+	class: "tpl:mt-2"
+}, Ie = ["onKeydown"], Le = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, Re = ["disabled", "onClick"], ze = {
+	key: 3,
+	class: "tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
+}, Be = {
+	key: 4,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]"
+}, Ve = { class: "tpl:flex-1" }, He = ["onClick"], Ue = {
+	key: 5,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2"
+}, We = ["title", "onClick"], Ge = ["onClick"], Ke = {
+	key: 0,
+	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
+}, qe = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Je = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, Ye = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Xe = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, Ze = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
+}, Qe = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, $e = ["title", "onClick"], et = ["title", "onClick"], tt = {
+	key: 0,
+	class: "tpl:mt-1.5"
+}, nt = ["onKeydown"], rt = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, it = ["disabled", "onClick"], at = {
+	key: 1,
+	class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
+}, ot = {
+	key: 2,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]"
+}, st = { class: "tpl:flex-1" }, ct = ["onClick"], lt = {
+	key: 0,
+	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
+}, ut = { class: "tpl-comments-input-wrapper tpl-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, dt = ["placeholder", "onKeydown"], ft = ["disabled", "onClick"], pt = {
+	key: 0,
+	class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]"
+}, mt = {
+	key: 0,
+	class: "tpl:flex tpl:min-h-[68px] tpl:items-center tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]"
+}, ht = {
+	key: 1,
+	class: "tpl-comments-input-wrapper tpl-focus-ring-host tpl:flex tpl:min-h-[68px] tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]"
+}, gt = ["placeholder", "disabled"], _t = ["disabled"], E = /*#__PURE__*/ T(/* @__PURE__ */ a({
+	__name: "CommentsSidebar",
+	props: {
+		visible: { type: Boolean },
+		feature: {}
+	},
+	emits: ["close"],
+	setup(a, { expose: T, emit: E }) {
+		let D = a, vt = E, { t: O, format: k } = ae(), A = re(ie, "CommentsSidebar"), j = u(() => D.feature.headless), M = i("unresolved"), N = i(""), P = i(null), F = i(""), I = i(null), L = i(""), R = i(/* @__PURE__ */ new Set()), z = i(null), B = i(null), V = u(() => D.feature.filterBlockId.value);
+		e(V, (e) => {
+			e && (M.value = "block");
+		}, { immediate: !0 });
+		let yt = u(() => j.value.isLoading.value && j.value.comments.value.length === 0), bt = u(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of A.content.value.blocks) if (e.add(t.id), t.type === "section") for (let n of t.children) for (let t of n) e.add(t.id);
+			return e;
+		});
+		function xt(e) {
+			return e ? !bt.value.has(e) : !1;
+		}
+		let St = u(() => M.value !== "block" || !V.value ? !1 : D.feature.capability.isBlockSaved(V.value) === !1), H = u(() => {
+			let e = j.value.comments.value;
+			return M.value === "unresolved" ? e = e.filter((e) => !e.resolvedAt) : M.value === "block" && V.value && (e = e.filter((e) => e.blockId === V.value)), e;
+		});
+		e(() => A.state.selectedBlockId, (e) => {
+			M.value === "block" && e && (D.feature.filterBlockId.value = e);
+		});
+		function U(e, t) {
+			M.value = e, D.feature.filterBlockId.value = e === "block" ? t ?? null : null;
+		}
+		function Ct(e) {
+			U("block", e);
+		}
+		function wt(e) {
+			R.value.has(e) ? R.value.delete(e) : R.value.add(e);
+		}
+		function Tt(e) {
+			P.value = e, F.value = "", I.value = null, R.value.has(e) || R.value.add(e);
+		}
+		function Et() {
+			P.value = null, F.value = "";
+		}
+		function W(e) {
+			I.value = e.id, L.value = e.body, P.value = null;
+		}
+		function G() {
+			I.value = null, L.value = "";
+		}
+		function K(e) {
+			z.value = e;
+		}
+		function q() {
+			z.value = null;
+		}
+		async function J() {
+			let e = N.value.trim();
+			if (!e || !j.value.canCreate.value) return;
+			let t = M.value === "block" ? V.value : void 0;
+			try {
+				await j.value.create({
+					body: e,
+					blockId: t ?? void 0
+				}), N.value = "";
+			} catch {}
+		}
+		async function Y(e) {
+			let t = F.value.trim();
+			if (!t || !j.value.canCreate.value) return;
+			let n = j.value.find(e);
+			try {
+				await j.value.create({
+					body: t,
+					blockId: n?.blockId ?? void 0,
+					parentId: e
+				}), P.value = null, F.value = "";
+			} catch {}
+		}
+		async function X(e) {
+			let t = L.value.trim();
+			if (t) try {
+				await j.value.update(e, { body: t }), I.value = null, L.value = "";
+			} catch {}
+		}
+		async function Z(e) {
+			try {
+				await j.value.remove(e);
+			} catch {}
+			z.value = null;
+		}
+		async function Dt(e) {
+			try {
+				await j.value.setResolved(e.id, !e.resolvedAt);
+			} catch {}
+		}
+		function Q(e) {
+			return j.value.canUpdate.value && j.value.isOwn(e);
+		}
+		function Ot(e) {
+			return j.value.canDelete.value && j.value.isOwn(e);
+		}
+		function kt(e) {
+			return de(e, O.time) ?? e;
+		}
+		function At(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), J());
+		}
+		function jt(e, t) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Y(t));
+		}
+		function $(e, t) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), X(t)), e.key === "Escape" && G();
+		}
+		function Mt() {
+			ee(() => {
+				B.value?.focus();
+			});
+		}
+		return T({
+			filterByBlock: Ct,
+			focusNewComment: Mt
+		}), (e, i) => (r(), p(m, {
+			"enter-active-class": "tpl-comments-slide-enter-active",
+			"enter-from-class": "tpl:translate-x-full",
+			"enter-to-class": "tpl:translate-x-0",
+			"leave-active-class": "tpl-comments-slide-leave-active",
+			"leave-from-class": "tpl:translate-x-0",
+			"leave-to-class": "tpl:translate-x-full"
+		}, {
+			default: n(() => [a.visible ? (r(), d("div", fe, [
+				g("div", pe, [g("div", me, [
+					c(s(w), {
+						size: 13,
+						"stroke-width": 2
+					}),
+					g("span", null, v(s(O).comments.title), 1),
+					a.feature.unresolvedCount.value > 0 ? (r(), d("span", he, v(a.feature.unresolvedCount.value), 1)) : f("", !0)
+				]), g("button", {
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+					onClick: i[0] ||= (e) => vt("close")
+				}, [c(s(C), {
+					size: 14,
+					"stroke-width": 2
+				})])]),
+				g("div", ge, [
+					g("button", {
+						class: l(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", M.value === "unresolved" ? "tpl-comment-filter--active" : ""]),
+						"data-testid": "comments-filter-unresolved",
+						onClick: i[1] ||= (e) => U("unresolved")
+					}, v(s(O).comments.filterUnresolved), 3),
+					g("button", {
+						class: l(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", M.value === "all" ? "tpl-comment-filter--active" : ""]),
+						"data-testid": "comments-filter-all",
+						onClick: i[2] ||= (e) => U("all")
+					}, v(s(O).comments.filterAll), 3),
+					s(A).state.selectedBlockId ? (r(), d("button", {
+						key: 0,
+						class: l(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", M.value === "block" ? "tpl-comment-filter--active" : ""]),
+						onClick: i[3] ||= (e) => U("block", s(A).state.selectedBlockId ?? void 0)
+					}, v(s(O).comments.filterBlock), 3)) : f("", !0)
+				]),
+				g("div", _e, [yt.value ? (r(), d("div", ve, [c(s(S), {
+					class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
+					size: 24,
+					"stroke-width": 2
+				})])) : H.value.length === 0 ? (r(), d("div", ye, [c(s(w), {
+					size: 32,
+					"stroke-width": 1.5,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), g("p", be, v(M.value === "all" ? s(O).comments.noCommentsHint : s(O).comments.noComments), 1)])) : (r(), d("div", xe, [(r(!0), d(_, null, t(H.value, (e) => (r(), d("div", {
+					key: e.id,
+					class: "tpl-comment-thread",
+					"data-testid": "comment-thread"
+				}, [
+					g("div", Se, [
+						g("div", Ce, [g("div", we, [
+							g("span", Te, v(j.value.isOwn(e) ? s(O).comments.ownedByYou : e.author.name), 1),
+							g("span", Ee, v(kt(e.createdAt)), 1),
+							e.updatedAt ? (r(), d("span", De, " (" + v(s(O).comments.edited) + ") ", 1)) : f("", !0)
+						]), g("div", Oe, [
+							j.value.canResolve.value ? (r(), d("button", {
+								key: 0,
+								"data-testid": "comment-resolve",
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: e.resolvedAt ? s(O).comments.unresolve : s(O).comments.resolve,
+								onClick: (t) => Dt(e)
+							}, [c(s(ue), {
+								size: 13,
+								"stroke-width": 2,
+								class: "tpl-resolve-icon",
+								style: te({ color: e.resolvedAt ? "var(--tpl-primary)" : void 0 })
+							}, null, 8, ["style"])], 8, ke)) : f("", !0),
+							Q(e) ? (r(), d("button", {
+								key: 1,
+								"data-testid": "comment-edit",
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: s(O).comments.edit,
+								onClick: (t) => W(e)
+							}, [c(s(y), {
+								size: 12,
+								"stroke-width": 2
+							})], 8, Ae)) : f("", !0),
+							Ot(e) ? (r(), d("button", {
+								key: 2,
+								"data-testid": "comment-delete",
+								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: s(O).comments.delete,
+								onClick: (t) => K(e.id)
+							}, [c(s(x), {
+								size: 12,
+								"stroke-width": 2
+							})], 8, je)) : f("", !0)
+						])]),
+						c(m, { name: "tpl-resolve" }, {
+							default: n(() => [e.resolvedAt ? (r(), d("div", Me, [c(s(ce), {
+								size: 10,
+								"stroke-width": 2.5
+							}), g("span", null, v(s(k)(s(O).comments.resolvedBy, { name: e.resolvedBy?.name ?? "" })), 1)])) : f("", !0)]),
+							_: 2
+						}, 1024),
+						e.blockId && xt(e.blockId) ? (r(), d("span", Ne, v(s(O).comments.missingBlock), 1)) : e.blockId ? (r(), d("button", {
+							key: 1,
+							class: "tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
+							onClick: (t) => s(A).selectBlock(e.blockId ?? "")
+						}, v(s(O).comments.jumpToBlock), 9, Pe)) : f("", !0),
+						I.value === e.id ? (r(), d("div", Fe, [o(g("textarea", {
+							"onUpdate:modelValue": i[4] ||= (e) => L.value = e,
+							class: "tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+							rows: "3",
+							onKeydown: (t) => $(t, e.id)
+						}, null, 40, Ie), [[h, L.value]]), g("div", Le, [g("button", {
+							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
+							disabled: !L.value.trim() || j.value.isSubmitting.value,
+							onClick: (t) => X(e.id)
+						}, v(s(O).comments.save), 9, Re), g("button", {
+							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+							onClick: i[5] ||= (e) => G()
+						}, v(s(O).comments.cancel), 1)])])) : (r(), d("p", ze, v(e.body), 1)),
+						z.value === e.id ? (r(), d("div", Be, [
+							g("span", Ve, v(s(O).comments.deleteConfirm), 1),
+							g("button", {
+								class: "tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]",
+								"data-testid": "comment-delete-confirm",
+								onClick: (t) => Z(e.id)
+							}, v(s(O).comments.delete), 9, He),
+							g("button", {
+								class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+								onClick: i[6] ||= (e) => q()
+							}, v(s(O).comments.cancel), 1)
+						])) : f("", !0),
+						I.value !== e.id && z.value !== e.id ? (r(), d("div", Ue, [j.value.canCreate.value ? (r(), d("button", {
+							key: 0,
+							"data-testid": "comment-reply",
+							class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+							title: s(O).comments.reply,
+							onClick: (t) => Tt(e.id)
+						}, [c(s(se), {
+							size: 13,
+							"stroke-width": 2,
+							class: "tpl:text-[var(--tpl-primary)]"
+						})], 8, We)) : f("", !0), (e.replies?.length ?? 0) > 0 ? (r(), d("button", {
+							key: 1,
+							class: "tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+							onClick: (t) => wt(e.id)
+						}, [R.value.has(e.id) ? (r(), p(s(le), {
+							key: 0,
+							size: 11,
+							"stroke-width": 2
+						})) : (r(), p(s(oe), {
+							key: 1,
+							size: 11,
+							"stroke-width": 2
+						})), ne(" " + v((e.replies?.length ?? 0) === 1 ? s(k)(s(O).comments.replyOne, { count: String(e.replies?.length ?? 0) }) : s(k)(s(O).comments.replyMany, { count: String(e.replies?.length ?? 0) })), 1)], 8, Ge)) : f("", !0)])) : f("", !0)
+					]),
+					c(m, { name: "tpl-replies" }, {
+						default: n(() => [R.value.has(e.id) && (e.replies?.length ?? 0) > 0 ? (r(), d("div", Ke, [(r(!0), d(_, null, t(e.replies, (t, n) => (r(), d("div", {
+							key: t.id,
+							class: l(["tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5", n < (e.replies?.length ?? 0) - 1 ? "tpl:mb-2" : ""])
+						}, [
+							g("div", qe, [g("div", Je, [
+								g("span", Ye, v(j.value.isOwn(t) ? s(O).comments.ownedByYou : t.author.name), 1),
+								g("span", Xe, v(kt(t.createdAt)), 1),
+								t.updatedAt ? (r(), d("span", Ze, " (" + v(s(O).comments.edited) + ") ", 1)) : f("", !0)
+							]), g("div", Qe, [Q(t) ? (r(), d("button", {
+								key: 0,
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: s(O).comments.edit,
+								onClick: (e) => W(t)
+							}, [c(s(y), {
+								size: 11,
+								"stroke-width": 2
+							})], 8, $e)) : f("", !0), Ot(t) ? (r(), d("button", {
+								key: 1,
+								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: s(O).comments.delete,
+								onClick: (e) => K(t.id)
+							}, [c(s(x), {
+								size: 11,
+								"stroke-width": 2
+							})], 8, et)) : f("", !0)])]),
+							I.value === t.id ? (r(), d("div", tt, [o(g("textarea", {
+								"onUpdate:modelValue": i[7] ||= (e) => L.value = e,
+								class: "tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+								rows: "2",
+								onKeydown: (e) => $(e, t.id)
+							}, null, 40, nt), [[h, L.value]]), g("div", rt, [g("button", {
+								class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
+								disabled: !L.value.trim() || j.value.isSubmitting.value,
+								onClick: (e) => X(t.id)
+							}, v(s(O).comments.save), 9, it), g("button", {
+								class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+								onClick: i[8] ||= (e) => G()
+							}, v(s(O).comments.cancel), 1)])])) : (r(), d("p", at, v(t.body), 1)),
+							z.value === t.id ? (r(), d("div", ot, [
+								g("span", st, v(s(O).comments.deleteConfirm), 1),
+								g("button", {
+									class: "tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]",
+									"data-testid": "comment-delete-confirm",
+									onClick: (e) => Z(t.id)
+								}, v(s(O).comments.delete), 9, ct),
+								g("button", {
+									class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+									onClick: i[9] ||= (e) => q()
+								}, v(s(O).comments.cancel), 1)
+							])) : f("", !0)
+						], 2))), 128))])) : f("", !0)]),
+						_: 2
+					}, 1024),
+					c(m, { name: "tpl-replies" }, {
+						default: n(() => [P.value === e.id ? (r(), d("div", lt, [g("div", ut, [
+							o(g("textarea", {
+								"onUpdate:modelValue": i[10] ||= (e) => F.value = e,
+								class: "tpl:max-h-24 tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]",
+								placeholder: s(O).comments.replyPlaceholder,
+								rows: "2",
+								onKeydown: (t) => jt(t, e.id)
+							}, null, 40, dt), [[h, F.value]]),
+							g("button", {
+								class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+								disabled: !F.value.trim() || j.value.isSubmitting.value,
+								onClick: (t) => Y(e.id)
+							}, [c(s(b), {
+								size: 14,
+								"stroke-width": 2
+							})], 8, ft),
+							g("button", {
+								class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:text-[var(--tpl-text-muted)]",
+								onClick: i[11] ||= (e) => Et()
+							}, [c(s(C), {
+								size: 14,
+								"stroke-width": 2
+							})])
+						])])) : f("", !0)]),
+						_: 2
+					}, 1024)
+				]))), 128))]))]),
+				j.value.canCreate.value ? (r(), d("div", pt, [St.value ? (r(), d("div", mt, v(s(O).comments.saveTemplateFirst), 1)) : (r(), d("div", ht, [o(g("textarea", {
+					ref_key: "newCommentInput",
+					ref: B,
+					"onUpdate:modelValue": i[12] ||= (e) => N.value = e,
+					class: "tpl:max-h-24 tpl:min-h-[48px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]",
+					"data-testid": "comments-input",
+					placeholder: s(O).comments.placeholder,
+					disabled: j.value.isSubmitting.value,
+					rows: "2",
+					onKeydown: At
+				}, null, 40, gt), [[h, N.value]]), g("button", {
+					class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+					"data-testid": "comments-send",
+					disabled: !N.value.trim() || j.value.isSubmitting.value,
+					onClick: J
+				}, [j.value.isSubmitting.value ? (r(), p(s(S), {
+					key: 0,
+					class: "tpl-spinner",
+					size: 16,
+					"stroke-width": 2
+				})) : (r(), p(s(b), {
+					key: 1,
+					size: 16,
+					"stroke-width": 2
+				}))], 8, _t)]))])) : f("", !0)
+			])) : f("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-40431726"]]);
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=CommentsSidebar-Dxke-vUP.js.map