fix(ui): hide the Quick Access bar by default, make it opt-in

On phone-sized screens the floating column overlapped the message
composer and its bottom button landed on top of send, so tapping send
hit the FAB instead. Enough testers reported it to make clear the
default was wrong rather than their aim.

isFabHidden() now treats a missing key as hidden, so only an explicit
'false' shows the bar. The storage key and its meaning are unchanged,
which keeps every browser that already made a choice on that choice:
the new default reaches only browsers that never touched the setting.

The checkbox is inverted to match — "Show Quick Access buttons",
unticked by default — because a negatively phrased toggle that ships
ticked reads as a double negative. Renamed settHideFab -> settShowFab
and the two translation keys with it, en and pl both updated.

With the bar off, applyItemPlacements() already routes every item to
the main menu, verified in a real browser: filter, search, DMs,
contacts and settings are all reachable under the hamburger, the send
button is unobstructed, the choice survives a reload, and a browser
holding 'false' keeps the bar.

Not covered: the direct-message screen has its own FAB container that
does not read this setting. Hiding it there would strand the DM filter
and settings, which have no menu equivalent, so it stays visible for
now and is called out in whatsnew.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MarekWoandClaude Opus 5 committed 2026-08-23 10:13:19 +02:00
1 parent cbbbcbc8b2
commit 37d32f5529
5 files changed
+19 -14

No files matched your search

+10 -7
View File
@@ -6865,7 +6865,10 @@ function readItemPlacements() {
}
function isFabHidden() {
return localStorage.getItem('mc-webui-fab-hidden') === 'true';
// Hidden by default: the bar overlapped the composer's send button on
// phone-sized screens, so it is now opt-in. Only an explicit 'false'
// (the user ticking "show") brings it back.
return localStorage.getItem('mc-webui-fab-hidden') !== 'false';
}
function applyItemPlacements() {
@@ -6887,8 +6890,8 @@ function applyItemPlacements() {
}
function syncPlacementSettingsUI() {
const hideCheckbox = document.getElementById('settHideFab');
if (hideCheckbox) hideCheckbox.checked = isFabHidden();
const showCheckbox = document.getElementById('settShowFab');
if (showCheckbox) showCheckbox.checked = !isFabHidden();
const placements = readItemPlacements();
for (const key of Object.keys(ITEM_PLACEMENT_DEFS)) {
@@ -6910,10 +6913,10 @@ function applyPlacementControlsDisabled() {
}
function initializeItemPlacementSettings() {
const hideCheckbox = document.getElementById('settHideFab');
if (hideCheckbox) {
hideCheckbox.addEventListener('change', () => {
localStorage.setItem('mc-webui-fab-hidden', hideCheckbox.checked ? 'true' : 'false');
const showCheckbox = document.getElementById('settShowFab');
if (showCheckbox) {
showCheckbox.addEventListener('change', () => {
localStorage.setItem('mc-webui-fab-hidden', showCheckbox.checked ? 'false' : 'true');
applyPlacementControlsDisabled();
applyItemPlacements();
});
+3 -3
View File
@@ -821,9 +821,9 @@
<hr>
<h6 class="text-muted mb-3">{{ t('settings.appear.quick_access') }}</h6>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="settHideFab">
<label class="form-check-label" for="settHideFab">{{ t('settings.appear.hide_fab') }}</label>
<small class="d-block text-muted">{{ t('settings.appear.hide_fab_hint') }}</small>
<input class="form-check-input" type="checkbox" id="settShowFab">
<label class="form-check-label" for="settShowFab">{{ t('settings.appear.show_fab') }}</label>
<small class="d-block text-muted">{{ t('settings.appear.show_fab_hint') }}</small>
</div>
<div id="fabAppearanceControls">
<table class="table table-sm align-middle mb-3" id="settItemPlacementTable">
+2 -2
View File
@@ -1117,8 +1117,8 @@
"settings.analyzer.services": "Analyzer Services",
"settings.analyzer.tip": "Tip: star one analyzer to use it without being asked. Clear the star to be prompted on every click. Disabled analyzers stay in the list but are hidden from the chooser.",
"settings.appear.btn_size": "Button size (px)",
"settings.appear.hide_fab": "Hide Quick Access buttons",
"settings.appear.hide_fab_hint": "When hidden, all items appear in the Main Menu.",
"settings.appear.show_fab": "Show Quick Access buttons",
"settings.appear.show_fab_hint": "Off by default. When off, all items appear in the Main Menu.",
"settings.appear.item": "Item",
"settings.appear.language": "Language",
"settings.appear.language_hint": "Applies to this browser and becomes the server default for others. Add your own by dropping a catalog into the translations folder — see <code>docs/translations.md</code>.",
+2 -2
View File
@@ -1191,8 +1191,8 @@
"settings.analyzer.services": "Usługi analizatorów",
"settings.analyzer.tip": "Wskazówka: oznacz gwiazdką jeden analizator, aby używać go bez pytania. Usuń gwiazdkę, aby pytać przy każdym kliknięciu. Wyłączone analizatory zostają na liście, ale są ukryte w oknie wyboru.",
"settings.appear.btn_size": "Rozmiar przycisku (px)",
"settings.appear.hide_fab": "Ukryj przyciski szybkiego dostępu",
"settings.appear.hide_fab_hint": "Gdy ukryte, wszystkie pozycje pojawiają się w menu głównym.",
"settings.appear.show_fab": "Pokaż przyciski szybkiego dostępu",
"settings.appear.show_fab_hint": "Domyślnie wyłączone. Gdy wyłączone, wszystkie pozycje pojawiają się w menu głównym.",
"settings.appear.item": "Pozycja",
"settings.appear.language": "Język",
"settings.appear.language_hint": "Dotyczy tej przeglądarki i staje się domyślnym ustawieniem serwera dla pozostałych. Dodaj własny, wrzucając katalog tłumaczeń do folderu translations — zobacz <code>docs/translations.md</code>.",
+2
View File
@@ -18,6 +18,8 @@ For deep technical notes, see [architecture.md](architecture.md). For the full g
### Fixes
- **The Quick Access buttons no longer sit on top of the send button, because they are now off by default.** On a phone the column of round buttons down the right edge overlapped the message composer, and the bottom one landed squarely on top of send — you could see the button, but tapping it hit the floating button instead. Enough people ran into it to make clear this was the default's fault rather than theirs, so the bar is now opt-in: **Settings → Appearance → Show Quick Access buttons**, unticked to begin with. With it off, everything that lived on the bar — filter, search, direct messages, contacts and settings — appears in the main menu under the ☰ icon instead, so nothing becomes unreachable. If you had already made a choice there, it is kept: only browsers that never touched the setting see the new default. For anyone who likes the bar, it is unchanged once switched on, including the size and spacing sliders and dragging it by its chevron to a spot that suits you. One gap remains: the direct-message screen has its own separate bar, which can be dragged and collapsed but does not yet follow this setting.
- **A message quoting something in angle brackets no longer breaks the row of buttons under it.** A bot answering with `Type 'channel <name>' for a description` was enough: the buttons beneath that message came out mangled, with a stray `title="Quote"` printed next to them, and the first two — reply and quote — stopped working. The cause was in how those buttons were built: the message text was pasted into them without being escaped, so an apostrophe closed the button early and a `<` ended it altogether, spilling the rest of the markup onto the page as text. The text is now escaped properly wherever it is handed to a button, in channel chat and in direct messages alike, so quotes, angle brackets and both kinds of quotation mark are just characters again. The same fix covers sender names containing an apostrophe, whose reply, map and block buttons were quietly dead for the same reason.
---