Feature: add monitor-switch buttons to remote toolbars

Add buttons to cycle through the remote displays from the toolbars:

- A main-toolbar button and a minimized-handle button, both using a shared SVG icon with the current monitor number overlaid.
- Two opt-in settings under Settings/Other. The minimized-toolbar option is nested under the main-toolbar option.
- The minimized button only appears once the toolbar is collapsed.
- Cycling does not move the remote cursor, matching the existing in-toolbar monitor buttons.

Signed-off-by: StealUrKill <35749471+StealUrKill@users.noreply.github.com>
This commit is contained in:
StealUrKill 2026-06-19 09:17:57 -05:00
commit 9cf6abe443
4 changed files with 212 additions and 0 deletions

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="#000000" fill-rule="evenodd">
<rect x="4" y="6" width="24" height="16" rx="3"/>
<rect x="14.5" y="22" width="3" height="2"/>
<rect x="9.5" y="24" width="13" height="2.5" rx="1.25"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 303 B

View file

@ -174,6 +174,8 @@ const String kOptionShowVirtualMouse = "show-virtual-mouse";
const String kOptionVirtualMouseScale = "virtual-mouse-scale";
const String kOptionShowVirtualJoystick = "show-virtual-joystick";
const String kOptionAllowAskForNoteAtEndOfConnection = "allow-ask-for-note";
const String kOptionAllowMonitorSwitchMainToolbar = "allow-monitor-switch-main-toolbar";
const String kOptionAllowMonitorSwitchMinToolbar = "allow-monitor-switch-min-toolbar";
const String kOptionEnableShowTerminalExtraKeys = "enable-show-terminal-extra-keys";
// network options

View file

@ -407,6 +407,7 @@ class _GeneralState extends State<_General> {
final RxBool serviceStop =
isWeb ? RxBool(false) : Get.find<RxBool>(tag: 'stop-service');
RxBool serviceBtnEnabled = true.obs;
final GlobalKey _minToolbarOptionKey = GlobalKey();
@override
Widget build(BuildContext context) {
@ -605,6 +606,47 @@ class _GeneralState extends State<_General> {
},
));
}
children.add(_OptionCheckBox(
context,
'Show monitor switch button on the main toolbar',
kOptionAllowMonitorSwitchMainToolbar,
isServer: false,
update: (enabled) async {
if (!enabled) {
await mainSetLocalBoolOption(
kOptionAllowMonitorSwitchMinToolbar, false);
}
if (mounted) setState(() {});
reloadAllWindows();
if (enabled) {
WidgetsBinding.instance.addPostFrameCallback((_) {
final ctx = _minToolbarOptionKey.currentContext;
if (ctx != null) {
Scrollable.ensureVisible(
ctx,
alignment: 0.5,
duration: const Duration(milliseconds: 250),
curve: Curves.easeInOut,
);
}
});
}
},
));
if (mainGetLocalBoolOptionSync(kOptionAllowMonitorSwitchMainToolbar)) {
children.add(KeyedSubtree(
key: _minToolbarOptionKey,
child: _OptionCheckBox(
context,
'Show on the minimized toolbar',
kOptionAllowMonitorSwitchMinToolbar,
isServer: false,
update: (_) {
reloadAllWindows();
},
).marginOnly(left: _kCheckBoxLeftMargin * 3),
));
}
return _Card(title: 'Other', children: children);
}

View file

