fix(app): rework composer layout and footer alignment (#1591)

fluxer_app/src/features/lexical/composer/LexicalComposerInput.tsx

@@ -67,6 +67,7 @@ import ChatInputSettings from '@app/features/messaging/state/ChatInputSettings';
 import {isIMEComposing} from '@app/features/messaging/utils/IMECompositionUtils';
 import type {MentionSegment} from '@app/features/messaging/utils/TextareaSegmentManager';
 import markupStyles from '@app/features/theme/styles/Markup.module.css';
+import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import MobileLayout from '@app/features/ui/state/MobileLayout';
 import {flxElementClassName} from '@app/lib/react';
 import type {InitialConfigType} from '@lexical/react/LexicalComposer';
@@ -127,6 +128,8 @@ export interface LexicalComposerInputProps {
 	guildId?: string;
 	selectionToolbar?: boolean;
 	submitOnEnter?: boolean;
+	focusRingTarget?: React.RefObject<Element | null>;
+	focusRingEnabled?: boolean;
 	className?: string;
 	id?: string;
 	ariaLabel?: string;
@@ -207,6 +210,8 @@ const ComposerInner = ({
 	emojiShortcodeResolver,
 	selectionToolbar = true,
 	submitOnEnter = true,
+	focusRingTarget,
+	focusRingEnabled = false,
 	className,
 	id,
 	ariaLabel,
@@ -711,33 +716,35 @@ const ComposerInner = ({
 		<>
 			<PlainTextPlugin
 				contentEditable={
-					<ContentEditable
-						className={clsx(styles.editable, className)}
-						id={id}
-						spellCheck
-						onKeyDown={handleEditableKeyDown}
-						onPointerDown={handleEditablePointerDown}
-						onContextMenu={handleEditableContextMenu}
-						onFocus={onFocus}
-						onBlur={onBlur}
-						aria-label={ariaLabelledBy == null ? (ariaLabel == null ? placeholder : ariaLabel) : undefined}
-						aria-labelledby={ariaLabelledBy}
-						aria-describedby={ariaDescribedBy}
-						aria-errormessage={ariaErrorMessage}
-						aria-invalid={ariaInvalid}
-						aria-disabled={disabled}
-						aria-multiline="true"
-						aria-autocomplete={autocompleteEnabled ? 'list' : 'none'}
-						aria-haspopup={autocompleteEnabled ? 'listbox' : undefined}
-						aria-placeholder={placeholder}
-						placeholder={
-							<flx-lexical-composer-input-placeholder className={flxElementClassName(styles.placeholder)}>
-								{placeholder}
-							</flx-lexical-composer-input-placeholder>
-						}
-						data-channel-textarea
-						data-composer-render-mode={plainText ? 'plain' : 'rich'}
-					/>
+					<FocusRing offset={-2} ringTarget={focusRingTarget} enabled={focusRingEnabled}>
+						<ContentEditable
+							className={clsx(styles.editable, className)}
+							id={id}
+							spellCheck
+							onKeyDown={handleEditableKeyDown}
+							onPointerDown={handleEditablePointerDown}
+							onContextMenu={handleEditableContextMenu}
+							onFocus={onFocus}
+							onBlur={onBlur}
+							aria-label={ariaLabelledBy == null ? (ariaLabel == null ? placeholder : ariaLabel) : undefined}
+							aria-labelledby={ariaLabelledBy}
+							aria-describedby={ariaDescribedBy}
+							aria-errormessage={ariaErrorMessage}
+							aria-invalid={ariaInvalid}
+							aria-disabled={disabled}
+							aria-multiline="true"
+							aria-autocomplete={autocompleteEnabled ? 'list' : 'none'}
+							aria-haspopup={autocompleteEnabled ? 'listbox' : undefined}
+							aria-placeholder={placeholder}
+							placeholder={
+								<flx-lexical-composer-input-placeholder className={flxElementClassName(styles.placeholder)}>
+									{placeholder}
+								</flx-lexical-composer-input-placeholder>
+							}
+							data-channel-textarea
+							data-composer-render-mode={plainText ? 'plain' : 'rich'}
+						/>
+					</FocusRing>
 				}
 				ErrorBoundary={LexicalErrorBoundary}
 			/>

fluxer_app/src/features/lexical/composer/LexicalMessageComposer.module.css

@@ -40,7 +40,7 @@
 	left: var(--composer-placeholder-left, 0);
 	pointer-events: none;
 	user-select: none;
-	color: var(--text-primary-muted);
+	color: var(--text-tertiary-secondary);
 	font-size: var(--composer-font-size, var(--textarea-font-size, 1rem));
 	line-height: var(--composer-line-height, var(--textarea-line-height, 1.375rem));
 	overflow: hidden;