Add keyboard shortcut info banner to the boosting preferences section (#36506)

app/javascript/mastodon/components/hotkeys/hotkeys.stories.tsx

@@ -139,24 +139,24 @@ export const Default = {
             Last pressed hotkey: <output>{matchedHotkey ?? 'None'}</output>
           </p>
           <p>
-            Click within the dashed border and press the &quot;<kbd>n</kbd>
-            &quot; or &quot;<kbd>/</kbd>&quot; key. Press &quot;
-            <kbd>Backspace</kbd>&quot; to clear the displayed hotkey.
+            Click within the dashed border and press the <kbd>n</kbd>
+            or <kbd>/</kbd> key. Press
+            <kbd>Backspace</kbd> to clear the displayed hotkey.
           </p>
           <p>
-            Try typing a sequence, like &quot;<kbd>g</kbd>&quot; shortly
-            followed by &quot;<kbd>h</kbd>&quot;, &quot;<kbd>n</kbd>&quot;, or
-            &quot;<kbd>f</kbd>&quot;
+            Try typing a sequence, like <kbd>g</kbd> shortly followed by{' '}
+            <kbd>h</kbd>, <kbd>n</kbd>, or
+            <kbd>f</kbd>
           </p>
           <p>
             Note that this playground doesn&apos;t support all hotkeys we use in
             the app.
           </p>
           <p>
-            When a <button>Button</button> is focused, &quot;
+            When a <button>Button</button> is focused,
             <kbd>Enter</kbd>
-            &quot; should not trigger &quot;open&quot;, but &quot;<kbd>o</kbd>
-            &quot; should.
+            should not trigger open, but <kbd>o</kbd>
+            should.
           </p>
           <p>
             When an input element is focused, hotkeys should not interfere with

app/javascript/styles/mastodon-light/diff.scss

@@ -524,3 +524,7 @@ a.sparkline {
     opacity: 0.25;
   }
 }
+
+kbd {
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
+}

app/javascript/styles/mastodon/admin.scss

@@ -488,6 +488,14 @@ body,
   }
 }
 
+kbd {
+  font-family: Courier, monospace;
+  background-color: color.change($ui-secondary-color, $alpha: 0.1);
+  padding: 4px;
+  padding-bottom: 2px;
+  border-radius: 5px;
+}
+
 .filters {
   display: flex;
   flex-wrap: wrap;

app/javascript/styles/mastodon/forms.scss

@@ -755,6 +755,12 @@ code {
     display: none;
   }
 
+  &.hidden-on-touch-devices {
+    @media screen and (pointer: coarse) {
+      display: none;
+    }
+  }
+
   a {
     display: inline-block;
     color: $darker-text-color;

app/views/settings/preferences/appearance/show.html.haml

@@ -72,6 +72,7 @@
 
     .fields-group
       = ff.input :'web.reblog_modal', wrapper: :with_label, hint: I18n.t('simple_form.hints.defaults.setting_boost_modal'), label: I18n.t('simple_form.labels.defaults.setting_boost_modal')
+    .flash-message.hidden-on-touch-devices= t('appearance.boosting_preferences_info_html', icon: material_symbol('repeat'))
 
     %h4= t 'appearance.sensitive_content'
 

config/locales/en.yml

@@ -1191,6 +1191,7 @@ en:
     advanced_settings: Advanced settings
     animations_and_accessibility: Animations and accessibility
     boosting_preferences: Boosting preferences
+    boosting_preferences_info_html: "<strong>Tip:</strong> Regardless of settings, <kbd>Shift</kbd> + <kbd>Click</kbd> on the %{icon} Boost icon will immediately boost."
     discovery: Discovery
     localization:
       body: Mastodon is translated by volunteers.