feat(storybook): add ChatAnchorButtonsPanel

iterates: #9069

storybook/PagesModel.qml

@@ -93,6 +93,10 @@ ListModel {
          title: "CommunityAirdropsSettingsPanel"
          section: "Panels"
     }
+    ListElement {
+         title: "ChatAnchorButtonsPanel"
+         section: "Panels"
+    }
     ListElement {
         title: "InviteFriendsToCommunityPopup"
         section: "Popups"

storybook/figma.json

@@ -148,6 +148,9 @@
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
     ],
+    "ChatAnchorButtonsPanel": [
+        "https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/%F0%9F%92%AC-Chat%E2%8E%9CDesktop?node-id=14632-460085&t=SGTU2JeRA8ifbv2E-0"
+    ],
     "DerivationPathInput": [
         "https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=12272%3A269692&t=YiipgcxOhdOvqprP-0"
     ]

storybook/pages/ChatAnchorButtonsPanelPage.qml

@@ -0,0 +1,66 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Storybook 1.0
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Chat.panels 1.0
+
+SplitView {
+    orientation: Qt.Vertical
+
+    Rectangle {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        color: Theme.palette.statusAppLayout.backgroundColor
+
+        ChatAnchorButtonsPanel {
+            id: panel
+
+            anchors.centerIn: parent
+
+            mentionsCount: mentionsCountSlider.value
+            recentMessagesCount: recentMessagesCountSlider.value
+
+            onMentionsButtonClicked: mentionsCountSlider.value = mentionsCountSlider.value - 1
+            onRecentMessagesButtonClicked: recentMessagesCountSlider.value = 0
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 250
+
+        ColumnLayout {
+            Row {
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "unread mentions:"
+                }
+
+                Slider {
+                    id: mentionsCountSlider
+                    value: 1
+                    from: 0
+                    to: 200
+                }
+            }
+
+            Row {
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "recent messages:"
+                }
+
+                Slider {
+                    id: recentMessagesCountSlider
+                    value: 0
+                    from: 0
+                    to: 200
+                }
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml

@@ -22,6 +22,11 @@ Button {
         Primary
     }
 
+    enum TextPosition {
+        Left,
+        Right
+    }
+
     property StatusAssetSettings asset: StatusAssetSettings { }
 
     property bool loading
@@ -40,6 +45,7 @@ Button {
 
     property int size: StatusBaseButton.Size.Large
     property int type: StatusBaseButton.Type.Normal
+    property int textPosition: StatusBaseButton.TextPosition.Right
 
     property bool isRoundIcon: false
 
@@ -110,6 +116,28 @@ Button {
             }
         }
 
+        Component {
+            id: text
+
+            StatusBaseText {
+                Layout.alignment: root.textAlignment
+                Layout.fillWidth: root.textFillWidth
+                opacity: !root.loading
+                font: root.font
+                text: root.text
+                color: d.textColor
+                visible: text
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+            }
+        }
+
+        Loader {
+            active: root.textPosition === StatusBaseButton.TextPosition.Left
+            visible: active && root.text !== ""
+            sourceComponent: text
+        }
+
         Loader {
             id: iconLoader
 
@@ -118,22 +146,18 @@ Button {
             active: root.icon.name !== ""
             sourceComponent: root.isRoundIcon ? roundIcon : baseIcon
         }
+
         StatusEmoji {
             Layout.preferredWidth: visible ? root.icon.width : 0
             Layout.preferredHeight: visible ? root.icon.height : 0
             visible: root.asset.emoji
             emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
         }
-        StatusBaseText {
+
-            Layout.alignment: root.textAlignment
+        Loader {
-            Layout.fillWidth: root.textFillWidth
+            active: root.textPosition === StatusBaseButton.TextPosition.Right
-            opacity: !root.loading
+            visible: active && root.text !== ""
-            font: root.font
+            sourceComponent: text
-            text: root.text
-            color: d.textColor
-            visible: text
-            verticalAlignment: Text.AlignVCenter
-            elide: Text.ElideRight
         }
     }
 

ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+
+import utils 1.0
+import shared 1.0
+
+Item {
+    id: root
+
+    property int mentionsCount
+    property int recentMessagesCount
+
+    signal mentionsButtonClicked
+    signal recentMessagesButtonClicked
+
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
+
+    QtObject {
+        id: d
+
+        function limitNumberTo99(number) {
+            return number > 99 ? qsTr("99+") : number
+        }
+    }
+
+    component AnchorButton: StatusButton {
+        Layout.preferredHeight: 38
+        radius: 100
+        spacing: 4
+
+        icon.width: Style.current.primaryTextFontSize + 5
+        icon.height: Style.current.primaryTextFontSize + 5
+        verticalPadding: Style.current.halfPadding
+        horizontalPadding: Style.current.smallPadding
+        font.pixelSize: Style.current.primaryTextFontSize
+    }
+
+    RowLayout {
+        id: layout
+
+        anchors.fill: parent
+
+        spacing: Style.current.smallPadding
+
+        AnchorButton {
+            visible: mentionsCount > 0
+            text: d.limitNumberTo99(mentionsCount)
+            type: StatusBaseButton.Type.Primary
+            icon.name: "username"
+
+            onClicked: root.mentionsButtonClicked()
+        }
+
+        AnchorButton {
+            text: recentMessagesCount <= 0 ? "" : d.limitNumberTo99(recentMessagesCount)
+            normalColor: Style.current.buttonSecondaryColor
+            type: StatusRoundButton.Type.Tertiary
+            textPosition: StatusBaseButton.TextPosition.Left
+            icon.name: "arrow-down"
+
+            onClicked: root.recentMessagesButtonClicked()
+        }
+    }
+}

ui/app/AppLayouts/Chat/panels/qmldir

@@ -1,2 +1,3 @@
 SuggestionBoxPanel 1.0 SuggestionBoxPanel.qml
 UserListPanel 1.0 UserListPanel.qml
+ChatAnchorButtonsPanel 1.0 ChatAnchorButtonsPanel.qml