This commit makes the
[color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)
theme component a core feature with improvements and bug fixes. The
theme component will be updated to become a no-op if the core feature is
enabled.
Noteworthy changes:
* the color mode selector has a new "Auto" option that makes the site
render in the same color mode as the user's system preference
* the splash screen respects the color mode selected by the user
* dark/light variants of category logos and background images are now
picked correctly based on the selected color mode
* a new `interface_color_selector` site setting to disable the selector
or choose its location between the sidebar footer or header
Internal topic: t/139465.
---------
Co-authored-by: Ella <ella.estigoy@gmail.com>
This is the first in a series of PRs to introduce a
ProseMirror-based
WYSIWYM editor experience
alongside our current textarea Markdown editor.
Behind a hidden site setting, this PR adds a toggle to the composer
toolbar, allowing users to switch between the two options.
Our implementation builds upon the excellent ProseMirror and its
non-core Markdown
module, using the
module's schema, parsing, and serialization definitions as the base for
further Discourse-specific features.
An extension API is included to enable further customizations.
The necessary extensions to support all Discourse's core and core
plugins features **will be implemented in subsequent PRs**.
---------
Co-authored-by: David Taylor <david@taylorhq.com>
Due to a recent regression the selection management was failing in
drawer mode for threads. We were not correctly setting the active
thread.
This commit fixes the issue and adds a spec.
All of these buttons use our default grey background styling, but aren't
carrying the `btn-default` class, which makes them easier to target in
themes. This PR adds the class.
We used this flag for experimenting with admin plugin sidebars. We have now settled on a tabbed layout, and this is no longer needed.
This PR simply ignores the flag in a backwards-compatible way, so we can discontinue usage in plugins and then remove the backwards-compatibility in core.
The following case was bugged:
- visit a thread in full page chat
- click channel title
- click back button in channel navbar
- 💥 you would have a channel with limited width as if there was
still the thread showing next to it, but it was empty
These changes allow to load model when loading a screen of the drawer,
the underlying idea is to avoid having to rely on the global
`activeChannel`, this essentially makes each screen responsible for it's
data.
This change is also fixing a bug where clicking on a link routing to the
same screen of the drawer you are already on, would display a blank
drawer.
This commit does several changes:
- it moves the ownership of the last message info to the channel instead
of storing it on the message, it avoids the need to iterate over every
messages
- makes an optimistic update of the last read message id
- adds a spec to confirm this behavior
Users can now decide if they want to send a message on:
- <kbd>enter</kbd>
- <kbd>meta + enter</kbd>
If you choose <kbd>meta + enter</kbd>, <kbd>enter</kbd> will add a
linebreak.
<img width="192" alt="Screenshot 2025-01-21 at 12 57 48"
src="https://github.com/user-attachments/assets/abfd6f8b-83b3-4e6f-be67-8f63d536ca8a"
/>
Each case simplified:
`next(() => later(() => ...))` -> "wait 0 ms then wait X ms"
`next(() => debounce(() => ...))` -> "wait 0 ms then wait X ms
(debounced)"
`next(() => scheduleAfter("render", ...))` -> "in the next (empty) run
loop, do the thing (after a no-op render step)"
Stylelint is a css linter: https://stylelint.io/
As part of this change we have added two javascript scripts:
```
pnpm lint:css
pnpm lint:css:fix
```
Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for
configuration in VSCode.
---------
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
discourse-emojis is used in chat only for message actions to show a
difference with the the other emojis so people don't think it's just the
smiley emoji.
When we had no width stored for the side panel in the local storage,
essentially the computation would end up being:
```javascript
Math.min(null, 1000);
```
Which would output: 0. This commit ensures we have a default for store
width: MIN_PANEL_WIDTH. And also uses the same value in CSS and JS.
I had to change z-layers of chat-side-panel resizer as it was
interfering with system specs changing the notification level of a
thread, when trying to click the option in the dropdown, it would
instead click the resizer as it would appear on top of the dropdown.
Tried to write a test but couldn't get something reliable.
The stacking context fix we use in chat to avoid:
https://bugs.webkit.org/show_bug.cgi?id=262287 was causing this weird
behavior in chat where the scroll event wouldn't fire when the finger is
on text and not an empty area of the scrollable div.
This simplified implementation seems to work reliably and avoids the
issue.
`discourse-common` was created in the past to share logic between the
'wizard' app and the main 'discourse' app. Since then, the wizard has
been consolidated into the main app, so the separation of
`discourse-common` is no longer useful.
This commit moves `discourse-common/(lib|utils)/*` into
`discourse/lib/*`, adds shims for the imports, and updates existing
uses in core.
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 />`
