waffles: notif center: calendar header and focus

2025-11-24 10:18:05 +01:00
parent 449d6fc285
commit e6f36114bd
29 changed files with 420 additions and 59 deletions
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 3A1.75 1.75 0 0 0 3 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0 0 21 19.25V4.75A1.75 1.75 0 0 0 19.25 3H4.75Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.25 4.5a.25.25 0 0 1 .25.25v14.5a.25.25 0 0 1-.25.25H4.75a.25.25 0 0 1-.25-.25V4.75a.25.25 0 0 1 .25-.25h14.5ZM4.75 3A1.75 1.75 0 0 0 3 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0 0 21 19.25V4.75A1.75 1.75 0 0 0 19.25 3H4.75Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z" fill="#212121"/></svg>
@@ -15,7 +15,7 @@ WBarAttachedPanelContent {

    readonly property bool barAtBottom: Config.options.waffles.bar.bottom
    
-    contentItem: Column {
+    contentItem: ColumnLayout {
        // This somewhat sophisticated anchoring is needed to make opening anim not jump abruptly when stuff appear
        anchors {
            left: parent.left
@@ -28,24 +28,21 @@ WBarAttachedPanelContent {
        spacing: 12

        WPane {
-            visible: MprisController.activePlayer != null && MprisController.isRealPlayer(MprisController.activePlayer)
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
+            opacity: (MprisController.activePlayer != null && MprisController.isRealPlayer(MprisController.activePlayer)) ? 1 : 0
+            Layout.fillWidth: true
            contentItem: MediaPaneContent {}
        }
        WPane {
+            Layout.fillWidth: true
            contentItem: WStackView {
                id: stackView
-                anchors.fill: parent
                implicitWidth: initItem.implicitWidth
                implicitHeight: initItem.implicitHeight

-                initialItem: PageColumn {
+                initialItem: WPanelPageColumn {
                    id: initItem
                    MainPageBody {}
-                    Separator {}
+                    WPanelSeparator {}
                    MainPageFooter {}
                }

@@ -15,12 +15,12 @@ Scope {
        target: GlobalStates

        function onSidebarLeftOpenChanged() {
-            if (GlobalStates.sidebarLeftOpen) barLoader.active = true;
+            if (GlobalStates.sidebarLeftOpen) panelLoader.active = true;
        }
    }

    Loader {
-        id: barLoader
+        id: panelLoader
        active: GlobalStates.sidebarLeftOpen
        sourceComponent: PanelWindow {
            id: panelWindow
@@ -56,16 +56,9 @@ Scope {
                id: content
                anchors.fill: parent

-                focus: true
-                Keys.onPressed: event => { // Esc to close
-                    if (event.key === Qt.Key_Escape) {
-                        content.close()
-                    }
-                }
-
                onClosed: {
                    GlobalStates.sidebarLeftOpen = false;
-                    barLoader.active = false;
+                    panelLoader.active = false;
                }
            }
        }
@@ -23,7 +23,7 @@ Item {
        Bluetooth.defaultAdapter.discovering = false;
    }

-    PageColumn {
+    WPanelPageColumn {
        anchors.fill: parent

        BodyRectangle {
@@ -96,7 +96,7 @@ Item {
            }
        }

-        Separator {}
+        WPanelSeparator {}

        FooterRectangle {
            FooterMoreButton {
@@ -24,7 +24,7 @@ Item {
        Bluetooth.defaultAdapter.discovering = false;
    }

-    PageColumn {
+    WPanelPageColumn {
        anchors.fill: parent

        BodyRectangle {
@@ -61,7 +61,7 @@ Item {
            }
        }

-        Separator {}
+        WPanelSeparator {}

        FooterRectangle {}
    }
@@ -14,7 +14,7 @@ Item {
    id: root
    property bool output: true

-    PageColumn {
+    WPanelPageColumn {
        anchors.fill: parent

        BodyRectangle {
@@ -48,7 +48,7 @@ Item {
            }
        }

-        Separator {}
+        WPanelSeparator {}

        FooterRectangle {
            WButton {
@@ -103,7 +103,7 @@ Item {
            }
        }

-        Separator {
+        WPanelSeparator {
            visible: EasyEffects.available && root.output
            color: Looks.colors.bg2Hover
        }
@@ -129,7 +129,7 @@ Item {
            onClicked: EasyEffects.enable()
        }

-        Separator {
+        WPanelSeparator {
            color: Looks.colors.bg2Hover
        }

@@ -19,7 +19,7 @@ Item {
        Network.rescanWifi();
    }

-    PageColumn {
+    WPanelPageColumn {
        anchors.fill: parent

        BodyRectangle {
@@ -86,7 +86,7 @@ Item {
            }
        }

-        Separator {}
+        WPanelSeparator {}

        FooterRectangle {
            FooterMoreButton {
@@ -12,6 +12,6 @@ Rectangle {
    Layout.fillWidth: true
    color: "transparent"

-    implicitWidth: 360
+    implicitWidth: 358
    implicitHeight: 47
 }
@@ -20,7 +20,7 @@ Singleton {
    property real backgroundTransparency: 0.13
    property real panelBackgroundTransparency: 0.12
    property real panelLayerTransparency: root.dark ? 0.9 : 0.7
-    property real contentTransparency: root.dark ? 0.9 : 0.5
+    property real contentTransparency: root.dark ? 0.87 : 0.5
    function applyBackgroundTransparency(col) {
        return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
    }
@@ -41,8 +41,8 @@ Singleton {
        property color bg1Border: '#d7d7d7'
        property color bg2: "#FBFBFB"
        property color bg2Base: "#FBFBFB"
-        property color bg2Hover: "#FDFDFD"
-        property color bg2Active: "#FDFDFD"
+        property color bg2Hover: '#ffffff'
+        property color bg2Active: '#eeeeee'
        property color bg2Border: '#cdcdcd'
        property color subfg: "#5C5C5C"
        property color fg: "#000000"
@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
@@ -10,11 +11,13 @@ import qs.modules.waffle.looks
 Item {
    id: root

-    signal closed()
+    signal closed

    required property Item contentItem
    property real visualMargin: 12
    property int closeAnimDuration: 150
+    property bool revealFromSides: false
+    property bool revealFromLeft: true

    function close() {
        closeAnim.start();
@@ -25,16 +28,25 @@ Item {
    implicitHeight: contentItem.implicitHeight + visualMargin * 2
    implicitWidth: contentItem.implicitWidth + visualMargin * 2

+    focus: true
+    Keys.onPressed: event => { // Esc to close
+        if (event.key === Qt.Key_Escape) {
+            content.close();
+        }
+    }
+
    Item {
        id: panelContent
        anchors {
-            left: parent.left
-            right: parent.right
-            top: root.barAtBottom ? undefined : parent.top
-            bottom: root.barAtBottom ? parent.bottom : undefined
+            left: (root.revealFromSides && !root.revealFromLeft) ? undefined : parent.left
+            right: (root.revealFromSides && root.revealFromLeft) ? undefined : parent.right
+            top: (!root.revealFromSides && root.barAtBottom) ? undefined : parent.top
+            bottom: (!root.revealFromSides && !root.barAtBottom) ? undefined : parent.bottom
            // Opening anim
-            bottomMargin: root.barAtBottom ? sourceEdgeMargin : root.visualMargin
-            topMargin: root.barAtBottom ? root.visualMargin : sourceEdgeMargin
+            bottomMargin: (!root.revealFromSides && root.barAtBottom) ? sourceEdgeMargin : root.visualMargin
+            topMargin: (!root.revealFromSides && !root.barAtBottom) ? sourceEdgeMargin : root.visualMargin
+            leftMargin: (root.revealFromSides && root.revealFromLeft) ? sideEdgeMargin : root.visualMargin
+            rightMargin: (root.revealFromSides && !root.revealFromLeft) ? sideEdgeMargin : root.visualMargin
        }

        Component.onCompleted: {
@@ -42,24 +54,22 @@ Item {
        }

        property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
-        PropertyAnimation {
+        property real sideEdgeMargin: -(implicitWidth + root.visualMargin)
+        OpenAnim {
            id: openAnim
-            target: panelContent
-            property: "sourceEdgeMargin"
-            to: root.visualMargin
-            duration: 200
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+            properties: "sourceEdgeMargin, sideEdgeMargin"
        }
        SequentialAnimation {
            id: closeAnim
-            PropertyAnimation {
-                target: panelContent
-                property: "sourceEdgeMargin"
-                to: -(implicitHeight + root.visualMargin)
-                duration: root.closeAnimDuration
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+            ParallelAnimation {
+                CloseAnim {
+                    property: "sourceEdgeMargin"
+                    to: -(implicitHeight + root.visualMargin)
+                }
+                CloseAnim {
+                    property: "sideEdgeMargin"
+                    to: -(implicitWidth + root.visualMargin)
+                }
            }
            ScriptAction {
                script: {
@@ -70,5 +80,19 @@ Item {
        implicitWidth: root.contentItem.implicitWidth
        implicitHeight: root.contentItem.implicitHeight
        children: [root.contentItem]
-    }    
+    }
+
+    component OpenAnim: PropertyAnimation {
+        target: panelContent
+        to: root.visualMargin
+        duration: 200
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+    }
+    component CloseAnim: PropertyAnimation {
+        target: panelContent
+        duration: root.closeAnimDuration
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+    }
 }
@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WButton {
+    id: root
+
+    colBackground: Looks.colors.bg2
+    colBackgroundHover: Looks.colors.bg2Hover
+    colBackgroundActive: Looks.colors.bg2Active
+    border.color: Looks.colors.bg2Border
+    border.width: root.pressed ? 2 : 1
+
+    
+}
@@ -15,8 +15,8 @@ Item {
    property alias border: borderRect
    property alias borderColor: borderRect.border.color

-    implicitWidth: contentItem.implicitWidth
-    implicitHeight: contentItem.implicitHeight
+    implicitWidth: borderRect.implicitWidth
+    implicitHeight: borderRect.implicitHeight

    WRectangularShadow {
        target: borderRect
@@ -0,0 +1,51 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+FooterRectangle {
+    id: root
+
+    property bool collapsed
+    implicitWidth: 334
+
+    RowLayout {
+        anchors {
+            fill: parent
+            leftMargin: 16
+            rightMargin: 16
+            topMargin: 12
+            bottomMargin: 12
+        }
+
+        WText {
+            Layout.fillWidth: true
+            font.pixelSize: Looks.font.pixelSize.large
+            text: DateTime.collapsedCalendarFormat
+        }
+
+        WBorderedButton {
+            implicitWidth: 24
+            implicitHeight: 24
+            padding: 0
+            onClicked: root.collapsed = !root.collapsed
+            contentItem: Item {
+                FluentIcon {
+                    anchors.centerIn: parent
+                    implicitSize: 12
+                    icon: "chevron-down"
+                    rotation: root.collapsed ? 180 : 0
+                    Behavior on rotation {
+                        animation: Looks.transition.rotate.createObject(this)
+                    }
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,23 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+BodyRectangle {
+    id: root
+
+    property bool collapsed
+    implicitHeight: collapsed ? 0 : 400 // For now
+    implicitWidth: 334
+
+    Behavior on implicitHeight {
+        animation: Looks.transition.enter.createObject(this)
+    }
+
+}
@@ -0,0 +1,87 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+FooterRectangle {
+    Layout.fillWidth: true
+    implicitWidth: 334
+
+    RowLayout {
+        anchors {
+            fill: parent
+            leftMargin: 16
+            rightMargin: 16
+            topMargin: 12
+            bottomMargin: 12
+        }
+        spacing: 0
+
+        SmallBorderedIconButton {
+            visible: !TimerService.pomodoroRunning
+            icon.name: "subtract"
+            onClicked: Config.options.time.pomodoro.focus -= 300 // 5 mins
+        }
+
+        WTextWithFixedWidth {
+            visible: !TimerService.pomodoroRunning
+            implicitWidth: 81
+            horizontalAlignment: Text.AlignHCenter
+            color: Looks.colors.subfg
+            text: Translation.tr("%1 mins").arg(`<font color="${Looks.colors.fg.toString()}">${TimerService.focusTime / 60}</font>`)
+        }
+
+        SmallBorderedIconButton {
+            visible: !TimerService.pomodoroRunning
+            icon.name: "add"
+            onClicked: Config.options.time.pomodoro.focus += 300 // 5 mins
+        }
+
+        WText {
+            visible: TimerService.pomodoroRunning
+            font.pixelSize: Looks.font.pixelSize.large
+            text: Translation.tr("Focusing")
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        SmallBorderedIconButton {
+            leftPadding: 12
+            rightPadding: 12
+            implicitWidth: focusButtonContent.implicitWidth + leftPadding + rightPadding
+
+            onClicked: {
+                if (TimerService.pomodoroRunning) {
+                    TimerService.togglePomodoro()
+                    TimerService.resetPomodoro()
+                } else {
+                    TimerService.togglePomodoro()
+                    Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "sidebarRight", "toggle"]);
+                }
+            }
+
+            contentItem: Row {
+                id: focusButtonContent
+                spacing: 4
+                FluentIcon {
+                    icon: TimerService.pomodoroRunning ? "stop" : "play"
+                    filled: true
+                    implicitSize: 14
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                WText {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: TimerService.pomodoroRunning ? Translation.tr("End session") : Translation.tr("Focus")
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,57 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Qt.labs.synchronizer
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WBarAttachedPanelContent {
+    id: root
+
+    readonly property bool barAtBottom: Config.options.waffles.bar.bottom
+    revealFromSides: true
+    revealFromLeft: false
+
+    property bool collapsed: false
+
+    contentItem: Column {
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: root.barAtBottom ? undefined : parent.top
+            bottom: root.barAtBottom ? parent.bottom : undefined
+        }
+        spacing: 12
+
+        WPane {
+            contentItem: ColumnLayout {
+                spacing: 0
+                CalendarHeader {
+                    Layout.fillWidth: true
+                    Synchronizer on collapsed {
+                        property alias source: root.collapsed
+                    }
+                }
+
+                WPanelSeparator { visible: !root.collapsed }
+
+                CalendarView {
+                    Layout.fillWidth: true
+                    Synchronizer on collapsed {
+                        property alias source: root.collapsed
+                    }
+                }
+
+                WPanelSeparator {}
+
+                FocusFooter {
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,18 @@
+import QtQuick
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+WBorderedButton {
+    id: root
+    implicitWidth: 24
+    implicitHeight: 24
+    contentItem: Item {
+        FluentIcon {
+            anchors.centerIn: parent
+            implicitSize: 12
+            icon: root.icon.name
+        }
+    }
+}
@@ -0,0 +1,85 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+Scope {
+    id: root
+
+    Connections {
+        target: GlobalStates
+
+        function onSidebarRightOpenChanged() {
+            if (GlobalStates.sidebarRightOpen) panelLoader.active = true;
+        }
+    }
+
+    Loader {
+        id: panelLoader
+        active: GlobalStates.sidebarRightOpen
+        sourceComponent: PanelWindow {
+            id: panelWindow
+            exclusiveZone: 0
+            WlrLayershell.namespace: "quickshell:wNotificationCenter"
+            WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
+            color: "transparent"
+
+            anchors {
+                bottom: true
+                top: true
+                right: true
+            }
+
+            implicitWidth: content.implicitWidth
+            implicitHeight: content.implicitHeight
+
+            HyprlandFocusGrab {
+                id: focusGrab
+                active: true
+                windows: [panelWindow]
+                onCleared: content.close();
+            }
+
+            Connections {
+                target: GlobalStates
+                function onSidebarRightOpenChanged() {
+                    if (!GlobalStates.sidebarRightOpen) content.close();
+                }
+            }
+
+            NotificationCenterContent {
+                id: content
+                anchors.fill: parent
+
+                onClosed: {
+                    GlobalStates.sidebarRightOpen = false;
+                    panelLoader.active = false;
+                }
+            }
+        }
+    }
+
+    function toggleOpen() {
+        GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+    }
+
+    IpcHandler {
+        target: "sidebarRight"
+
+        function toggle() {
+            root.toggleOpen();
+        }
+    }
+
+    GlobalShortcut {
+        name: "sidebarRightToggle"
+        description: "Toggles notification center on press"
+
+        onPressed: root.toggleOpen();
+    }
+}
@@ -22,7 +22,7 @@ Singleton {
    property string shortDate: Qt.locale().toString(clock.date, Config.options?.time.shortDateFormat ?? "dd/MM")
    property string date: Qt.locale().toString(clock.date, Config.options?.time.dateWithYearFormat ?? "dd/MM/yyyy")
    property string longDate: Qt.locale().toString(clock.date, Config.options?.time.dateFormat ?? "dddd, dd/MM")
-    property string collapsedCalendarFormat: Qt.locale().toString(clock.date, "dd MMMM yyyy")
+    property string collapsedCalendarFormat: Qt.locale().toString(clock.date, "dddd, MMMM dd")
    property string uptime: "0h, 0m"

    Timer {
@@ -31,6 +31,7 @@ import qs.modules.ii.wallpaperSelector
 import qs.modules.waffle.actionCenter
 import qs.modules.waffle.background
 import qs.modules.waffle.bar
+import qs.modules.waffle.notificationCenter
 import qs.modules.waffle.onScreenDisplay

 import QtQuick
@@ -79,6 +80,7 @@ ShellRoot {
    PanelLoader { identifier: "wActionCenter"; component: WaffleActionCenter {} }
    PanelLoader { identifier: "wBar"; component: WaffleBar {} }
    PanelLoader { identifier: "wBackground"; component: WaffleBackground {} }
+    PanelLoader { identifier: "wNotificationCenter"; component: WaffleNotificationCenter {} }
    PanelLoader { identifier: "wOnScreenDisplay"; component: WaffleOSD {} }
    ReloadPopup {}

@@ -92,7 +94,7 @@ ShellRoot {
    property list<string> families: ["ii", "waffle"]
    property var panelFamilies: ({
        "ii": ["iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"],
-        "waffle": ["wActionCenter", "wBar", "wBackground", "wOnScreenDisplay", "iiCheatsheet", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiSessionScreen", "iiSidebarRight", "iiWallpaperSelector"],
+        "waffle": ["wActionCenter", "wBar", "wBackground", "wNotificationCenter", "wOnScreenDisplay", "iiCheatsheet", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiSessionScreen", "iiWallpaperSelector"],
    })
    function cyclePanelFamily() {
        const currentIndex = families.indexOf(Config.options.panelFamily)
				`@@ -0,0 +1 @@`
				`<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z" fill="#212121"/></svg>`