refactor(ActivityNotificationXX): Refactor notifications layout and improve storybook integration

- Adjusted text sizes for better readability across devices.
- Refined all notification delegate's layout for consistency.
- Enhanced `Storybook` example with interactive controls for improved component testing.

Author: noeliaSD

storybook/pages/ActivityNotificationBaseEditor.qml

@@ -0,0 +1,101 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQml
+
+ColumnLayout {
+    id: root
+
+    spacing: 8
+    width: parent.width
+
+    property bool showBaseEditorFields: true
+
+    property QtObject notificationBaseMock: QtObject {
+        property string id: "notificationID-111"
+        property int notificationType: 0
+        property string communityId: "communityID-222"
+        property double previousTimestamp: 0
+        readonly property string title: title.text
+        readonly property string description: desc.text
+        readonly property double timestamp: timestamp.text
+        readonly property bool read: read.checked
+        readonly property bool dismissed: dismissed.checked
+        readonly property bool accepted: accepted.checked
+    }
+
+    Label {
+        Layout.fillWidth: true
+        Layout.topMargin: 8
+
+        visible: root.showBaseEditorFields
+        text: "Title:"
+        font.weight: Font.Bold
+    }
+
+    TextField {
+        id: title
+        Layout.fillWidth: true
+
+        visible: root.showBaseEditorFields
+        text: "Some title"
+    }
+
+    Label {
+        Layout.topMargin: 8
+        Layout.fillWidth: true
+
+        visible: root.showBaseEditorFields
+        text: "Description:"
+        font.weight: Font.Bold
+    }
+
+    TextField {
+        id: desc
+        Layout.fillWidth: true
+
+        visible: root.showBaseEditorFields
+        text: "Some notification description"
+    }
+
+    Label {
+        Layout.topMargin: 8
+        Layout.fillWidth: true
+        text: "Timestamp:"
+        font.weight: Font.Bold
+    }
+
+    TextField {
+        id: timestamp
+        Layout.fillWidth: true
+        text: Date.now()
+    }
+
+    Label {
+        Layout.topMargin: 8
+        Layout.fillWidth: true
+        text: "Notification Status:"
+        font.weight: Font.Bold
+    }
+
+    ButtonGroup { id: read_dismissed_accepted }
+
+    RadioButton {
+        id: read
+        Layout.fillWidth: true
+        text: "Read"
+    }
+
+    RadioButton {
+        id: dismissed
+        Layout.fillWidth: true
+        text: "Dismissed"
+        checked: true
+    }
+
+    RadioButton {
+        id: accepted
+        Layout.fillWidth: true
+        text: "Accepted"
+    }
+}

storybook/pages/ActivityNotificationBaseLayout.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import Storybook
+
+import utils
+
+SplitView {
+    id: root
+
+    property alias activityNotificationComponent: notificationLoader.sourceComponent
+    property alias additionalEditorComponent: additionalEditorLoader.sourceComponent
+
+    property bool showBaseEditorFields: true
+    required property bool communityEditorActive
+    required property bool contactEditorActive
+
+    readonly property var baseEditor: baseEditor
+    readonly property var communityEditor: communityEditorLoader.item
+    readonly property var conntactEditor: contactEditorLoader.item
+    readonly property alias logs: logsInternal
+
+    readonly property int leftPanelMaxWidth: 308 // It fits on mobile / portrait + desktop left panel
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        Logs { id: logsInternal }
+
+        Item {
+            SplitView.fillHeight: true
+            SplitView.fillWidth: true
+            Loader {
+                id: notificationLoader
+                anchors.centerIn: parent
+                width: root.leftPanelMaxWidth
+            }
+        }
+
+        LogsAndControlsPanel {
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 160
+
+            logsView.logText: logs.logText
+        }
+
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        ActivityNotificationBaseEditor {
+            id: baseEditor
+
+            showBaseEditorFields: root.showBaseEditorFields
+
+            Loader {
+                id: contactEditorLoader
+                active: root.contactEditorActive
+                sourceComponent: contactEditorComponent
+            }
+
+            Loader {
+                id: communityEditorLoader
+                active: root.communityEditorActive
+                sourceComponent: communityEditorComponent
+            }
+
+            Loader {
+                id: additionalEditorLoader
+            }
+        }
+    }
+
+    Component {
+        id: communityEditorComponent
+
+        ActivityNotificationCommunityEditor {
+            id: communityEditor
+        }
+    }
+
+    Component {
+        id: contactEditorComponent
+
+        ActivityNotificationContactEditor {
+            id: contactEditor
+        }
+    }
+}

