feat(app): restyle the inbox and message preview surfaces (#1706)

fluxer_app/src/features/messaging/components/popouts/InboxMessageHeader.module.css

@@ -7,6 +7,7 @@
 	justify-content: space-between;
 	gap: 0.75rem;
 	padding: var(--inbox-header-padding-y) 0;
+	border-bottom: 0.0625rem solid var(--message-preview-card-divider, transparent);
 }
 
 .headerLeft {

fluxer_app/src/features/messaging/components/popouts/RecentMentionsContent.module.css

@@ -1,16 +1,5 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-.dmIcon {
-	display: flex;
-	height: 1.25rem;
-	width: 1.25rem;
-	align-items: center;
-	justify-content: center;
-	border-radius: 624.9375rem;
-	background-color: var(--background-modifier-hover);
-	color: var(--text-primary);
-}
-
 .filterButton {
 	display: flex;
 	height: 2rem;
@@ -43,84 +32,13 @@
 }
 
 .guildGroup {
-	margin-bottom: 0.25rem;
 	min-width: 0;
 }
 
-.guildGroup:last-child {
-	margin-bottom: 0;
-}
-
-.guildGroupHeading {
-	position: sticky;
-	top: 0;
-	z-index: 3;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	min-height: 2.25rem;
-	margin: 0;
-	padding: 0.75rem 0.25rem 0.5rem;
-	font-size: 0.6875rem;
-	font-weight: 700;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--text-primary-muted);
-	background-color: transparent;
-	transition: color 0.12s ease;
-}
-
 .messageCard {
 	margin-bottom: 1rem;
 }
 
-.groupContainer {
-	margin-bottom: 1rem;
-}
-
-.groupHeader {
-	margin-bottom: 0.5rem;
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
-}
-
-.groupHeaderContent {
-	display: flex;
-	min-width: 0;
-	flex: 1 1 0%;
-	flex-direction: column;
-}
-
-.groupHeaderText {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	font-size: 0.75rem;
-	line-height: 1rem;
-}
-
-.channelName {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	color: var(--text-primary);
-}
-
-.guildName {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	color: var(--text-primary-muted);
-}
-
-.separator {
-	color: var(--text-primary-muted);
-}
-
 .iconMedium {
 	display: inline-flex;
 	align-items: center;

fluxer_app/src/features/messaging/components/popouts/RecentMentionsContent.tsx

@@ -63,7 +63,6 @@ const RECENT_MENTIONS_RETENTION_DESCRIPTOR = msg({
 });
 const readonlyBehaviorOverrides = {
 	disableContextMenu: true,
-	prefersReducedMotion: true,
 };
 const FilterMenuContent = observer(() => {
 	const {i18n} = useLingui();
@@ -189,7 +188,7 @@ const MentionMessageCard = observer(function MentionMessageCard({
 					channel={channel}
 					previewContext={MessagePreviewContext.LIST_POPOUT}
 					behaviorOverrides={readonlyBehaviorOverrides}
-					readonlyPreview
+					suppressMessageActions
 					onHeadingActivate={() => onJump(message.channelId, message.id)}
 					data-flx="messaging.recent-mentions-content.message"
 				/>
@@ -365,21 +364,13 @@ export const RecentMentionsContent = observer(
 				data-flx="messaging.recent-mentions-content.scroller"
 			>
 				{groupedMentions.map((group) => {
-					const groupHeadingId = `inbox-mentions-group-${group.key}`;
 					return (
 						<section
 							key={group.key}
 							className={styles.guildGroup}
-							aria-labelledby={groupHeadingId}
+							aria-label={group.label}
 							data-flx="messaging.recent-mentions-content.guild-group"
 						>
-							<h1
-								id={groupHeadingId}
-								className={styles.guildGroupHeading}
-								data-flx="messaging.recent-mentions-content.guild-group-heading"
-							>
-								{group.label}
-							</h1>
 							{group.mentions.map((message) => {
 								const channel = Channels.getChannel(message.channelId);
 								if (!channel) return null;

fluxer_app/src/features/messaging/components/popouts/SavedMessagesContent.tsx

@@ -44,7 +44,6 @@ const THERE_S_NOTHING_MORE_TO_SEE_HERE_DESCRIPTOR = msg({
 });
 const readonlyBehaviorOverrides = {
 	disableContextMenu: true,
-	prefersReducedMotion: true,
 };
 export const SavedMessagesContent = observer(() => {
 	const {i18n} = useLingui();
@@ -161,7 +160,7 @@ export const SavedMessagesContent = observer(() => {
 								channel={channel}
 								previewContext={MessagePreviewContext.LIST_POPOUT}
 								behaviorOverrides={readonlyBehaviorOverrides}
-								readonlyPreview
+								suppressMessageActions
 								onHeadingActivate={() => handleJumpToMessage(message.channelId, message.id)}
 								data-flx="messaging.saved-messages-content.message"
 							/>