keyboard navigation on clipboard history

Modals/ClipboardHistoryModal.qml

@@ -8,7 +8,6 @@ import qs.Services
 import qs.Widgets
 
 DankModal {
-
     id: clipboardHistoryModal
 
     property int totalCount: 0
@@ -16,122 +15,110 @@ DankModal {
     property bool showClearConfirmation: false
     property var clipboardEntries: []
     property string searchText: ""
+    property int selectedIndex: 0
+    property bool keyboardNavigationActive: false
+    property bool showKeyboardHints: false
+    property Component clipboardContent
 
     function updateFilteredModel() {
-    filteredClipboardModel.clear()
+        filteredClipboardModel.clear();
         for (var i = 0; i < clipboardModel.count; i++) {
-      const entry = clipboardModel.get(i).entry
+            const entry = clipboardModel.get(i).entry;
             if (searchText.trim().length === 0) {
                 filteredClipboardModel.append({
                     "entry": entry
-                                      })
+                });
             } else {
-        const content = getEntryPreview(entry).toLowerCase()
+                const content = getEntryPreview(entry).toLowerCase();
                 if (content.includes(searchText.toLowerCase()))
                     filteredClipboardModel.append({
                     "entry": entry
-                                        })
+                });
+
             }
         }
-    clipboardHistoryModal.totalCount = filteredClipboardModel.count
+        clipboardHistoryModal.totalCount = filteredClipboardModel.count;
     }
 
     function toggle() {
         if (visible)
-      hide()
+            hide();
         else
-      show()
+            show();
     }
 
     function show() {
-    clipboardHistoryModal.visible = true
+        clipboardHistoryModal.visible = true;
-    initializeThumbnailSystem()
+        initializeThumbnailSystem();
-    refreshClipboard()
+        refreshClipboard();
-    
+        keyboardController.reset();
-    Qt.callLater(function() {
-      if (contentLoader.item) {
-        const content = contentLoader.item
-        if (content.children && content.children.length > 1) {
-          const searchField = content.children[1]
-          if (searchField && searchField.forceActiveFocus) {
-            searchField.text = ""
-            searchField.forceActiveFocus()
-          }
-        }
-      }
-    })
     }
 
     function hide() {
-    clipboardHistoryModal.visible = false
+        clipboardHistoryModal.visible = false;
-    clipboardHistoryModal.searchText = ""
+        clipboardHistoryModal.searchText = "";
-    cleanupTempFiles()
+        keyboardController.reset();
+        cleanupTempFiles();
     }
 
