This will have the following advantages:
- removes a very annoying bug which was making text selection super hard on iOS
- removes the flashing of header when transitioning from disable to enable body scroll lock
- uses emojiSearch to ensure we have the same result than autocomplete when filtering emojis (for example search aliases were not working correctly because of this)
- reset the visible sections when clearing filter to ensure we are not attempting to display all the emojis at once which would be slow
- prevents flashing of the full emoji list before showing filtered results
- correctly reset recent favorites and only show them when used
Now that we correctly await for the modal to close, we dont need to special case and disable focusTrigger, the flow will now be:
- click an element of the menu
- wait for modal to close
- focus trigger
- trigger action, which will eventually open a modal and attempt to focus the first item
The chat emoji picker is renamed emoji-picker, and the old emoji-picker is removed.
This commit doesn't attempt to fully rework a new emoji-picker but instead tries to migrate everything to one picker (the chat one) and add small changes.
Other notable changes:
- all the favorite emojis code has been mixed into one service which is able to store one state per context, favorites emojis will be stored for all topics, and for each chat channel. Meaning that if you always use a specific emoji in a channel, it will only show as favorite emoji in this channel.
- a lot of static code has been removed which should improve initial load perf of discourse. Initially this code was around to improve the performance of the emoji picker rendering.
- the emojis are now stored, once the full list has been loaded, if you close and reopen the picker it won't have to load them again.
List of components:
- `<EmojiPicker />` will render a button which will open a dropdown
- `<EmojiPickerContent />` represents the content of the dropdown alone, it's useful when you want to render a picker from an action which is not the default picker button
- `<EmojiPickerDetached />` just a simple wrapper over `<EmojiPickerContent />` to make it easier to use it with `this.menu.show(...)`
---------
Co-authored-by: Renato Atilio <renatoat@gmail.com>
When inserting anything from the chat composer dropdown, any popups opened weren't properly focussed.
This was due to the default behaviour of the dropdown menu closing, which tries to return the focus to the original triggering element. This would normally be the correct behaviour, but here we want the menu to close in the background, handing focus off to the popup, instead.
For mentions within threads, the mentioned user can experience a stuck notification. This is due to thread memberships only being created for users who interact with a thread. Without the membership we cannot track if the message containing the mention was read by the user.
The solution to this explored in this PR is:
- auto add memberships for mentioned users (only direct mentions for performance reasons).
- update channel/thread unread queries to check notification read status AND thread membership last read message id when counting mentions.
Previously the mention count would remain until the user notification (containing the mention) was read. However this only happens if the user clicks the notification or clicks dismiss all notifications. When a user navigated to the thread without clicking the notification, the green/urgent badge on chat would remain even after a hard page refresh.
After searching for an emoji through the autocomplete, when a user uses the emoji picker (to see the full list of emojis) and selects one, the content in the chat composer would contain both the partially written emoji and the full :selected_emoji: code.
The actual fix is just re-using the emojiSelected method from TextManipulation.
This commit introduces <NotificationsTracking /> which is a wrapper component around <DMenu /> which replaces the select-kit component <TopicNotificationsButton />.
Each tracking case has its dedicated component:
- topic -> `<TopicNotificationsTracking />`
- group -> `<GroupNotificationsTracking />`
- tag -> `<TagNotificationsTracking />`
- category -> `<CategoryNotificationsTracking />`
- chat thread -> `<ThreadNotificationsTracking />`
This PR cleans up some unnecessary CSS which are not used anymore. Support of sidebar in chat has a long history due to the various steps leading to the sidebar as we know it today.
In this PR, we added functionality to hide the admin header for edit/new actions - https://github.com/discourse/discourse/pull/30175
To make it work properly, we have to rename `show` to `edit` which is also a more accurate name.
This change creates a shallow copy of the public message channels so we don't change the original array while sorting.
Without this change the publicMessageChannels getter cache gets invalidated and cached again with the sorted channels array instead, which causes a bug where the sidebar channel list sorting order is updated by activity when user interacts with the chat drawer.
It's been set to this value as a workaround for long thread titles, but we now have standalone thread titles in the thread body which makes this not needed. People had troubles understanding why they couldn't resize more the thread panel.
Some users are seeing consistent "Error 5" crashes in chrome when saving/deleting bookmarks on chat messages.
When crash logging is enabled, the message is:
`[33466:259:1206/122312.195048:ERROR:ax_object.cc(3400)] Check failed: !NeedsToUpdateCachedValues(). Stale values: "Group" axid#7543 <svg#discourse-emojis> needsToUpdateCachedValues/disallowed isIgnored inUserAgentShadowRoot:<use> isInert needsToUpdateChildren hasDirtyDescendants`
This seems to be influenced by a few factors, including the re-render of the bookmarks button, the adjacent 'reactions' button, and also the opening/closing of the modal.
Adding this `activeElement.blur` seems to avoid the issue in my manual testing. Hopefully, this can be dropped after future chrome releases.
Internal topic: t/143485
Follow up to #30127.
Normally when viewing a channel with tracked threads, we dismiss the blue dot next to the channel name even though the thread has not been read yet.
This change applies the same criteria to determine if we should bold the channel name.
This change sorts unread channels in descending order based on last message date, so channels with the latest activity will always appear at the top. It also adds some improvements for sorting channels with unread threads, now when multiple channels have unread threads, they will be sorted by last thread reply date to ensure more active channels rise to the top.
For DM channels, the order is now:
- Urgent (green badge) - unread messages, mentions and unread watched threads (most recent activity at top)
- Unread (blue badge) - unread tracked threads (most recent thread reply at top)
- Everything else (most recent message at top)
...since it was mostly duplicating the work the "ComposerPresenceManager" was doing.
So now the #chat composer uses the same "presence manager" as the composer, benefiting from the "hide presence" checks, with the only difference that the "keep alive" timeout is 5s for chat and 10s for topics/posts.
This will ensure AI generated titles don't appear as out of range in the UI and also allow users to set longer titles. The limit in DB was already 100 so it's just a simple frontend change.
We were using a complex logic to make it change size based on scroll position but this was imperfect and not visually pleasing. Also the title had been made a button which was causing the ellipsis to not work correctly, and I would prefer to not mix page knowledge (thread) with title component so I made this click logic directly in the chat-thread component.
---------
Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
This commit will hide the channel when the side panel is present and the width of the viewport is less than 1000px. This is especially useful when you want to focus reading a thread on a small screen.
This change only impacts desktops.
Historically the behavior of this file has been complexified to attempt to answer this use case:
A user has two tabs open, tab 1 is on a topic, tab 2 is on a chat channel. If your active tab is tab 1 and someones sends you a mention in chat. We will show a desktop notification, but in which tab the channel should open if you click it? The changes made years ago said: in tab 2.
I think this is complexifying too much this codepath and is also confusing. You might wonder why this discourse notification you clicked opened in some of your 50 tabs in the background when you had a discourse tab active currently in front of you.
Moreover, a recent change has made the notification to only happen on desktop, but all the subscription stuff was happening regardless of mobile or desktop.
- Clicking the channel title of a collapsed drawer will only open the drawer, and not open settings
- Remove the back button when the drawer is collapsed
- Uses same icon for toggling on chat that composer
- add max-width to minimised drawer + add hover effect
---------
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
In particular, this applies:
- new `discourse/no-implicit-this` template-lint rule
- `init`/`willDestroy` ordering enforcement
- `lines-between-class-members`
