Files
buzz/mobile/lib/features/channels/compose_bar/formatting_toolbar.dart
klopez4212 857e63c4dd Polish mobile composer and messaging UI (#3918)
## Summary

- Refine the mobile composer with compact and expanded states, shared
footer fades, haptics, reliable keyboard dismissal, and full-width
camera and photo surfaces.
- Standardize popovers, filters, and section menus with consistent type,
strokes, radii, spacing, icons, and destructive styling.
- Align message presentation with desktop through consistent system
rows, typing and loading feedback, emoji placement, and predictable
photo viewing.

## Validation

- `just mobile-check`
- `just mobile-test` — 1,037 passed, 1 skipped
- Tested on Pixel 10 and a connected iPhone

## Snapshots

<table>
  <tr>
    <td align="center">Compact composer</td>
    <td align="center">Attachment menu</td>
    <td align="center">Recent photos</td>
  </tr>
  <tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--01-compact-composer.png"
width="260" /></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--02-attachment-menu.png"
width="260" /></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--03-photo-surface.png"
width="260" /></td>
  </tr>
</table>

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
2026-08-03 07:30:23 -07:00

91 lines
2.2 KiB
Dart

part of '../compose_bar.dart';
class _FormattingToolbar extends StatelessWidget {
final void Function(String prefix, [String? suffix]) onFormat;
const _FormattingToolbar({required this.onFormat});
@override
Widget build(BuildContext context) {
return Row(
key: const ValueKey('formatting-actions'),
mainAxisSize: MainAxisSize.min,
children: [
_FormatButton(
icon: LucideIcons.bold,
tooltip: 'Bold',
onTap: () => onFormat('**'),
),
_FormatButton(
icon: LucideIcons.italic,
tooltip: 'Italic',
onTap: () => onFormat('_'),
),
_FormatButton(
icon: LucideIcons.strikethrough,
tooltip: 'Strikethrough',
onTap: () => onFormat('~~'),
),
_FormatButton(
icon: LucideIcons.code,
tooltip: 'Code',
onTap: () => onFormat('`'),
),
_FormatButton(
icon: LucideIcons.squareCode,
tooltip: 'Code block',
onTap: () => onFormat('```\n', '\n```'),
),
],
);
}
}
class _FormatButton extends StatelessWidget {
final IconData icon;
final String tooltip;
final VoidCallback onTap;
const _FormatButton({
required this.icon,
required this.tooltip,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return Tooltip(
message: tooltip,
child: InkWell(
borderRadius: BorderRadius.circular(Radii.sm),
onTap: () => _runComposerAction(onTap),
child: Padding(
padding: const EdgeInsets.all(Grid.xxs),
child: Icon(icon, size: 18, color: context.colors.primary),
),
),
);
}
}
class _ComposeAction extends StatelessWidget {
final IconData icon;
final VoidCallback onTap;
const _ComposeAction({required this.icon, required this.onTap});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 36,
height: 36,
child: IconButton(
onPressed: () => _runComposerAction(onTap),
icon: Icon(icon, size: 20, color: context.colors.onSurfaceVariant),
padding: EdgeInsets.zero,
visualDensity: VisualDensity.compact,
),
);
}
}