[ui] refine recent connection card actions

apps/desktop/src/gui/ui/gallery_menu_button.slint

@@ -8,10 +8,18 @@ export component GalleryMenuButton inherits Rectangle {
     in property <bool> primary: false;
     in property <bool> enabled: true;
     in property <bool> opens-up: false;
+    in property <bool> compact-trigger: false;
+    in property <bool> compact-menu: false;
     in property <length> menu-width: 200px;
     in property <length> horizontal-padding: 12px;
     out property <length> preferred-button-width: ceil(button-label.preferred-width / 1px) * 1px + root.horizontal-padding * 2 + 18px;
     in property <[GalleryMenuItem]> items;
+    in property <[string]> item-icons;
+    in property <int> destructive-index: -1;
+    out property <bool> menu-open: popup.is-open;
+    private property <length> row-height: root.compact-menu ? 24px : 30px;
+    private property <length> menu-padding: root.compact-menu ? 3px : 4px;
+    private property <length> divider-spacing: root.compact-menu ? 5px : 7px;
     private property <int> current-index: 0;
     callback opened;
     callback selected(int);
@@ -60,48 +68,89 @@ export component GalleryMenuButton inherits Rectangle {
     trigger-focus := FocusScope {
         enabled: root.enabled;
         key-pressed(event) => { return root.handle-key(event); }
-        CompactButton {
+        if !root.compact-trigger: CompactButton {
             width: parent.width; height: parent.height;
             border-radius: UiRadius.control;
             enabled: root.enabled; primary: root.primary;
             clicked => { trigger-focus.focus(); root.open-menu(); }
         }
         button-label := Text {
+            visible: !root.compact-trigger;
             x: root.horizontal-padding; width: parent.width - root.horizontal-padding * 2 - 18px; height: parent.height;
             text: root.text; color: root.enabled ? #24272d : #8e9298;
             font-size: 11px; overflow: elide; horizontal-alignment: center; vertical-alignment: center;
         }
         Text {
+            visible: !root.compact-trigger;
             x: parent.width - root.horizontal-padding - 12px; width: 12px; height: parent.height;
             text: root.opens-up ? FontAwesomeIcons.angle-up : FontAwesomeIcons.angle-down;
             font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px;
             color: root.enabled ? #62666d : #8e9298;
             horizontal-alignment: center; vertical-alignment: center;
         }
+        if root.compact-trigger: Rectangle {
+            background: more-touch.pressed || popup.is-open ? #e5edfc : more-touch.has-hover ? white : #fffffff0;
+            border-radius: UiRadius.menu;
+            border-width: 1px;
+            border-color: trigger-focus.has-focus ? #3564e3 : #ffffff80;
+            animate background, border-color { duration: 120ms; }
+            for dot in 3: Rectangle {
+                x: parent.width / 2 - 6px + dot * 5px;
+                y: (parent.height - self.height) / 2;
+                width: 2px; height: 2px; border-radius: 1px;
+                background: #35445e;
+            }
+            more-touch := TouchArea {
+                enabled: root.enabled;
+                mouse-cursor: pointer;
+                clicked => { trigger-focus.focus(); root.open-menu(); }
+            }
+        }
     }
     popup := PopupWindow {
         x: root.width - self.width;
         y: root.opens-up ? -self.height - 4px : root.height + 4px;
-        width: root.menu-width; height: root.items.length * 30px + 8px;
+        width: root.menu-width;
+        height: root.items.length * root.row-height + root.menu-padding * 2
+            + (root.destructive-index > 0 ? root.divider-spacing : 0px);
         close-policy: close-on-click-outside;
         forward-focus: popup-focus;
         popup-focus := FocusScope {
             key-pressed(event) => { return root.handle-key(event); }
             Rectangle {
                 background: white; border-width: 1px; border-color: #c9cdd2; border-radius: UiRadius.menu;
+                if root.destructive-index > 0: Rectangle {
+                    x: 10px; y: root.menu-padding + root.destructive-index * root.row-height + (root.divider-spacing - 1px) / 2;
+                    width: parent.width - 20px; height: 1px; background: #e8edf4;
+                }
                 for item[index] in root.items: Rectangle {
-                    x: 4px; y: 4px + index * 30px; width: parent.width - 8px; height: 30px;
+                    private property <bool> destructive: index == root.destructive-index;
+                    private property <bool> has-icon: index < root.item-icons.length && root.item-icons[index] != "";
+                    private property <color> foreground: !item.enabled ? #92979f : self.destructive ? #c43c43 : #30343b;
+                    x: root.menu-padding;
+                    y: root.menu-padding + index * root.row-height
+                        + (root.destructive-index > 0 && index >= root.destructive-index ? root.divider-spacing : 0px);
+                    width: parent.width - root.menu-padding * 2; height: root.row-height;
                     border-radius: UiRadius.control;
-                    background: item.enabled && index == root.current-index ? #edf4fc : transparent;
+                    background: item.enabled && index == root.current-index ? (self.destructive ? #fff0f0 : #edf4fc) : transparent;
                     accessible-role: button; accessible-label: item.label; accessible-enabled: item.enabled;
                     accessible-action-default => { root.choose(index); }
+                    if self.has-icon: Text {
+                        x: root.compact-menu ? 8px : 10px;
+                        width: root.compact-menu ? 12px : 14px; height: parent.height;
+                        text: root.item-icons[index]; color: parent.foreground;
+                        font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: root.compact-menu ? 10px : 11px;
+                        horizontal-alignment: center; vertical-alignment: center;
+                    }
                     Text {
-                        x: 10px; width: parent.width - 20px; height: parent.height;
+                        x: parent.has-icon ? (root.compact-menu ? 28px : 34px) : 10px;
-                        text: item.label; color: item.enabled ? #30343b : #92979f;
+                        width: parent.width - self.x - 10px; height: parent.height;
-                        font-size: 12px; vertical-alignment: center;
+                        text: item.label; color: parent.foreground;
+                        font-size: root.compact-menu ? 11px : 12px; vertical-alignment: center;
                     }
                     TouchArea {
                         enabled: item.enabled;
+                        mouse-cursor: pointer;
                         changed has-hover => { if self.has-hover { root.current-index = index; } }
                         clicked => { root.choose(index); }
                     }

apps/desktop/src/gui/ui/main_window.slint

@@ -1,7 +1,8 @@
 import { UiRadius } from "ui_radius.slint";
 import { WorkbenchStyle, WorkbenchButton, WorkbenchCard, WorkbenchNotice } from "workbench_controls.slint";
 import { GalleryStrings } from "device_strings.slint";
-import { DeviceCardActions, DeviceCardStyle } from "device_card_actions.slint";
+import { DeviceCardStyle } from "device_card_actions.slint";
+import { GalleryMenuButton } from "gallery_menu_button.slint";
 import { DeviceGroupDialog, DeviceGroupOption } from "device_group_dialog.slint";
 import { GalleryView, GalleryTile, GalleryRecentDevice, GalleryActionDevice } from "gallery_view.slint";
 import { GalleryNetworkDialog, GalleryNetworkDevice } from "gallery_network_dialog.slint";
@@ -986,7 +987,7 @@ export component MainWindow inherits Window {
             }
         }
 
-        // Recent connections: horizontal cards with thumbnail and hover actions.
+        // Recent connections: previews, presence badges, and separate primary/overflow actions.
         recent-panel := Rectangle {
             y: 260px;
             height: parent.height - self.y;
@@ -1060,8 +1061,12 @@ export component MainWindow inherits Window {
                         background: transparent;
                         private property <bool> available: connection.online || connection.connected;
                         private property <length> content-width: self.width;
-                        private property <length> toolbar-width: DeviceCardStyle.toolbar-width;
+                        private property <length> scroll-offset: recent-scroll.viewport-x;
-                        private property <length> toolbar-right-padding: 3px;
+                        private property <string> device-id: connection.remote-id;
+                        private property <int> group-index: root.recent-group-index;
+                        changed scroll-offset => { card-menu.close-menu(); }
+                        changed device-id => { card-menu.close-menu(); }
+                        changed group-index => { card-menu.close-menu(); }
 
                         Rectangle {
                             width: connection-card.content-width;
@@ -1104,6 +1109,22 @@ export component MainWindow inherits Window {
                                     vertical-alignment: center;
                                     overflow: elide;
                                 }
+                                Rectangle {
+                                    x: 8px; y: 8px;
+                                    width: presence-label.preferred-width + 24px; height: 20px;
+                                    background: #fffffff0; border-radius: self.height / 2;
+                                    Rectangle {
+                                        x: 8px; y: (parent.height - self.height) / 2;
+                                        width: 5px; height: 5px; border-radius: self.height / 2;
+                                        background: connection-card.available ? WorkbenchStyle.success : WorkbenchStyle.muted;
+                                    }
+                                    presence-label := Text {
+                                        x: 17px; width: self.preferred-width; height: parent.height;
+                                        text: connection-card.available ? UiStrings.online : UiStrings.offline;
+                                        color: connection-card.available ? WorkbenchStyle.success : WorkbenchStyle.muted;
+                                        font-size: 10px; font-weight: 500; vertical-alignment: center;
+                                    }
+                                }
                             }
                             Rectangle {
                                 x: 0px;
@@ -1111,25 +1132,20 @@ export component MainWindow inherits Window {
                                 width: parent.width;
                                 height: 44px;
                                 background: white;
-                                Rectangle { x: 0px; y: 0px; width: parent.width; height: 1px; background: WorkbenchStyle.border; }
+                                Rectangle { x: 0px; y: 0px; width: parent.width; height: 1px; background: WorkbenchStyle.separator; }
                                 Text {
-                                    x: 12px; y: 4px; height: 19px;
+                                    x: 12px; y: 5px; height: 19px;
-                                    width: parent.width - 24px;
+                                    width: parent.width - 56px;
                                     text: connection.display-name;
                                     color: WorkbenchStyle.text;
                                     font-size: 13px; font-weight: 600;
                                     overflow: elide; vertical-alignment: center;
                                 }
                                 Text {
-                                    x: 12px; y: 24px; height: 16px; width: parent.width - 92px;
+                                    x: 12px; y: 24px; height: 16px; width: parent.width - 56px;
                                     text: connection.remote-id; font-size: 11px; color: WorkbenchStyle.muted;
                                     overflow: elide;
                                 }
-                                presence-label := Text {
-                                    x: parent.width - self.preferred-width - 12px; y: 24px; height: 16px;
-                                    text: connection-card.available ? UiStrings.online : UiStrings.offline;
-                                    font-size: 10px; color: connection-card.available ? WorkbenchStyle.success : WorkbenchStyle.muted;
-                                }
                             }
                             // The software renderer only clips rectangular bounds.
                             // This outer border masks the four corners there too.
@@ -1167,6 +1183,12 @@ export component MainWindow inherits Window {
                                 clicked => { root.copy-feedback = CopyFeedback.idle; root.recent-connect(connection.remote-id); }
                                 function show-details() {
                                     if !self.has-hover { return; }
+                                    // Leave the menu trigger and its popup free of device details.
+                                    if card-menu.menu-open || (self.mouse-x >= card-menu.x - 4px
+                                        && self.mouse-y <= card-menu.y + card-menu.height + 4px) {
+                                        root.recent-tooltip-visible = false;
+                                        return;
+                                    }
                                     root.recent-tooltip-name = connection.display-name;
                                     root.recent-tooltip-host = connection.host-name;
                                     root.recent-tooltip-id = connection.remote-id;
@@ -1192,32 +1214,57 @@ export component MainWindow inherits Window {
                                 changed mouse-x => { self.show-details(); }
                                 changed mouse-y => { self.show-details(); }
                             }
-                            if card-touch.has-hover: DeviceCardActions {
+                            card-menu := GalleryMenuButton {
-                                x: parent.width - self.width - connection-card.toolbar-right-padding;
+                                x: parent.width - self.width - 8px; y: 8px;
-                                y: 52px;
+                                width: 24px; height: 24px;
-                                remove-label: GalleryStrings.tr("删除记录", "Delete record", "Удалить запись");
+                                compact-trigger: true;
-                                connected: connection.connected;
+                                compact-menu: true;
-                                edit-alias => {
+                                enabled: !root.gallery-mode;
+                                text: GalleryStrings.tr("更多操作", "More actions", "Другие действия");
+                                menu-width: root.compact-language ? 116px : root.language-index == 2 ? 156px : 128px;
+                                items: [
+                                    {label: GalleryStrings.tr("修改名称", "Rename", "Переименовать"), enabled: true},
+                                    {label: GalleryStrings.tr("修改分组", "Edit groups", "Изменить группы"), enabled: true},
+                                    {label: GalleryStrings.tr("删除记录", "Delete record", "Удалить запись"), enabled: true},
+                                ];
+                                item-icons: [FontAwesomeIcons.pen, FontAwesomeIcons.tags, FontAwesomeIcons.trash-can];
+                                destructive-index: 2;
+                                opened => { root.recent-tooltip-visible = false; root.copy-feedback = CopyFeedback.idle; }
+                                selected(action) => {
                                     root.copy-feedback = CopyFeedback.idle;
-                                    root.alias-remote-id = connection.remote-id;
+                                    if action == 0 {
-                                    root.alias-input = connection.display-name;
+                                        root.alias-remote-id = connection.remote-id;
-                                    root.alias-open = true;
+                                        root.alias-input = connection.display-name;
+                                        root.alias-open = true;
+                                    } else if action == 1 {
+                                        root.open-device-groups(connection.remote-id, connection.display-name);
+                                    } else if action == 2 {
+                                        root.delete-remote-id = connection.remote-id;
+                                        root.delete-from-gallery = false;
+                                        root.delete-open = true;
+                                    }
                                 }
-                                edit-groups => { root.copy-feedback = CopyFeedback.idle; root.open-device-groups(connection.remote-id, connection.display-name); }
+                            }
-                                remove-device => {
+                            WorkbenchButton {
+                                x: parent.width - self.width - 8px; y: 88px;
+                                width: 28px; height: 28px;
+                                soft: true;
+                                primary: !connection.connected;
+                                icon: connection.connected ? FontAwesomeIcons.xmark : FontAwesomeIcons.arrow-right-long;
+                                tooltip: connection.connected ? GalleryStrings.tr("断开连接", "Disconnect", "Отключить") : UiStrings.connect;
+                                tooltip-above: true;
+                                clicked => {
                                     root.copy-feedback = CopyFeedback.idle;
-                                    root.delete-remote-id = connection.remote-id;
+                                    root.recent-tooltip-visible = false;
-                                    root.delete-from-gallery = false;
+                                    if connection.connected { root.recent-disconnect(connection.remote-id); }
-                                    root.delete-open = true;
+                                    else { root.recent-connect(connection.remote-id); }
                                 }
-                                connect-device => { root.copy-feedback = CopyFeedback.idle; root.recent-connect(connection.remote-id); }
-                                disconnect-device => { root.copy-feedback = CopyFeedback.idle; root.recent-disconnect(connection.remote-id); }
                             }
                         }
                         Rectangle {
                             width: parent.width; height: 124px;
                             border-width: 1px; border-radius: UiRadius.surface;
-                            border-color: card-touch.has-hover ? WorkbenchStyle.hover-border : WorkbenchStyle.border;
+                            border-color: card-touch.has-hover || card-menu.menu-open ? WorkbenchStyle.hover-border : WorkbenchStyle.border;
                             animate border-color { duration: 120ms; }
                         }
                     }

apps/desktop/src/gui/ui/workbench_controls.slint

@@ -20,9 +20,13 @@ export component WorkbenchButton inherits Rectangle {
     in property <string> text;
     in property <string> icon;
     in property <string> tooltip;
+    in property <bool> tooltip-above: false;
     in property <bool> tooltip-suppressed: false;
-    in property <color> icon-color: root.primary ? white : WorkbenchStyle.muted;
+    in property <color> icon-color: root.primary
+        ? (root.soft && !touch.has-hover && !root.show-focus ? WorkbenchStyle.accent : white)
+        : WorkbenchStyle.muted;
     in property <bool> primary: false;
+    in property <bool> soft: false;
     in property <bool> quiet: false;
     in property <bool> enabled: true;
     out property <bool> has-focus: button-focus.has-focus;
@@ -37,12 +41,16 @@ export component WorkbenchButton inherits Rectangle {
     width: 112px;
     height: 36px;
     border-radius: UiRadius.control;
-    border-width: root.show-focus ? 2px : 1px;
+    border-width: root.show-focus ? 2px : root.soft ? 0px : 1px;
     border-color: root.show-focus ? (root.primary ? #193da0 : WorkbenchStyle.accent)
         : root.primary ? WorkbenchStyle.accent
         : touch.has-hover ? WorkbenchStyle.hover-border
         : root.quiet ? transparent : WorkbenchStyle.control-border;
-    background: root.primary
+    background: root.soft
+        ? (root.primary
+            ? (touch.pressed ? #254cc0 : touch.has-hover || root.show-focus ? WorkbenchStyle.accent : #edf2ff)
+            : (touch.pressed ? WorkbenchStyle.pressed-surface : touch.has-hover ? WorkbenchStyle.hover-surface : WorkbenchStyle.field-surface))
+        : root.primary
         ? (touch.pressed ? #254cc0 : touch.has-hover ? #4574f0 : WorkbenchStyle.accent)
         : (touch.pressed ? WorkbenchStyle.pressed-surface : touch.has-hover ? WorkbenchStyle.hover-surface : root.quiet ? transparent : white);
     opacity: root.enabled ? 1 : 0.45;
@@ -54,15 +62,15 @@ export component WorkbenchButton inherits Rectangle {
     accessible-action-default => { if root.enabled { root.clicked(); } }
 
     HorizontalLayout {
-        padding-left: 10px;
+        padding-left: root.text == "" ? 0px : 10px;
-        padding-right: 10px;
+        padding-right: root.text == "" ? 0px : 10px;
         spacing: 8px;
         alignment: center;
         if root.icon != "": Text {
             text: root.icon;
             font-family: "Font Awesome 6 Free";
             font-weight: 900;
-            font-size: 14px;
+            font-size: root.soft ? 12px : 14px;
             color: root.icon-color;
             vertical-alignment: center;
             accessible-role: none;
@@ -113,7 +121,7 @@ export component WorkbenchButton inherits Rectangle {
     }
     if root.tooltip-active && root.tooltip-visible: Rectangle {
         x: min(0px, root.width - self.width);
-        y: root.height + 6px;
+        y: root.tooltip-above ? -self.height - 6px : root.height + 6px;
         width: min(260px, tip.preferred-width + 20px);
         height: max(28px, tip.preferred-height + 12px);
         background: #24324a;