From 27f459e6bd322e90dd16113a56f9addb5e1d4904 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Thu, 13 Aug 2026 21:44:16 +0200
Subject: [PATCH] fix(app): restore composer menus and present action styling
 (#1585)

---
 .../components/ChannelMessages.module.css     | 21 ------------
 .../channel/components/ChannelMessages.tsx    | 32 +++++++++----------
 .../src/lib/overlay/OverlayContextMenu.tsx    | 19 ++++++++++-
 3 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/fluxer_app/src/features/channel/components/ChannelMessages.module.css b/fluxer_app/src/features/channel/components/ChannelMessages.module.css
index d58edf780..e3b97d0d9 100644
--- a/fluxer_app/src/features/channel/components/ChannelMessages.module.css
+++ b/fluxer_app/src/features/channel/components/ChannelMessages.module.css
@@ -183,30 +183,9 @@
 }
 
 .newMessagesBarAction {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.375rem;
-	min-height: 2rem;
-	padding: 0 0.75rem;
-	border: 0;
 	border-radius: var(--radius-full);
-	background: var(--background-modifier-hover);
-	color: var(--text-primary);
-	font-size: 0.875rem;
-	font-weight: 600;
 	flex: 0 0 auto;
 	white-space: nowrap;
-	cursor: pointer;
-}
-
-.newMessagesBarAction:hover:not(:disabled) {
-	background: var(--background-modifier-active);
-}
-
-.newMessagesBarAction:disabled {
-	cursor: wait;
-	opacity: 0.7;
 }
 
 @media (max-width: 520px) {
diff --git a/fluxer_app/src/features/channel/components/ChannelMessages.tsx b/fluxer_app/src/features/channel/components/ChannelMessages.tsx
index ed0be3b75..37c61f02a 100644
--- a/fluxer_app/src/features/channel/components/ChannelMessages.tsx
+++ b/fluxer_app/src/features/channel/components/ChannelMessages.tsx
@@ -35,8 +35,8 @@ import * as ReadStateCommands from '@app/features/read_state/commands/ReadStateC
 import ReadStates from '@app/features/read_state/state/ReadStates';
 import {shouldAutoAck} from '@app/features/read_state/utils/AutoAckPredicate';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
+import {Button} from '@app/features/ui/button/Button';
 import {Scroller} from '@app/features/ui/components/Scroller';
-import {Spinner} from '@app/features/ui/components/Spinner';
 import KeyboardMode from '@app/features/ui/state/KeyboardMode';
 import MediaViewer from '@app/features/ui/state/MediaViewer';
 import Modal from '@app/features/ui/state/Modal';
@@ -703,19 +703,18 @@ const JumpToPresentBar = observer(function JumpToPresentBar({
 			<span className={styles.newMessagesBarText} data-flx="channel.messages.jump-to-present-bar.new-messages-bar-text">
 				{i18n._(YOU_RE_VIEWING_OLDER_MESSAGES_DESCRIPTOR)}
 			</span>
-			<button
-				type="button"
+			<Button
+				variant="primary"
+				compact
+				fitContent
 				className={styles.newMessagesBarAction}
 				onClick={onJumpToPresent}
+				submitting={jumpIsActiveNow}
 				disabled={jumpIsActiveNow}
 				data-flx="channel.messages.jump-to-present-bar.new-messages-bar-action"
 			>
-				{jumpIsActiveNow ? (
-					<Spinner size="small" data-flx="channel.messages.jump-to-present-bar.spinner" />
-				) : (
-					i18n._(JUMP_TO_PRESENT_DESCRIPTOR)
-				)}
-			</button>
+				{i18n._(JUMP_TO_PRESENT_DESCRIPTOR)}
+			</Button>
 		</div>
 	);
 });
@@ -731,19 +730,18 @@ function LoadErrorBar({loading, onRetry}: {loading: boolean; onRetry: () => void
 			<span className={styles.newMessagesBarText} data-flx="channel.messages.load-error-bar.new-messages-bar-text">
 				{i18n._(MESSAGES_FAILED_TO_LOAD_DESCRIPTOR)}
 			</span>
-			<button
-				type="button"
+			<Button
+				variant="primary"
+				compact
+				fitContent
 				className={styles.newMessagesBarAction}
 				disabled={loading}
+				submitting={loading}
 				onClick={onRetry}
 				data-flx="channel.messages.load-error-bar.new-messages-bar-action"
 			>
-				{loading ? (
-					<Spinner size="small" data-flx="channel.messages.load-error-bar.spinner" />
-				) : (
-					i18n._(TRY_AGAIN_DESCRIPTOR)
-				)}
-			</button>
+				{i18n._(TRY_AGAIN_DESCRIPTOR)}
+			</Button>
 		</div>
 	);
 }
diff --git a/fluxer_app/src/lib/overlay/OverlayContextMenu.tsx b/fluxer_app/src/lib/overlay/OverlayContextMenu.tsx
index 4652ea85b..fb585fd6d 100644
--- a/fluxer_app/src/lib/overlay/OverlayContextMenu.tsx
+++ b/fluxer_app/src/lib/overlay/OverlayContextMenu.tsx
@@ -60,6 +60,23 @@ function findUserData(element: HTMLElement): {userId?: string; guildId?: string;
 	return {};
 }
 
+function isEditableContextMenuTarget(target: HTMLElement): boolean {
+	let current: HTMLElement | null = target;
+	while (current != null) {
+		const contentEditable = current.getAttribute('contenteditable')?.toLowerCase();
+		if (
+			contentEditable === '' ||
+			contentEditable === 'true' ||
+			contentEditable === 'plaintext-only' ||
+			current.isContentEditable
+		) {
+			return true;
+		}
+		current = current.parentElement;
+	}
+	return false;
+}
+
 export function handleContextMenu(e: MouseEvent): void {
 	const target = e.target as HTMLElement;
 	const {userId, guildId, channelId} = findUserData(target);
@@ -139,7 +156,7 @@ export function handleContextMenu(e: MouseEvent): void {
 		}
 		node = node.parentElement;
 	}
-	if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+	if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || isEditableContextMenuTarget(target)) {
 		return;
 	}
 	if (selectedText) {