diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs index 28c23fea469..5545c16aae4 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs @@ -1,146 +1,33 @@ import Component from "@glimmer/component"; -import { tracked } from "@glimmer/tracking"; -import { action } from "@ember/object"; -import didInsert from "@ember/render-modifiers/modifiers/did-insert"; -import willDestroy from "@ember/render-modifiers/modifiers/will-destroy"; -import { service } from "@ember/service"; -import concatClass from "discourse/helpers/concat-class"; +import { LinkTo } from "@ember/routing"; import formatDate from "discourse/helpers/format-date"; import replaceEmoji from "discourse/helpers/replace-emoji"; import htmlSafe from "discourse-common/helpers/html-safe"; import i18n from "discourse-common/helpers/i18n"; -import getURL from "discourse-common/lib/get-url"; -import { bind } from "discourse-common/utils/decorators"; import ChatThreadParticipants from "./chat-thread-participants"; import ChatUserAvatar from "./chat-user-avatar"; export default class ChatMessageThreadIndicator extends Component { - @service capabilities; - @service chat; - @service chatStateManager; - @service router; - @service site; - - @tracked isActive = false; - get interactiveUser() { return this.args.interactiveUser ?? true; } - @action - setup(element) { - this.element = element; - - if (this.capabilities.touch) { - this.element.addEventListener("touchstart", this.onTouchStart, { - passive: true, - }); - this.element.addEventListener("touchmove", this.cancelTouch, { - passive: true, - }); - this.element.addEventListener("touchend", this.onTouchEnd); - this.element.addEventListener("touchCancel", this.cancelTouch); - } - - this.element.addEventListener("mousedown", this.openThread, { - passive: true, - }); - - this.element.addEventListener("keydown", this.openThread, { - passive: true, - }); - } - - @action - teardown() { - if (this.capabilities.touch) { - this.element.removeEventListener("touchstart", this.onTouchStart, { - passive: true, - }); - this.element.removeEventListener("touchmove", this.cancelTouch, { - passive: true, - }); - this.element.removeEventListener("touchend", this.onTouchEnd); - this.element.removeEventListener("touchCancel", this.cancelTouch); - } - - this.element.removeEventListener("mousedown", this.openThread, { - passive: true, - }); - - this.element.removeEventListener("keydown", this.openThread, { - passive: true, - }); - } - - @bind - onTouchStart(event) { - this.isActive = true; - event.stopPropagation(); - - this.touching = true; - } - - @bind - onTouchEnd() { - this.isActive = false; - - if (this.touching) { - this.openThread(); - } - } - - @bind - cancelTouch() { - this.isActive = false; - this.touching = false; - } - - @bind - openThread(event) { - if (event?.type === "keydown" && event?.key !== "Enter") { - return; - } - - // handle middle mouse - if ( - event?.type === "mousedown" && - (event?.which === 2 || event?.shiftKey) - ) { - window.open( - getURL( - this.router.urlFor( - "chat.channel.thread", - ...this.args.message.thread.routeModels - ) - ), - "_blank" - ); - return; - } - - this.chat.activeMessage = null; - - this.router.transitionTo( - "chat.channel.thread", - ...this.args.message.thread.routeModels - ); + get threadMessageRoute() { + return [ + ...this.args.message.thread.routeModels, + this.args.message.thread.preview.lastReplyId, + ]; } } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-message.gjs index e8fc97cbda7..3de3629f629 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.gjs @@ -589,7 +589,10 @@ export default class ChatMessage extends Component { {{/unless}} {{#if this.hideUserInfo}} - + {{else}} {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message/info.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/message/info.gjs index 6335b0d94d9..6d01da418b1 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/message/info.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/message/info.gjs @@ -1,4 +1,5 @@ import Component from "@glimmer/component"; +import { hash } from "@ember/helper"; import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import willDestroy from "@ember/render-modifiers/modifiers/will-destroy"; import { LinkTo } from "@ember/routing"; @@ -142,7 +143,7 @@ export default class ChatMessageInfo extends Component { {{/if}} - {{formatChatDate @message}} + {{formatChatDate @message (hash threadContext=@threadContext)}} {{#if @message.bookmark}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message/left-gutter.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/message/left-gutter.gjs index d5526d41b7f..6817a25c864 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/message/left-gutter.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/message/left-gutter.gjs @@ -1,4 +1,5 @@ import Component from "@glimmer/component"; +import { hash } from "@ember/helper"; import { LinkTo } from "@ember/routing"; import { service } from "@ember/service"; import { eq } from "truth-helpers"; @@ -25,7 +26,10 @@ export default class ChatMessageLeftGutter extends Component { {{else if this.site.desktopView}} - {{formatChatDate @message "tiny"}} + {{formatChatDate + @message + (hash mode="tiny" threadContext=@threadContext) + }} {{/if}} {{#if @message.bookmark}} diff --git a/plugins/chat/assets/javascripts/discourse/helpers/format-chat-date.js b/plugins/chat/assets/javascripts/discourse/helpers/format-chat-date.js index fb504e08cc4..d89ae0e5dea 100644 --- a/plugins/chat/assets/javascripts/discourse/helpers/format-chat-date.js +++ b/plugins/chat/assets/javascripts/discourse/helpers/format-chat-date.js @@ -3,14 +3,14 @@ import User from "discourse/models/user"; import getURL from "discourse-common/lib/get-url"; import I18n from "discourse-i18n"; -export default function formatChatDate(message, mode) { +export default function formatChatDate(message, options = {}) { const currentUser = User.current(); const tz = currentUser ? currentUser.user_option.timezone : moment.tz.guess(); const date = moment(new Date(message.createdAt), tz); const title = date.format(I18n.t("dates.long_with_year")); const display = - mode === "tiny" + options.mode === "tiny" ? date.format(I18n.t("chat.dates.time_tiny")) : date.format(I18n.t("dates.time")); @@ -19,7 +19,15 @@ export default function formatChatDate(message, mode) { `${display}` ); } else { - const url = getURL(`/chat/c/-/${message.channel.id}/${message.id}`); + let url; + if (options.threadContext) { + url = getURL( + `/chat/c/-/${message.channel.id}/t/${message.thread.id}/${message.id}` + ); + } else { + url = getURL(`/chat/c/-/${message.channel.id}/${message.id}`); + } + return htmlSafe( `${display}` ); diff --git a/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss index a6f34bd2508..d264e8d23f8 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss @@ -29,12 +29,6 @@ } } - .touch & { - &.-active { - box-shadow: var(--shadow-dropdown); - } - } - .no-touch & { &:hover { box-shadow: var(--shadow-dropdown); diff --git a/plugins/chat/test/javascripts/unit/helpers/format-chat-date-test.js b/plugins/chat/test/javascripts/unit/helpers/format-chat-date-test.js index 66873cd78a0..fcc463ffc0b 100644 --- a/plugins/chat/test/javascripts/unit/helpers/format-chat-date-test.js +++ b/plugins/chat/test/javascripts/unit/helpers/format-chat-date-test.js @@ -19,4 +19,19 @@ module("Discourse Chat | Unit | Helpers | format-chat-date", function (hooks) { `/chat/c/-/${channel.id}/${this.message.id}` ); }); + + test("link to chat message thread", async function (assert) { + const channel = fabricators.channel(); + const thread = fabricators.thread(); + this.message = fabricators.message({ channel, thread }); + + await render( + hbs`{{format-chat-date this.message (hash threadContext=true)}}` + ); + + assert.equal( + query(".chat-time").getAttribute("href"), + `/chat/c/-/${channel.id}/t/${thread.id}/${this.message.id}` + ); + }); });