no issue
This reverts commit 040b290fbd.
- the commit has broken browser tests, reverting to get back in a green state
- will be re-introduced in a follow-up PR
refs
[AP-629](https://linear.app/ghost/issue/AP-629/notes-say-they-error-but-post-correctly)
Fixed intermittent error when posting a note in `admin-x-activitypub`
The error was intermittent due to it only occurring when a specific set
of steps occurred, and the query cache being periodically cleared.
The error itself was due to incorrectly expecting the `outbox:${handle}`
query to be an array when it was in fact an object.
This PR also resolves and issue where the reply count for new notes
would display `NaN` (because the `replyCount` property was not present
on newly created notes)
closes https://linear.app/ghost/issue/DES-548/update-portal-notification-style
Portal popup notification styles look outdated and harsh. Also in-popup notifications have several visual design issues such as positioning, alignment, typography and so on. This PR fixes these issues by applying a much more standard design to Portal notifications.
ref ENG-745
- added permission related errors to list of error types to be handled
- previously, generic error messages were displayed when permission
errors are thrown
- this would make it possible to display the actual message returned
from the API in toasts
ref DES-898
- previously, the name field in Portal account settings used to be required which caused an issue users were not able to update their email address without adding name first
- now the name field is optional makes it possible to update the email address without adding name, or remove their name as well
- it was intended not to wire this up to "Display name in signup form" setting in Portal for the simplicity
ref DES-547
- when Portal popup is opened and the browser scroll bar is visible, it
used to make layout shift, because we were hiding the scrollbar
- now it applies right margin to body element and the trigger button by
calculating the scrollbar width only when the browser scroll bar is
visible
- it also preservers the current right margin for those elements and
makes the calculation based on that
ref DES-933
- when three dot buttons are clicked in the theme management modal, the
menu alignment was wrong
- this fixes the issue by aligning the button and the menu by the right
edge
ref ONC-225
- Ensures newsletter preferences are hidden in the Portal when email functionality is disabled.
- Adds conditional logic in NewsletterManagement.js to check for the hasNewslettersEnabled prop.
- Updates tests in AccountEmailPage.test.js and AccountHomePage.test.js to cover scenarios where newsletters are disabled.
- Improves user experience by preventing the display of irrelevant settings when email is turned off.
ref https://linear.app/ghost/issue/AP-633/reader-view-customization-options, https://linear.app/ghost/issue/AP-631/estimated-reading-time-in-reader-view
- Improved typography, spacing and alignment.
- Improved selection of font sizes from the reader view customization popover.
- Added a button to reset reader view customization settings to default, in case user ends up in a state they’re not happy with and want to go back to a sensible default.
- Added preview to typeface selection component so it’s easier to see what you’re selecting.
- Disabled background clicks on all AP modals for a more consistent experience and to avoid accidental clicks.
- Changed the reading progress indicator increments from 1 to 5 to attract less attention while the user is reading.
no issue
- contains two edge-case bug fixes, one related to pagination when deleting a comment and another that works around issues arising from potentially unstable API sorting
closes https://linear.app/ghost/issue/PLG-305
- adds deduplication of comments when fetching top-level pages
- avoids problems where the underlying sort is unstable (e.g. "best" as likes are changing) resulting in an already loaded comment appearing on a later-loaded page
- doesn't solve for missing comments between pages but does prevent invalid local state that can lead to buggy UI
closes https://linear.app/ghost/issue/PLG-304
- added a refresh of the comments list when a top-level comment with no replies is deleted so the pagination resets and replies aren't missed when loading more due to a shift in the underlying paginated data
no issue
- contains two minor bug fixes for edit name/expertise buttons on the main form and incorrect replies-left-to-load counts after deleting replies
closes https://linear.app/ghost/issue/PLG-303
- when deleting a reply our "replies left" calculation was getting out of sync because the `count.replies` state on the parent comment wasn't being updated, the result was for each comment deleted we were displaying 1 more reply that was still to load
- updated the `deleteComment` action to also modify the parent comment's `count.replies` value when a reply was deleted ensuring our "replies left" calculation remains correct
closes https://linear.app/ghost/issue/PLG-302
- switching from `onClick` to `onMouseDown` allows the button events to fire and be picked up by the popup-opening handler before the click causes a blur event on the main form to fire which removes the expertise buttons
- we have a test for adding expertise via the main form which was giving us a false positive due to the way Playwright handles events, unfortunately I couldn't find a way to adjust that to match the real-world behaviour without ending up with a test that always fails
ref https://linear.app/ghost/issue/DES-1033/icon-implementation
The Storybook structure contained Lucide icons under "Components", but
it's an experimental component. This commit creates an Experimental
component group in Shade and updates the corresponding docs.
closes https://linear.app/ghost/issue/DES-1033/icon-implementation
In Shade right now there's no support for icons, which is a fundamental
building block in any design system. We use Streamline Icons which
unfortunately don't have an out-of-the-box React support like e.g.
Lucide Icons. This PR adds support for custom icons to be used directly
from Shade by importing SVG's from a directory and creating React
components dynamically. It also adds a grid view of all available icons
in Storybook so it's easy to get an overview of available icons and copy
their React component.
ref
https://linear.app/ghost/issue/DES-1020/create-new-react-app-for-shade
Shade is our new design system that follows React best practices and
leverages third-party libraries extensively. It's built on ShadCN/UI
which is one of the most popular React UI libraries today. This commit
adds an (almost) empty React app, set up to be the a starting point of
Shade.
ref https://linear.app/ghost/issue/PLG-267
- updated delete comment action so it removes comments rather than just updating their status to `'deleted'`
- deleted comments that still have replies have their status updated so the replies remain visible
- matches updated API behaviour where deleted comments are not shown at all
closes https://linear.app/ghost/issue/PLG-297
- we were setting the comment count Admin API browse comments response meta pagination data which will never be correct because it only counts top-level comments for pagination purposes
- we have a public comment counts endpoint that is already fetched, there's no need to override that when using the Admin API because the overall count doesn't change across API's, even when the Admin API includes hidden comments because those don't impact the visible count
- updated test setup so the title and count is shown so it can be asserted against
- updated mocked api to correctly return count of all published comments+replies
closes https://linear.app/ghost/issue/PLG-273
- removed previous fix which only worked on last comment but not last reply
- keeping track of last comment/reply spread a lot of domain knowledge around for a UI-only concern and wouldn't scale if we have other dropdowns in the future
- added `useOutOfViewportClasses` hook
- accepts an object with top/bottom/right/left containing default and outOfViewPort classes
- applies the correct classes using the DOM rather than React so that we avoid re-renders and associated flickering or broken rendering
ref https://linear.app/ghost/issue/PLG-296/
When logged in as an Admin, comments-ui switches comment reads from the Members API over to the Admin API so that hidden comments can be displayed to allow moderation activities. However, the Admin API not using member authentication and CORS preventing the front-end members auth cookie being passed over to the Admin API domain meant that the logged-in member's likes were missing when fetching via the Admin API as there is no available reference to the logged in member.
This change works around the problem by introducing an `impersonate_member_uuid` param to the comments read/browse endpoints of the Admin API. When passed, the provided uuid is used to simulate that member being logged in so that likes are correctly shown.
- Introduced `impersonation_member_id` parameter to resolve issues with admin API not returning correct "liked" status for comments when an admin is logged in.
- Updated API endpoints in `comment-replies.js` and `comments.js` to handle `impersonation_member_id`.
- Adjusted `CommentsController` to validate and process the `impersonation_member_id` parameter before passing it to database queries.
- Enhanced test coverage to ensure proper handling of the new parameter and accurate "liked" status behavior.
REF https://linear.app/ghost/issue/PLG-298/
- When you're typing a comment, and exit the input field, it collapses into a non-editable state; you first have to click on it again to "open" the form. This means you can't select the text or instantly start typing again. When the input has a value, we should stop it from closing.
- added custom `useEditor` hook that wraps TipTap and exposes both the `editor` and `hasContent` props keeping logic out of the consuming components
---------
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
ref https://github.com/TryGhost/Ghost/pull/21788#discussion_r1869802093
- Introduced `setCommentsIsLoading` action to handle the loading state
of comments dynamically.
- Updated `setOrder` function to dispatch the `setCommentsIsLoading`
action, ensuring proper UI feedback during asynchronous operations.
ref https://linear.app/ghost/issue/AP-625/implement-notification-grouping-for-follows-and-likes
- Improved handling for notification clicks of various types: single follower notification opens that follower in the drawer, multiple followers expands the followers list, liked post opens the article in the wide drawer, liked note opens the note in the narrow drawer
- Improved hover and click states for profile names, usernames and avatars. Now it's more obvious what's clickable, and clicking on any of these elements in any context opens that profile in the drawer.
- Created a handleProfileClick utility since we're using it in a lot of places.
- Removed unnecessary types
- Made the HTML structure more semantic
ref https://linear.app/ghost/issue/AP-625/implement-notification-grouping-for-follows-and-likes
- Added basic frontend grouping for Follow and Like notifications, so the page is easier to scan through. For each loaded batch of notifications we check if they can be grouped (all follows get grouped, all likes for a certain post get grouped) and then merge those grouped pages of notifications.
- Improved UI for notifications, with notification type icons for each group.
- Added a utility for truncating text.
closes https://linear.app/ghost/issue/PLG-294
- making the `replied to: [removed]` text a link was a bit confusing because clicking it does nothing
- if the replied-to comment doesn't exist (e.g. hidden/deleted and not returned in API response) or has been unpublished we replace the `<a>` with a `<span>` to remove the link behaviour
no issue
- keeps logic inside `<CommentHeader>` single-purpose
- allows for cleaner code when adding logic to remove the link when the replied-to comment is removed
- switched `queryByText` to `getByText` in the test to make debugging easier, the latter will print the current DOM if it fails to find an element
# Conflicts:
# apps/comments-ui/src/components/content/Comment.tsx
REF https://linear.app/ghost/issue/PLG-284
When clicking on a replied-to reference, you scroll up to the parent comment. To guide the eye, the parent comment is highlighted with a yellow background.
- added `dispatchAction` to the `ActionHandler` function call arguments, allowing actions to call other actions
- added `commentIdToHighlight` app context state and associated `highlightComment` action to set it
- updated `Comment` (and related sub-components) to match `commentIdToHighlight` when rendering to determine whether to apply highlighting of comment contents
- for the highlight, `<mark>` is used to wrap any paragraphs inside the comment contents and appropriate tailwind highlight animation classes applied
- uses the inline `<mark>` element so that background highlight only applies to the text bounding boxes rather than the entire wrapping element
---------
Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
ref [DES-949](https://linear.app/tryghost/issue/DES-949/177e604501
This adds custom fonts feature allowing users to select heading and body
fonts for their themes from a curated list. This allows publishers to
have more control over their brand, and allows themes to have a wider
range of styles to appeal to different audiences.
Without custom fonts support, themes will continue to work as normal,
but users won't be able to customize their typography. As for the
official themes, all of them will support custom fonts.
ref DES-1011
- previously, we were hiding the old font settings from the official themes without checking if they support the custom fonts or not
- now we use the gscan warning info to check this — only when there's support, we hide the settings which means users with the older version will get the old settings back
- also added two new tests for this procedure
PLG-280
- Added a loading state implementation when changing the ordering of
comments.
- This improves the overall UX particularly with slower connections.
- Due to the nature of how comments and ordering are handled, we
approached it with a simple state that determines whether it's done
loading or not around the API query.
---------
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
