fix reply bar blocking bottom of chat, redesign

This commit is contained in:
Tommy Chow 2026-01-04 21:36:00 -05:00
parent 4a9678bb15
commit 08913c1e35
2 changed files with 57 additions and 28 deletions

View file

@ -42,6 +42,9 @@ abstract class ChatStoreBase with Store {
/// Height of the autocomplete bar (SizedBox + Divider).
static const _autocompleteHeight = 51.0;
/// Height of the reply bar (Container + Divider).
static const _replyBarHeight = 41.0;
/// Checks if IRC data contains a command that should bypass the chat delay.
/// Returns true if any message in the data contains a bypass command.
bool _shouldBypassDelay(String data) {
@ -241,6 +244,12 @@ abstract class ChatStoreBase with Store {
double get bottomBarHeight {
var height = _baseBottomBarHeight;
// Add reply bar height when replying to a message.
if (replyingToMessage != null) {
height += _replyBarHeight;
}
// Add autocomplete bar height when showing matches.
if (settings.autocomplete &&
((_showEmoteAutocomplete && matchingEmotes.isNotEmpty) ||
(_showMentionAutocomplete && matchingChatters.isNotEmpty))) {

View file

@ -73,37 +73,57 @@ class ChatBottomBar extends StatelessWidget {
children: [
if (chatStore.replyingToMessage != null) ...[
const Divider(),
ListTile(
contentPadding: const EdgeInsets.only(left: 16),
leading: const Icon(Icons.reply),
title: Tooltip(
message: chatStore.replyingToMessage!.message,
preferBelow: false,
child: Text.rich(
TextSpan(
children: chatStore.replyingToMessage!.generateSpan(
context,
assetsStore: chatStore.assetsStore,
emoteScale: chatStore.settings.emoteScale,
badgeScale: chatStore.settings.badgeScale,
launchExternal: chatStore.settings.launchUrlExternal,
timestamp: chatStore.settings.timestampType,
currentChannelId: chatStore.channelId,
TextFieldTapRegion(
child: Container(
height: 40,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Theme.of(context).colorScheme.secondary,
width: 4,
),
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: context.defaultTextStyle.copyWith(
fontSize: chatStore.settings.fontSize,
),
),
),
trailing: IconButton(
tooltip: 'Cancel reply',
onPressed: () {
chatStore.replyingToMessage = null;
},
icon: const Icon(Icons.close),
// Left: 8px so text aligns at 12px (4px border + 8px padding)
// Right: 4px to give close button some breathing room
padding: const EdgeInsets.only(left: 8, right: 4),
alignment: Alignment.centerLeft,
child: Row(
children: [
Expanded(
child: Tooltip(
message: chatStore.replyingToMessage!.message ?? '',
preferBelow: false,
child: Text.rich(
TextSpan(
children:
chatStore.replyingToMessage!.generateSpan(
context,
assetsStore: chatStore.assetsStore,
emoteScale: chatStore.settings.emoteScale,
badgeScale: chatStore.settings.badgeScale,
launchExternal:
chatStore.settings.launchUrlExternal,
timestamp: chatStore.settings.timestampType,
currentChannelId: chatStore.channelId,
),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: context.defaultTextStyle.copyWith(
fontSize: chatStore.settings.fontSize,
),
),
),
),
IconButton(
tooltip: 'Cancel reply',
visualDensity: VisualDensity.compact,
onPressed: () => chatStore.replyingToMessage = null,
icon: const Icon(Icons.close, size: 20),
),
],
),
),
),
],