Notepad multi-size options

Modules/NotepadSlideout.qml

@@ -15,17 +15,17 @@ pragma ComponentBehavior: Bound
 PanelWindow {
     id: root
 
-    property bool notepadVisible: false
+    property bool isVisible: false
     property bool fileDialogOpen: false
     property string currentFileName: ""
     property bool hasUnsavedChanges: false
     property url currentFileUrl
     property var targetScreen: null
     property var modelData: null
-    property bool animatingOut: false
     property bool confirmationDialogOpen: false
     property string pendingAction: ""
     property string lastSavedFileContent: ""
+    property bool expandedWidth: false
     
     function hasFileChanges() {
         if (!root.currentFileUrl.toString()) {
@@ -35,44 +35,44 @@ PanelWindow {
     }
 
     function show() {
-        notepadVisible = true
+        visible = true
-        Qt.callLater(() => textArea.forceActiveFocus())
+        isVisible = true
+        textArea.forceActiveFocus()
     }
 
     function hide() {
-        animatingOut = true
+        isVisible = false
-        notepadVisible = false
-        hideTimer.start()
     }
 
     function toggle() {
-        if (notepadVisible) {
+        if (isVisible) {
             hide()
         } else {
             show()
         }
     }
 
-    visible: notepadVisible || animatingOut
+    visible: isVisible
     screen: modelData
     
     anchors.top: true
     anchors.bottom: true
     anchors.right: true
     
-    implicitWidth: 480
+    implicitWidth: 960
     implicitHeight: modelData ? modelData.height : 800
     
     color: "transparent"
     
     WlrLayershell.layer: WlrLayershell.Overlay
     WlrLayershell.exclusiveZone: 0
-    WlrLayershell.keyboardFocus: (notepadVisible && !animatingOut) ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+    WlrLayershell.keyboardFocus: isVisible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+    
 
     // Background click to close
     MouseArea {
         anchors.fill: parent
-        enabled: notepadVisible && !animatingOut
+        enabled: isVisible
         onClicked: mouse => {
             var localPos = mapToItem(contentRect, mouse.x, mouse.y)
             if (localPos.x < 0 || localPos.x > contentRect.width || localPos.y < 0 || localPos.y > contentRect.height) {
@@ -84,21 +84,47 @@ PanelWindow {
     StyledRect {
         id: contentRect
         
-        anchors.fill: parent
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        width: expandedWidth ? 960 : 480
         color: Theme.surfaceContainer
         border.color: Theme.outlineMedium
         border.width: 1
+        opacity: isVisible ? 1 : 0
+        
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 700
+                easing.type: Easing.OutCubic
+            }
+        }
         
         transform: Translate {
-            x: notepadVisible ? 0 : 480
+            id: slideTransform
+            x: isVisible ? 0 : contentRect.width
             
             Behavior on x {
                 NumberAnimation {
-                    duration: Theme.longDuration
+                    id: slideAnimation
-                    easing.type: Theme.emphasizedEasing
+                    duration: 450
+                    easing.type: Easing.OutCubic
+                    
+                    onRunningChanged: {
+                        if (!running && !isVisible) {
+                            root.visible = false
+                        }
+                    }
                 }
             }
         }
+        
+        Behavior on width {
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
+        }
 
         Column {
             anchors.fill: parent
@@ -111,7 +137,7 @@ PanelWindow {
                 height: 40
 
                 Column {
-                    width: parent.width - closeButton.width
+                    width: parent.width - buttonRow.width
                     spacing: Theme.spacingXS
                     anchors.verticalCenter: parent.verticalCenter
                     
@@ -133,12 +159,31 @@ PanelWindow {
                     }
                 }
 
-                DankActionButton {
+                Row {
-                    id: closeButton
+                    id: buttonRow
-                    iconName: "close"
+                    spacing: Theme.spacingXS
-                    iconSize: Theme.iconSize - 4
+                    
-                    iconColor: Theme.surfaceText
+                    DankActionButton {
-                    onClicked: root.hide()
+                        id: expandButton
+                        iconName: root.expandedWidth ? "unfold_less" : "unfold_more"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: root.expandedWidth = !root.expandedWidth
+                        
+                        transform: Rotation {
+                            angle: 90
+                            origin.x: expandButton.width / 2
+                            origin.y: expandButton.height / 2
+                        }
+                    }
+                    
+                    DankActionButton {
+                        id: closeButton
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: root.hide()
+                    }
                 }
             }
 
@@ -165,7 +210,7 @@ PanelWindow {
                         selectByMouse: true
                         selectByKeyboard: true
                         wrapMode: TextArea.Wrap
-                        focus: root.notepadVisible
+                        focus: root.isVisible
                         activeFocusOnTab: true
                         textFormat: TextEdit.PlainText
                         persistentSelection: true
@@ -387,14 +432,6 @@ PanelWindow {
         }
     }
 
-    Timer {
-        id: hideTimer
-        interval: Theme.longDuration
-        repeat: false
-        onTriggered: {
-            animatingOut = false
-        }
-    }
 
     // File save/load functionality
     function saveToFile(fileUrl) {