tweak: add a label to hotkeys that behave differently in outline mode

Author: ycnmhd

src/view/components/container/controls-bar/modals/hotkeys/components/command.svelte

@@ -3,15 +3,27 @@
     import { StatefulViewCommand } from 'src/view/actions/keyboard-shortcuts/helpers/commands/default-view-hotkeys';
     import {
         DynamicLabelState,
-        getDynamicLabel
+        getDynamicLabel,
+        HotkeysThatBehaveDifferentlyInOutlineMode
     } from 'src/view/components/container/controls-bar/modals/hotkeys/components/helpers/get-dynamic-label';
+    import { Info } from 'lucide-svelte';
 
     export let commandHotkeys: StatefulViewCommand;
-    export let labelState: DynamicLabelState
+    export let labelState: DynamicLabelState;
 </script>
 
 <div class="command">
-    <span class="label">{getDynamicLabel(labelState,commandHotkeys.name)}</span>
+    <span class="label"
+        >{getDynamicLabel(labelState, commandHotkeys.name)}
+
+        {#if HotkeysThatBehaveDifferentlyInOutlineMode.has(commandHotkeys.name)}
+            <span
+                class="info-icon"
+                aria-label="Behaves differently in outline mode"
+                ><Info class="svg-icon" /></span
+            >
+        {/if}
+    </span>
     <div class="hotkeys">
         {#each commandHotkeys.hotkeys as hotkey, i}
             <Hotkey
@@ -32,7 +44,7 @@
         border-radius: 4px;
         gap: 8px;
         background-color: var(--color-base-30);
-        flex-wrap:wrap;
+        flex-wrap: wrap;
     }
 
     .hotkeys {
@@ -45,6 +57,19 @@
     .label {
         font-size: 14px;
         color: var(--text-normal);
-        display: block;
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .info-icon {
+        color: #4973A1FF;
+        margin-bottom: -4px;
+
+        & svg {
+            width: 12px;
+            height: 12px;
+        }
     }
 </style>

src/view/components/container/controls-bar/modals/hotkeys/components/helpers/get-dynamic-label.ts

@@ -2,6 +2,9 @@ import { CommandName } from 'src/lang/hotkey-groups';
 import { hotkeysLang } from 'src/lang/hotkeys-lang';
 import { lang } from 'src/lang/lang';
 
+export const HotkeysThatBehaveDifferentlyInOutlineMode: Set<CommandName> =
+    new Set(['go_down', 'go_up', 'go_left', 'go_right']);
+
 export type DynamicLabelState = { outlineMode: boolean };
 
 export const getDynamicLabel = (