Support for grouped notifications [#30440](mastodon/mastodon#30440)

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.0.0rc40: 2024-07-11
+
+* Support for grouped notifications [#30440](https://github.com/mastodon/mastodon/pull/30440)
+
 ### 2.0.0rc39: 2024-06-30
 
 * Fix bottomless card and add styles for more-from-author

layout-multiple-columns.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   2.0.0rc39 */
+   2.0.0rc40 */
 
 /* CSS variables */
 :root {
@@ -1534,6 +1534,17 @@ body.embed .detailed-status,
   pointer-events: none;
 }
 
+/* Grouped notification exceptions, pr30440 2024-07-11 */
+.layout-multiple-columns .notification-ungrouped .status .hashtag-bar,
+.layout-multiple-columns .notification-ungrouped .status .status__content,
+.layout-multiple-columns .notification-ungrouped .status .status__action-bar {
+  padding-left: var(--gap-default);
+}
+
+.layout-multiple-columns .notification-ungrouped .notification-ungrouped__header {
+  padding-left: calc(24px + var(--gap-default));
+}
+
 /* Media inside status update tinted to right */
 .layout-multiple-columns .status .audio-player,
 .layout-multiple-columns .status .video-player,
@@ -1810,6 +1821,13 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
   height: calc(var(--gap-default) * 2);
 }
 
+/* Notification groups, pr30440 2024-07-11 */
+.layout-multiple-columns .notification-group {
+  display: grid;
+  gap: var(--gap-default);
+  grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr);
+}
+
 /* Make sure notification user is clickable */
 .layout-multiple-columns .notification__display-name {
   position: relative;

layout-single-column.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   2.0.0rc39 */
+   2.0.0rc40 */
 
 /* CSS variables */
 :root {
@@ -1547,6 +1547,17 @@ body.embed .detailed-status__display-avatar > img,
   pointer-events: none;
 }
 
+/* Grouped notification exceptions, pr30440 2024-07-11 */
+.layout-single-column .notification-ungrouped .status .hashtag-bar,
+.layout-single-column .notification-ungrouped .status .status__content,
+.layout-single-column .notification-ungrouped .status .status__action-bar {
+  padding-left: var(--gap-default);
+}
+
+.layout-single-column .notification-ungrouped .notification-ungrouped__header {
+  padding-left: calc(24px + var(--gap-default));
+}
+
 /* Media inside status update tinted to right */
 .layout-single-column .status .audio-player,
 .layout-single-column .status .video-player,
@@ -1861,6 +1872,13 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   height: calc(var(--gap-default) * 2);
 }
 
+/* Notification groups, pr30440 2024-07-11 */
+.layout-single-column .notification-group {
+  display: grid;
+  gap: var(--gap-default);
+  grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr);
+}
+
 /* Make sure notification user is clickable */
 .layout-single-column .notification__display-name {
   position: relative;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "2.0.0rc39",
+  "version": "2.0.0rc40",
   "description": "",
   "main": "index.js",
   "scripts": {