use blobgroup for window chat interface + slim sidebar

Modules/Notifications/Sidebar/Chat/SidebarView.qml

@@ -4,38 +4,65 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import Quickshell
+import ZShell.Blobs
 import ZShell.Config
 import ZShell.Llm
 import qs.Components
 import qs.Modules.Notifications.Sidebar.Chat.Content
 import qs.Services
 
-RowLayout {
+Item {
 	id: root
 
-	property int breakpoint: 700
+	property int breakpoint: Math.round(Config.sidebar.sizes.width * 2) + Tokens.spacing.medium * 2 + Tokens.padding.medium * 3
+	property color blobColor: Colors.tPalette.m3surfaceContainerLow
+	readonly property int iconSize: Math.round(Tokens.font.size.extraLarge * (96 / 72)) + Tokens.padding.large * 2
 	property alias conversationModel: sidebar.model
+	property bool chatOpen: ChatState.chatSession !== null
 
 	readonly property bool isWide: root.width >= root.breakpoint
-	property bool narrowShowsSidebar: true
+
+	readonly property bool showList: isWide || !chatOpen
+	readonly property bool showContent: !isWide && chatOpen
 
 	function openConversation(conv: ChatSession, index: int): void {
 	}
 
+	BlobGroup {
+		id: blobGroup
+
+		color: root.blobColor
+		smoothing: Tokens.rounding.medium
+	}
+
+	BlobInvertedRect {
+		anchors.fill: parent
+		borderBottom: Tokens.padding.small
+		borderLeft: sidebar.implicitWidth + sidebar.anchors.margins + Tokens.spacing.medium
+		borderRight: Tokens.padding.small
+		borderTop: Tokens.padding.small
+		group: blobGroup
+		opacity: root.blobColor.a
+		radius: Tokens.rounding.largeIncreased
+	}
+
 	ChatList {
 		id: sidebar
 
-		Layout.fillHeight: true
-		Layout.margins: Tokens.padding.medium
-		Layout.rightMargin: Tokens.spacing.medium
-		Layout.maximumWidth: Config.sidebar.sizes.width
-		Layout.preferredWidth: root.width / 4
-		Layout.minimumWidth: Config.sidebar.sizes.width / 2
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.bottom: parent.bottom
+		anchors.margins: Tokens.padding.medium
+		implicitWidth: root.isWide ? Config.sidebar.sizes.width : root.iconSize
 		highlight: true
+		slim: !root.isWide
 
 		Behavior on implicitWidth {
-			Anim {}
+			Anim {
+				type: Anim.DefaultEffects
+			}
 		}
+
 		model: ScriptModel {
 			values: Chat.chats.values
 		}
@@ -46,9 +73,11 @@ RowLayout {
 		}
 
 		onDeleteChatRequest: chat => {
+			if (chat === ChatState.chatSession) {
+				ChatState.chatSession = null;
+				ChatState.currentIdx = -1;
+			}
 			Chat.chats.remove(chat);
-			ChatState.currentIdx = -1;
-			ChatState.chatSession = null;
 		}
 		onNewChatRequest: {
 			const data = Chat.chats.insert();
@@ -58,12 +87,34 @@ RowLayout {
 	}
 
 	Item {
-		Layout.margins: Tokens.padding.extraLarge
-		Layout.leftMargin: Tokens.spacing.extraLarge
-		Layout.topMargin: Tokens.padding.large
-		Layout.preferredWidth: Config.sidebar.sizes.width * 2
-		Layout.fillWidth: true
-		Layout.fillHeight: true
+		id: contentArea
+
+		property int leftMargin: sidebar.implicitWidth
+
+		z: 1
+		anchors.top: parent.top
+		anchors.bottom: parent.bottom
+		anchors.margins: Tokens.padding.medium * 2
+		anchors.right: parent.right
+		implicitWidth: root.width - leftMargin - sidebar.anchors.margins - Tokens.spacing.medium * 2 - anchors.margins
+
+		states: State {
+			name: "wide"
+			when: !root.isWide
+
+			PropertyChanges {
+				contentArea.leftMargin: root.iconSize
+			}
+		}
+
+		transitions: Transition {
+			to: "wide"
+
+			Anim {
+				type: Anim.DefaultEffects
+				property: "leftMargin"
+			}
+		}
 
 		ChatHost {
 			id: convHost
@@ -71,10 +122,11 @@ RowLayout {
 			anchors.top: parent.top
 			anchors.bottom: parent.bottom
 			anchors.horizontalCenter: parent.horizontalCenter
-			implicitWidth: Math.min(parent.width, 800)
+			implicitWidth: Math.max(Math.min(parent.width, 800), Config.sidebar.sizes.width)
 			clip: true
 
-			onImplicitWidthChanged: console.log(implicitWidth)
+			onLoadingChanged: if (!loading)
+				root.chatOpen = true
 		}
 
 		ColumnLayout {
@@ -102,6 +154,12 @@ RowLayout {
 		}
 	}
 
+	Binding {
+		target: ChatState
+		property: "windowIsWide"
+		value: root.showList
+	}
+
 	Component {
 		id: conversationView