storybook/pages/ActivityNotificationCommunityBanUnbanPage.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import StatusQ.Core.Theme
+
+import AppLayouts.ActivityCenter.views
+
+import Storybook
+
+ActivityNotificationBaseLayout {
+    id: root
+
+    property bool isBanned: true
+
+    showBaseEditorFields: false
+    communityEditorActive: true
+    contactEditorActive: false
+    activityNotificationComponent: ActivityNotificationCommunityBanUnban {
+        notification: baseEditor.notificationBaseMock
+        community: communityEditor.communityMock
+        banned: root.isBanned
+
+        onSetActiveCommunity: (communityId) =>
+                              logs.logEvent("ActivityNotificationCommunityBanUnban::onSetActiveCommunity - " + communityId)
+    }
+
+    additionalEditorComponent: ColumnLayout {
+        Switch {
+            id: isBannedSwitch
+            checked: root.isBanned
+            text: "Is banned?"
+            onCheckedChanged: root.isBanned = checked
+        }
+    }
+}
+// category: Activity Center
+// status: good

storybook/pages/ActivityNotificationCommunityEditor.qml

@@ -0,0 +1,55 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQml
+
+import Models
+
+
+ColumnLayout {
+    spacing: 8
+    width: parent.width
+
+    property QtObject communityMock: QtObject {
+        readonly property string name: communityName.text
+        readonly property string image: communityImage.checked ? "" : ModelsData.banners.status
+        readonly property string color: communityColor.checked ? "pink" : "green"
+    }
+
+    Label {
+        Layout.fillWidth: true
+        Layout.topMargin: 8
+        text: "Community name"
+        font.weight: Font.Bold
+    }
+
+    TextField {
+        Layout.fillWidth: true
+        id: communityName
+        text: "Status CCs"
+    }
+
+    Label {
+        Layout.fillWidth: true
+        Layout.topMargin: 8
+        text: "Community image"
+        font.weight: Font.Bold
+    }
+
+    Switch {
+        id: communityImage
+        text: "Image or Text"
+    }
+
+    Label {
+        Layout.fillWidth: true
+        Layout.topMargin: 8
+        text: "Community color"
+        font.weight: Font.Bold
+    }
+
+    Switch {
+        id: communityColor
+        text: "Green or Pink"
+    }
+}

storybook/pages/ActivityNotificationCommunityInvitationPage.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import StatusQ.Core.Theme
+
+import AppLayouts.ActivityCenter.views
+
+import Storybook
+
+ActivityNotificationBaseLayout {
+    id: root
+
+    communityEditorActive: true
+    contactEditorActive: true
+    activityNotificationComponent: ActivityNotificationCommunityInvitation {
+        community: communityEditor.communityMock
+        contactDetails: conntactEditor.contactDetailsMock
+        notification: QtObject {
+            readonly property string id: baseEditor.notificationBaseMock.id
+            readonly property string author: baseEditor.notificationBaseMock.title
+            readonly property string chatId: baseEditor.notificationBaseMock.id
+            readonly property string sectionId: "sectionId-123"
+            readonly property bool read: baseEditor.notificationBaseMock.read
+            readonly property bool dismissed: baseEditor.notificationBaseMock.dismissed
+            readonly property bool accepted: baseEditor.notificationBaseMock.accepted
+            property double timestamp: baseEditor.notificationBaseMock.timestamp
+            property QtObject message: QtObject {
+                readonly property string communityId: "communityId-222"
+                readonly property string id: "messageID-aaa"
+                readonly property string messageText: baseEditor.notificationBaseMock.description
+            }
+        }
+
+        onSetActiveCommunityRequested: (communityId) =>
+                                       logs.logEvent("ActivityNotificationCommunityInvitation::onSetActiveCommunityRequested - " + communityId)
+        onSwitchToRequested: (sectionId, chatId, messageId) =>
+                             logs.logEvent("ActivityNotificationCommunityInvitation::onSwitchToRequested",
+                                           ["sectionId", "chatId", "messageId"],
+                                           [sectionId, chatId, messageId])
+        onOpenProfilePopup: (contactId) =>
+                            logs.logEvent("ActivityNotificationCommunityInvitation::onOpenProfilePopup - " + contactId)
+    }
+}
+// category: Activity Center
+// status: good

storybook/pages/ActivityNotificationCommunityKickedPage.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import StatusQ.Core.Theme
+
+import AppLayouts.ActivityCenter.views
+
+import Storybook
+
+ActivityNotificationBaseLayout {
+    id: root
+
+    communityEditorActive: true
+    contactEditorActive: false
+    activityNotificationComponent: ActivityNotificationCommunityKicked {
+        community: communityEditor.communityMock
+        notification: baseEditor.notificationBaseMock
+
+        onSetActiveCommunity: (communityId) =>
+                                       logs.logEvent("ActivityNotificationCommunityKicked::onSetActiveCommunityRequested - " + communityId)
+    }
+}
+// category: Activity Center
+// status: good