@ -779,6 +779,7 @@ class _RemoteToolbarState extends State<RemoteToolbar> {
borderRadius: borderRadius,
child: _DraggableShowHide(
id: widget.id,
ffi: widget.ffi,
sessionId: widget.ffi.sessionId,
dragging: _dragging,
fraction: _fraction,
@ -805,6 +806,17 @@ class _RemoteToolbarState extends State<RemoteToolbar> {
BuildContext context, _ToolbarEdge edge, bool isHorizontal) {
final List<Widget> toolbarItems = [];
toolbarItems.add(_PinMenu(state: widget.state));
toolbarItems.add(Obx(() {
final privacyModeState = PrivacyModeState.find(widget.id);
if ((privacyModeState.isEmpty ||
allowDisplaySwitchInPrivacyMode(pi, privacyModeState.value)) &&
pi.displaysCount.value > 1 &&
mainGetLocalBoolOptionSync(kOptionAllowMonitorSwitchMainToolbar)) {
return _MainMonitorSwitchButton(id: widget.id, ffi: widget.ffi);
} else {
return const Offstage();
}
}));
if (!isWebDesktop) {
toolbarItems.add(_MobileActionMenu(ffi: widget.ffi));
}
@ -965,6 +977,80 @@ class _MobileActionMenu extends StatelessWidget {
}
}
class _MonitorCycle {
final String id;
final FFI ffi;
const _MonitorCycle(this.id, this.ffi);
PeerInfo get _pi => ffi.ffiModel.pi;
int get total => _pi.displays.length;
int get _current => CurrentDisplayState.find(id).value;
bool get _inRange => _current >= 0 && _current < total;
String get label => _inRange ? '${_current + 1}' : '*';
String get tooltip => '${translate('Switch display')} ($label/$total)';
void next() {
final t = total;
if (t < 2) return;
final from = _inRange ? _current : -1;
openMonitorInTheSameTab((from + 1) % t, ffi, _pi, updateCursorPos: false);
}
}
class _MainMonitorSwitchButton extends StatelessWidget {
final String id;
final FFI ffi;
const _MainMonitorSwitchButton({
Key? key,
required this.id,
required this.ffi,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final cycle = _MonitorCycle(id, ffi);
return Obx(() {
if (cycle.total < 2) return const Offstage();
final label = cycle.label;
return _IconMenuButton(
tooltip: cycle.tooltip,
color: _ToolbarTheme.blueColor,
hoverColor: _ToolbarTheme.hoverBlueColor,
onPressed: cycle.next,
icon: SizedBox(
width: _ToolbarTheme.buttonSize,
height: _ToolbarTheme.buttonSize,
child: Stack(
alignment: const Alignment(0, -0.125),
children: [
SvgPicture.asset(
'assets/display_switcher.svg',
colorFilter:
const ColorFilter.mode(Colors.white, BlendMode.srcIn),
width: _ToolbarTheme.buttonSize,
height: _ToolbarTheme.buttonSize,
),
Text(
label,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.black,
fontSize: 11,
height: 1,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
});
}
}
class _MonitorMenu extends StatelessWidget {
final String id;
final FFI ffi;
@ -2971,6 +3057,7 @@ class RdoMenuButton<T> extends StatelessWidget {
class _DraggableShowHide extends StatefulWidget {
final String id;
final FFI ffi;
final SessionID sessionId;
final RxDouble fraction;
final Rx<_ToolbarEdge> edge;
@ -2994,6 +3081,7 @@ class _DraggableShowHide extends StatefulWidget {
const _DraggableShowHide({
Key? key,
required this.id,
required this.ffi,
required this.sessionId,
required this.fraction,
required this.edge,
@ -3250,6 +3338,9 @@ class _DraggableShowHideState extends State<_DraggableShowHide> {
mainAxisSize: MainAxisSize.min,
children: [
_buildDraggable(context),
Obx(() => collapse.isTrue
? _MinimizedMonitorSwitchButton(id: widget.id, ffi: widget.ffi)
: const Offstage()),
Obx(() => buttonWrapper(
() {
widget.setFullscreen(!isFullscreen.value);
@ -3410,3 +3501,73 @@ class EdgeThicknessControl extends StatelessWidget {
return slider;
}
}
class _MinimizedMonitorSwitchButton extends StatelessWidget {
final String id;
final FFI ffi;
const _MinimizedMonitorSwitchButton({
Key? key,
required this.id,
required this.ffi,
}) : super(key: key);
@override
Widget build(BuildContext context) {
const double iconSize = 20;
final cycle = _MonitorCycle(id, ffi);
return Obx(() {
final label = cycle.label;
if (!mainGetLocalBoolOptionSync(kOptionAllowMonitorSwitchMainToolbar) ||
!mainGetLocalBoolOptionSync(kOptionAllowMonitorSwitchMinToolbar)) {
return const Offstage();
}
if (cycle.total < 2) return const Offstage();
final privacyModeState = PrivacyModeState.find(id);
if (privacyModeState.isNotEmpty &&
!allowDisplaySwitchInPrivacyMode(
ffi.ffiModel.pi, privacyModeState.value)) {
return const Offstage();
}
return Tooltip(
message: cycle.tooltip,
child: TextButton(
onPressed: cycle.next,
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(const Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
backgroundColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.hovered)) {
return _ToolbarTheme.blueColor.withOpacity(0.15);
}
return null;
}),
),
child: Stack(
alignment: const Alignment(0, -0.125),
children: [
SvgPicture.asset(
'assets/display_switcher.svg',
colorFilter:
ColorFilter.mode(_ToolbarTheme.blueColor, BlendMode.srcIn),
width: iconSize,
height: iconSize,
),
Text(
label,
style: const TextStyle(
color: Colors.white,
fontSize: 9,
height: 1,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
});
}
}