fix: truncate webfetch content to fit context

Modules/Notifications/Sidebar/Chat/SidebarView.qml

@@ -36,6 +36,7 @@ Item {
 	}
 
 	BlobInvertedRect {
+		id: invertedRect
 		anchors.fill: parent
 		borderBottom: Tokens.padding.small
 		borderLeft: sidebar.implicitWidth + sidebar.anchors.margins + Tokens.spacing.medium
@@ -53,9 +54,10 @@ Item {
 		anchors.left: parent.left
 		anchors.bottom: parent.bottom
 		anchors.margins: Tokens.padding.medium
-		implicitWidth: root.isWide ? Config.sidebar.sizes.width : root.iconSize
+		implicitWidth: root.isWide || ChatState.narrowSidebarExpanded ? Config.sidebar.sizes.width : root.iconSize
 		highlight: true
-		slim: !root.isWide
+		slim: !root.isWide && !ChatState.narrowSidebarExpanded
+		z: 1
 
 		Behavior on implicitWidth {
 			Anim {
@@ -84,6 +86,36 @@ Item {
 			ChatState.currentIdx = 0;
 			ChatState.chatSession = data;
 		}
+
+		onRequestExpand: {
+			ChatState.narrowSidebarExpanded = true;
+		}
+	}
+
+	CustomClippingRect {
+		anchors.fill: parent
+		anchors.leftMargin: invertedRect.borderLeft
+		anchors.topMargin: invertedRect.borderTop
+		anchors.bottomMargin: invertedRect.borderBottom
+		anchors.rightMargin: invertedRect.borderRight
+		radius: invertedRect.radius
+
+		children: [contentArea, dim]
+	}
+
+	CustomRect {
+		id: dim
+		anchors.fill: parent
+
+		color: Colors.palette.m3shadow
+		opacity: ChatState.narrowSidebarExpanded && !root.isWide ? 0.3 : 0
+		z: 1
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
 	}
 
 	Item {
@@ -91,12 +123,12 @@ Item {
 
 		property int leftMargin: sidebar.implicitWidth
 
-		z: 1
+		z: 0
 		anchors.top: parent.top
 		anchors.bottom: parent.bottom
-		anchors.margins: Tokens.padding.medium * 2
+		anchors.margins: Tokens.padding.medium
 		anchors.right: parent.right
-		implicitWidth: root.width - leftMargin - sidebar.anchors.margins - Tokens.spacing.medium * 2 - anchors.margins
+		implicitWidth: root.width - leftMargin - sidebar.anchors.margins - Tokens.spacing.medium * 2 - anchors.margins * 2
 
 		states: State {
 			name: "wide"
@@ -152,6 +184,27 @@ Item {
 				color: Colors.tPalette.m3onSurfaceVariant
 			}
 		}
+
+		MouseArea {
+			id: dimArea
+			anchors.fill: parent
+			preventStealing: true
+			enabled: !root.isWide && ChatState.narrowSidebarExpanded
+			cursorShape: undefined
+
+			onClicked: {
+				const x = mouseX;
+				const margin = root.width - contentArea.implicitWidth - contentArea.anchors.margins * 2;
+
+				if (x > invertedRect.borderLeft - margin)
+					ChatState.narrowSidebarExpanded = false;
+			}
+
+			HoverHandler {
+				cursorShape: dimArea.enabled ? Qt.ArrowCursor : undefined
+				enabled: dimArea.enabled
+			}
+		}
 	}
 
 	Binding {
@@ -160,6 +213,24 @@ Item {
 		value: root.showList
 	}
 
+	Binding {
+		target: ChatState
+		property: "isWide"
+		value: root.isWide
+	}
+
+	Binding {
+		target: ChatState
+		value: contentArea.leftMargin === root.iconSize
+		property: "settledSlim"
+	}
+
+	Binding {
+		target: ChatState
+		value: contentArea.leftMargin === sidebar.implicitWidth
+		property: "settledWide"
+	}
+
 	Component {
 		id: conversationView