-  function initializeThumbnailSystem() {// No initialization needed - using direct image display
+    function initializeThumbnailSystem() {
     }
 
     function cleanupTempFiles() {
-    Quickshell.execDetached(["sh", "-c", "rm -f /tmp/clipboard_*.png"])
+        Quickshell.execDetached(["sh", "-c", "rm -f /tmp/clipboard_*.png"]);
     }
 
-  function generateThumbnails() {// No thumbnail generation needed - using direct image display
+    function generateThumbnails() {
     }
 
     function refreshClipboard() {
-    clipboardProcess.running = true
+        clipboardProcess.running = true;
     }
 
     function copyEntry(entry) {
-    const entryId = entry.split('\t')[0]
+        const entryId = entry.split('\t')[0];
-    Quickshell.execDetached(
+        Quickshell.execDetached(["sh", "-c", `cliphist decode ${entryId} | wl-copy`]);
-          ["sh", "-c", `cliphist decode ${entryId} | wl-copy`])
+        ToastService.showInfo("Copied to clipboard");
-
+        clipboardHistoryModal.hide();
-    ToastService.showInfo("Copied to clipboard")
-    clipboardHistoryModal.hide()
     }
 
     function deleteEntry(entry) {
-
         deleteProcess.command = ["sh", "-c", `echo '${entry.replace(
-                               /'/g, "'\\''")}' | cliphist delete`]
+                               /'/g, "'\\''")}' | cliphist delete`];
-    deleteProcess.running = true
+        deleteProcess.running = true;
     }
 
     function clearAll() {
-    clearProcess.running = true
+        clearProcess.running = true;
     }
 
     function getEntryPreview(entry) {
-    let content = entry.replace(/^\s*\d+\s+/, "")
+        let content = entry.replace(/^\s*\d+\s+/, "");
-    if (content.includes("image/") || content.includes("binary data")
+        if (content.includes("image/") || content.includes("binary data") || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(content)) {
-        || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(content)) {
+            const dimensionMatch = content.match(/(\d+)x(\d+)/);
-      const dimensionMatch = content.match(/(\d+)x(\d+)/)
             if (dimensionMatch)
-        return `Image ${dimensionMatch[1]}×${dimensionMatch[2]}`
+                return `Image ${dimensionMatch[1]}×${dimensionMatch[2]}`;
 
-      const typeMatch = content.match(/\b(png|jpg|jpeg|gif|bmp|webp)\b/i)
+            const typeMatch = content.match(/\b(png|jpg|jpeg|gif|bmp|webp)\b/i);
             if (typeMatch)
-        return `Image (${typeMatch[1].toUpperCase()})`
+                return `Image (${typeMatch[1].toUpperCase()})`;
 
-      return "Image"
+            return "Image";
         }
         if (content.length > 100)
-      return content.substring(0, 100) + "..."
+            return content.substring(0, 100) + "...";
 
-    return content
+        return content;
     }
 
     function getEntryType(entry) {
-    if (entry.includes("image/") || entry.includes("binary data")
+        if (entry.includes("image/") || entry.includes("binary data") || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(entry) || /\b(png|jpg|jpeg|gif|bmp|webp)\b/i.test(entry))
-        || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(entry)
+            return "image";
-        || /\b(png|jpg|jpeg|gif|bmp|webp)\b/i.test(entry))
-      return "image"
 
         if (entry.length > 200)
-      return "long_text"
+            return "long_text";
 
-    return "text"
+        return "text";
     }
 
     visible: false
@@ -144,7 +131,125 @@ DankModal {
     borderWidth: 1
     enableShadow: true
     onBackgroundClicked: {
-    hide()
+        hide();
+    }
+    modalFocusScope.Keys.onPressed: function(event) {
+        keyboardController.handleKey(event);
+    }
+    content: clipboardContent
+
+    QtObject {
+        id: keyboardController
+
+        function reset() {
+            selectedIndex = 0;
+            keyboardNavigationActive = false;
+            showKeyboardHints = false;
+            if (typeof clipboardListView !== 'undefined' && clipboardListView)
+                clipboardListView.keyboardActive = false;
+
+        }
+
+        function selectNext() {
+            if (filteredClipboardModel.count === 0)
+                return ;
+
+            keyboardNavigationActive = true;
+            selectedIndex = Math.min(selectedIndex + 1, filteredClipboardModel.count - 1);
+        }
+
+        function selectPrevious() {
+            if (filteredClipboardModel.count === 0)
+                return ;
+
+            keyboardNavigationActive = true;
+            selectedIndex = Math.max(selectedIndex - 1, 0);
+        }
+
+        function copySelected() {
+            if (filteredClipboardModel.count === 0 || selectedIndex < 0 || selectedIndex >= filteredClipboardModel.count)
+                return ;
+
+            var selectedEntry = filteredClipboardModel.get(selectedIndex).entry;
+            copyEntry(selectedEntry);
+        }
+
+        function deleteSelected() {
+            if (filteredClipboardModel.count === 0 || selectedIndex < 0 || selectedIndex >= filteredClipboardModel.count)
+                return ;
+
+            var selectedEntry = filteredClipboardModel.get(selectedIndex).entry;
+            deleteEntry(selectedEntry);
+            if (selectedIndex >= filteredClipboardModel.count && filteredClipboardModel.count > 0)
+                selectedIndex = filteredClipboardModel.count - 1;
+
+        }
+
+        function ensureVisible() {
+        }
+
+        function handleKey(event) {
+            if (event.key === Qt.Key_Escape) {
+                if (keyboardNavigationActive) {
+                    keyboardNavigationActive = false;
+                    if (typeof clipboardListView !== 'undefined' && clipboardListView)
+                        clipboardListView.keyboardActive = false;
+
+                    event.accepted = true;
+                } else {
+                    hide();
+                    event.accepted = true;
+                }
+            } else if (event.key === Qt.Key_Down) {
+                if (!keyboardNavigationActive) {
+                    keyboardNavigationActive = true;
+                    selectedIndex = 0;
+                    if (typeof clipboardListView !== 'undefined' && clipboardListView)
+                        clipboardListView.keyboardActive = true;
+
+                    event.accepted = true;
+                } else {
+                    selectNext();
+                    event.accepted = true;
+                }
+            } else if (event.key === Qt.Key_Up) {
+                if (!keyboardNavigationActive) {
+                    keyboardNavigationActive = true;
+                    selectedIndex = 0;
+                    if (typeof clipboardListView !== 'undefined' && clipboardListView)
+                        clipboardListView.keyboardActive = true;
+
+                    event.accepted = true;
+                } else if (selectedIndex === 0) {
+                    keyboardNavigationActive = false;
+                    if (typeof clipboardListView !== 'undefined' && clipboardListView)
+                        clipboardListView.keyboardActive = false;
+
+                    event.accepted = true;
+                } else {
+                    selectPrevious();
+                    event.accepted = true;
+                }
+            } else if (keyboardNavigationActive) {
+                if (event.key === Qt.Key_C && (event.modifiers & Qt.ControlModifier)) {
+                    copySelected();
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_Delete) {
+                    if (event.modifiers & Qt.ShiftModifier) {
+                        showClearConfirmation = true;
+                        event.accepted = true;
+                    } else {
+                        deleteSelected();
+                        event.accepted = true;
+                    }
+                }
+            }
+            if (event.key === Qt.Key_F10) {
+                showKeyboardHints = !showKeyboardHints;
+                event.accepted = true;
+            }
+        }
+
     }
 
     DankModal {
@@ -155,7 +260,7 @@ DankModal {
         height: 150
         keyboardFocus: "ondemand"
         onBackgroundClicked: {
-      showClearConfirmation = false
+            showClearConfirmation = false;
         }
 
         content: Component {
@@ -211,6 +316,7 @@ DankModal {
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: showClearConfirmation = false
                             }
+
                         }
 
                         Rectangle {
@@ -234,16 +340,22 @@ DankModal {
                                 hoverEnabled: true
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: {
-                  clearAll()
+                                    clearAll();
-                  showClearConfirmation = false
+                                    showClearConfirmation = false;
-                  hide()
+                                    hide();
                                 }
                             }
+
                         }
+
                     }
+
                 }
+
             }
+
         }
+
     }
 
     ListModel {
@@ -262,28 +374,30 @@ DankModal {
 
         stdout: StdioCollector {
             onStreamFinished: {
-        clipboardModel.clear()
+                clipboardModel.clear();
-        const lines = text.trim().split('\n')
+                const lines = text.trim().split('\n');
                 for (const line of lines) {
                     if (line.trim().length > 0)
                         clipboardModel.append({
                         "entry": line
-                                  })
+                    });
+
                 }
-        updateFilteredModel()
+                updateFilteredModel();
             }
         }
+
     }
 
     Process {
         id: deleteProcess
 
         running: false
-    onExited: exitCode => {
+        onExited: (exitCode) => {
             if (exitCode === 0)
-                refreshClipboard()
+                refreshClipboard();
             else
-                console.warn("Failed to delete clipboard entry")
+                console.warn("Failed to delete clipboard entry");
         }
     }
 
@@ -292,51 +406,44 @@ DankModal {
 
         command: ["cliphist", "wipe"]
         running: false
-    onExited: exitCode => {
+        onExited: (exitCode) => {
             if (exitCode === 0) {
-                  clipboardModel.clear()
+                clipboardModel.clear();
-                  filteredClipboardModel.clear()
+                filteredClipboardModel.clear();
-                  totalCount = 0
+                totalCount = 0;
             } else {
-
             }
         }
     }
 
     IpcHandler {
         function open() {
-
+            clipboardHistoryModal.show();
-      clipboardHistoryModal.show()
+            return "CLIPBOARD_OPEN_SUCCESS";
-      return "CLIPBOARD_OPEN_SUCCESS"
         }
 
         function close() {
-
+            clipboardHistoryModal.hide();
-      clipboardHistoryModal.hide()
+            return "CLIPBOARD_CLOSE_SUCCESS";
-      return "CLIPBOARD_CLOSE_SUCCESS"
         }
 
         function toggle() {
-
+            clipboardHistoryModal.toggle();
-      clipboardHistoryModal.toggle()
+            return "CLIPBOARD_TOGGLE_SUCCESS";
-      return "CLIPBOARD_TOGGLE_SUCCESS"
         }
 
         target: "clipboard"
     }
 
-  property Component clipboardContent: Component {
+    clipboardContent: Component {
+        Item {
+            anchors.fill: parent
+
             Column {
                 anchors.fill: parent
                 anchors.margins: Theme.spacingL
                 spacing: Theme.spacingL
-      focus: true
+                focus: false
-      Keys.onPressed: function (event) {
-        if (event.key === Qt.Key_Escape) {
-          hide()
-          event.accepted = true
-        }
-      }
 
                 Item {
                     width: parent.width
@@ -361,6 +468,7 @@ DankModal {
                             font.weight: Font.Medium
                             anchors.verticalCenter: parent.verticalCenter
                         }
+
                     }
 
                     Row {
@@ -368,13 +476,23 @@ DankModal {
                         anchors.verticalCenter: parent.verticalCenter
                         spacing: Theme.spacingS
 
+                        DankActionButton {
+                            iconName: "help"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: showKeyboardHints ? Theme.primary : Theme.surfaceText
+                            hoverColor: Theme.primaryHover
+                            onClicked: {
+                                showKeyboardHints = !showKeyboardHints;
+                            }
+                        }
+
                         DankActionButton {
                             iconName: "delete_sweep"
                             iconSize: Theme.iconSize
                             iconColor: Theme.error
                             hoverColor: Theme.errorHover
                             onClicked: {
-              showClearConfirmation = true
+                                showClearConfirmation = true;
                             }
                         }
 
@@ -385,7 +503,9 @@ DankModal {
                             hoverColor: Theme.errorHover
                             onClicked: hide()
                         }
+
                     }
+
                 }
 
                 DankTextField {
@@ -395,9 +515,21 @@ DankModal {
                     placeholderText: "Search clipboard history..."
                     leftIconName: "search"
                     showClearButton: true
+                    focus: true
+                    ignoreLeftRightKeys: true
+                    keyForwardTargets: [modalFocusScope]
                     onTextChanged: {
-          clipboardHistoryModal.searchText = text
+                        clipboardHistoryModal.searchText = text;
-          updateFilteredModel()
+                        updateFilteredModel();
+                    }
+                    Keys.onEscapePressed: function(event) {
+                        clipboardHistoryModal.hide();
+                        event.accepted = true;
+                    }
+                    Component.onCompleted: {
+                        Qt.callLater(function() {
+                            forceActiveFocus();
+                        });
                     }
                 }
 
@@ -417,17 +549,17 @@ DankModal {
                         anchors.margins: Theme.spacingS
                         clip: true
                         model: filteredClipboardModel
+                        currentIndex: selectedIndex
                         spacing: Theme.spacingXS
-
-          // Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
                         interactive: true
-          flickDeceleration: 1500 // Touch only in Qt 6.9+      // Lower = more momentum, longer scrolling
+                        flickDeceleration: 1500
-          maximumFlickVelocity: 2000 // Touch only in Qt 6.9+   // Higher = faster maximum scroll speed
+                        maximumFlickVelocity: 2000
                         boundsBehavior: Flickable.DragAndOvershootBounds
                         boundsMovement: Flickable.FollowBoundsBehavior
                         pressDelay: 0
                         flickableDirection: Flickable.VerticalFlick
                         
+
                         StyledText {
                             text: "No clipboard entries found"
                             anchors.centerIn: parent
@@ -452,17 +584,26 @@ DankModal {
                             property alias thumbnailImageSource: thumbnailImageSource
 
                             width: clipboardListView.width
-            height: Math.max(entryType === "image" ? 72 : 60,
+                            height: Math.max(entryType === "image" ? 72 : 60, contentText.contentHeight + Theme.spacingL)
-                             contentText.contentHeight + Theme.spacingL)
                             radius: Theme.cornerRadius
-            color: mouseArea.containsMouse ? Theme.primaryHover : Theme.primaryBackground
+                            color: {
-            border.color: Theme.outlineStrong
+                                if (keyboardNavigationActive && index === selectedIndex)
-            border.width: 1
+                                    return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2);
+
+                                return mouseArea.containsMouse ? Theme.primaryHover : Theme.primaryBackground;
+                            }
+                            border.color: {
+                                if (keyboardNavigationActive && index === selectedIndex)
+                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.5);
+
+                                return Theme.outlineStrong;
+                            }
+                            border.width: keyboardNavigationActive && index === selectedIndex ? 1.5 : 1
 
                             Row {
                                 anchors.fill: parent
                                 anchors.margins: Theme.spacingM
-              anchors.rightMargin: Theme.spacingS // Reduced right margin
+                                anchors.rightMargin: Theme.spacingS
                                 spacing: Theme.spacingL
 
                                 Rectangle {
@@ -479,11 +620,12 @@ DankModal {
                                         font.weight: Font.Bold
                                         color: Theme.primary
                                     }
+
                                 }
 
                                 Row {
                                     anchors.verticalCenter: parent.verticalCenter
-                width: parent.width - 68 // Account for index (24) + spacing (16) + delete button (32) - small margin
+                                    width: parent.width - 68
                                     spacing: Theme.spacingM
 
                                     Item {
@@ -493,18 +635,20 @@ DankModal {
 
                                         CachingImage {
                                             id: thumbnailImageSource
-                    anchors.fill: parent
+
                                             property string entryId: model.entry.split('\t')[0]
-                    source: entryType === "image"
+
-                            && imageLoader.imageData ? `data:image/png;base64,${imageLoader.imageData}` : ""
+                                            anchors.fill: parent
+                                            source: entryType === "image" && imageLoader.imageData ? `data:image/png;base64,${imageLoader.imageData}` : ""
                                             fillMode: Image.PreserveAspectCrop
                                             smooth: true
                                             cache: true
-                    visible: false // Hide the original image
+                                            visible: false
                                             asynchronous: true
 
                                             Process {
                                                 id: imageLoader
+
                                                 property string imageData: ""
 
                                                 command: ["sh", "-c", `cliphist decode ${thumbnailImageSource.entryId} | base64 -w 0`]
@@ -512,10 +656,12 @@ DankModal {
 
                                                 stdout: StdioCollector {
                                                     onStreamFinished: {
-                          imageLoader.imageData = text.trim()
+                                                        imageLoader.imageData = text.trim();
                                                     }
                                                 }
+
                                             }
+
                                         }
 
                                         MultiEffect {
@@ -524,8 +670,7 @@ DankModal {
                                             source: thumbnailImageSource
                                             maskEnabled: true
                                             maskSource: clipboardCircularMask
-                    visible: entryType === "image"
+                                            visible: entryType === "image" && thumbnailImageSource.status === Image.Ready
-                             && thumbnailImageSource.status === Image.Ready
                                             maskThresholdMin: 0.5
                                             maskSpreadAtMin: 1
                                         }
@@ -545,41 +690,41 @@ DankModal {
                                                 color: "black"
                                                 antialiasing: true
                                             }
+
                                         }
 
                                         DankIcon {
-                    visible: !(entryType === "image"
+                                            visible: !(entryType === "image" && thumbnailImageSource.status === Image.Ready)
-                               && thumbnailImageSource.status === Image.Ready)
                                             name: {
                                                 if (entryType === "image")
-                        return "image"
+                                                    return "image";
 
                                                 if (entryType === "long_text")
-                        return "subject"
+                                                    return "subject";
 
-                      return "content_copy"
+                                                return "content_copy";
                                             }
                                             size: Theme.iconSize
                                             color: Theme.primary
                                             anchors.centerIn: parent
                                         }
+
                                     }
 
                                     Column {
                                         anchors.verticalCenter: parent.verticalCenter
-                  width: parent.width - (entryType === "image" ? 48 : Theme.iconSize)
+                                        width: parent.width - (entryType === "image" ? 48 : Theme.iconSize) - Theme.spacingM
-                         - Theme.spacingM
                                         spacing: Theme.spacingXS
 
                                         StyledText {
                                             text: {
                                                 switch (entryType) {
                                                 case "image":
-                        return "Image • " + entryPreview
+                                                    return "Image • " + entryPreview;
                                                 case "long_text":
-                        return "Long Text"
+                                                    return "Long Text";
                                                 default:
-                        return "Text"
+                                                    return "Text";
                                                 }
                                             }
                                             font.pixelSize: Theme.fontSizeSmall
@@ -600,8 +745,11 @@ DankModal {
                                             maximumLineCount: entryType === "long_text" ? 3 : 1
                                             elide: Text.ElideRight
                                         }
+
                                     }
+
                                 }
+
                             }
 
                             DankActionButton {
@@ -613,8 +761,7 @@ DankModal {
                                 iconColor: Theme.error
                                 hoverColor: Theme.errorHover
                                 onClicked: {
-
+                                    deleteEntry(model.entry);
-                deleteEntry(model.entry)
                                 }
                             }
 
@@ -622,22 +769,79 @@ DankModal {
                                 id: mouseArea
 
                                 anchors.fill: parent
-              anchors.rightMargin: 40 // Enough space to avoid delete button (32 + 8 margin)
+                                anchors.rightMargin: 40
                                 hoverEnabled: true
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: copyEntry(model.entry)
                             }
 
-            Behavior on color {
-              ColorAnimation {
-                duration: Theme.shortDuration
-              }
-            }
-          }
-        }
-      }
-    }
                         }
 
-  content: clipboardContent
+                    }
+
+                }
+
+                Item {
+                    width: parent.width
+                    height: showKeyboardHints ? 80 + Theme.spacingL : 0
+
+                    Behavior on height {
+                        NumberAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+
+                    }
+
+                }
+
+            }
+
+            Rectangle {
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: Theme.spacingL
+                height: 80
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+                border.color: Theme.primary
+                border.width: 2
+                opacity: showKeyboardHints ? 1 : 0
+                z: 100
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: 2
+
+                    StyledText {
+                        text: "↑/↓: Navigate • Ctrl+C: Copy • Del: Delete • F10: Help"
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    StyledText {
+                        text: "Shift+Del: Clear All • Esc: Close"
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                }
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
 }

Modules/Notifications/Center/NotificationKeyboardController.qml

@@ -478,7 +478,7 @@ QtObject {
             }
         }
         
-        if (event.key === Qt.Key_Question || event.key === Qt.Key_H) {
+        if (event.key === Qt.Key_F10) {
             showKeyboardHints = !showKeyboardHints
             event.accepted = true
         }

Modules/Notifications/Center/NotificationKeyboardHints.qml

@@ -15,13 +15,6 @@ Rectangle {
     opacity: showHints ? 1 : 0
     z: 100
 
-    Behavior on opacity {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-    
     Column {
         anchors.centerIn: parent
         spacing: 2
@@ -34,10 +27,20 @@ Rectangle {
         }
 
         StyledText {
-            text: "Del: Clear • Shift+Del: Clear All • 1-9: Actions • ?: Help • Esc: Close"
+            text: "Del: Clear • Shift+Del: Clear All • 1-9: Actions • F10: Help • Esc: Close"
             font.pixelSize: Theme.fontSizeSmall
             color: Theme.surfaceText
             anchors.horizontalCenter: parent.horizontalCenter
         }
+
     }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+
+    }
+
 }