chore: restructure llm plugin to be more coherent & fix various bugs in llm ui

Modules/Notifications/Sidebar/Chat/ChatList.qml

@@ -5,6 +5,7 @@ import QtQuick
 import QtQuick.Layouts
 import ZShell.Llm
 import ZShell.Config
+import qs.Modules.Notifications.Sidebar.Chat.Content
 import qs.Services
 import qs.Components
 
@@ -21,8 +22,13 @@ Item {
 	signal loadChatRequest(content: ChatSession, index: int)
 	signal newChatRequest
 
+	onSlimChanged: {
+		if (slim)
+			modelsContainer.open = false;
+	}
+
 	CustomText {
-		id: header
+		id: chatHeader
 
 		anchors.left: parent.left
 		anchors.margins: Tokens.padding.extraSmall
@@ -41,7 +47,7 @@ Item {
 		anchors.bottom: modelsContainer.top
 		anchors.left: parent.left
 		anchors.right: parent.right
-		anchors.top: header.bottom
+		anchors.top: chatHeader.bottom
 		anchors.topMargin: Tokens.spacing.medium
 		clip: true
 		spacing: Tokens.spacing.medium
@@ -98,156 +104,24 @@ Item {
 		}
 	}
 
-	CustomClippingRect {
+	ModelsContainer {
 		id: modelsContainer
 
-		property bool expanded: false
-
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.right: fabRoot.left
 		anchors.margins: Tokens.padding.small
 		anchors.rightMargin: Tokens.spacing.small
 
-		implicitHeight: expanded ? 400 : fabRoot.implicitHeight
-		radius: modelLayer.pressed ? Tokens.rounding.small : modelName.implicitHeight / 2
+		rootParent: root
+		fabRoot: fabRoot
 
-		function prettyModelName(): string {
-			if (modelsList.count < 1)
-				return qsTr("No models found");
+		opacity: root.slim ? 0 : 1
+		visible: opacity > 0
 
-			const pathList = Chat.model.split("\/");
-			const name = pathList[pathList.length - 1];
-
-			if (!name)
-				return qsTr("No model selected");
-
-			return name;
-		}
-
-		Behavior on implicitHeight {
-			Anim {}
-		}
-
-		Behavior on radius {
-			Anim {}
-		}
-
-		Item {
-			id: modelName
-			anchors.left: parent.left
-			anchors.right: parent.right
-			anchors.top: parent.top
-			implicitHeight: fabRoot.implicitHeight
-
-			CustomText {
-				id: label
-				text: modelsContainer.prettyModelName()
-				color: Colors.palette.m3onSurfaceVariant
-				anchors.left: parent.left
-				anchors.leftMargin: Tokens.padding.large
-				anchors.verticalCenter: parent.verticalCenter
-			}
-
-			MaterialIcon {
-				color: Colors.palette.m3onSurfaceVariant
-				anchors.right: parent.right
-				anchors.rightMargin: Tokens.padding.large
-				anchors.verticalCenter: parent.verticalCenter
-				text: modelsContainer.expanded ? "unfold_less" : "unfold_more"
-				animate: true
-				fontStyle: Tokens.font.icon.large
-				visible: modelsList.count > 0
-			}
-
-			StateLayer {
-				id: modelLayer
-				enabled: modelsList.count > 0
-
-				onClicked: {
-					ChatState.fabExpanded = false;
-					modelsContainer.expanded = !modelsContainer.expanded;
-				}
-				radius: modelsContainer.radius
-			}
-		}
-
-		VerticalFadeListView {
-			id: modelsList
-
-			anchors.left: parent.left
-			anchors.right: parent.right
-			anchors.bottom: parent.bottom
-			anchors.top: modelName.bottom
-			anchors.margins: Tokens.padding.medium
-			anchors.topMargin: Tokens.spacing.medium
-			model: Chat.availableModels
-			opacity: modelsContainer.expanded ? 1 : 0
-			currentIndex: Chat.availableModels.indexOf(Chat.model)
-			visible: opacity > 0
-
-			Behavior on opacity {
-				Anim {}
-			}
-
-			CustomScrollBar.vertical: CustomScrollBar {
-				flickable: modelsList
-			}
-
-			delegate: CustomRect {
-				id: model
-
-				required property var modelData
-				required property int index
-				readonly property bool selected: model.ListView.view.currentIndex === model.index
-
-				implicitWidth: ListView.view.width
-				implicitHeight: layout.implicitHeight + Tokens.padding.small * 2
-				radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.largeIncreased : Tokens.rounding.medium
-				color: Qt.alpha(Colors.palette.m3tertiaryContainer, selected ? 1 : 0)
-
-				Behavior on radius {
-					Anim {
-						type: Anim.SlowEffects
-					}
-				}
-
-				RowLayout {
-					id: layout
-
-					anchors.fill: parent
-					anchors.margins: Tokens.padding.small
-					anchors.leftMargin: Tokens.padding.large
-					anchors.rightMargin: Tokens.padding.large
-
-					CustomText {
-						text: model.modelData
-						color: model.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
-					}
-
-					MaterialIcon {
-						Layout.alignment: Qt.AlignRight
-						visible: model.selected
-						color: Colors.palette.m3onTertiaryContainer
-						fontStyle: Tokens.font.icon.normal
-						opacity: model.selected ? 1 : 0
-						text: "check"
-
-						Behavior on opacity {
-							Anim {
-								type: Anim.SlowEffects
-							}
-						}
-					}
-				}
-
-				StateLayer {
-					id: stateLayer
-
-					onClicked: {
-						Chat.selectModel(model.modelData);
-					}
-				}
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
 			}
 		}
 	}
@@ -262,19 +136,11 @@ Item {
 		font.pointSize: Math.round(18 * 1.2)
 		icon: root.slim ? "left_panel_open" : "add"
 		isRound: ChatState.fabExpanded
-		// opacity: root.slim ? 0 : 1
-		// visible: opacity > 0
-		//
-		// Behavior on opacity {
-		// 	Anim {
-		// 		type: Anim.DefaultEffects
-		// 	}
-		// }
 
 		label.transform: Rotation {
 			origin.y: fabRoot.label.height / 2
 			origin.x: fabRoot.label.width / 2
-			angle: ChatState.fabExpanded ? 135 : 0
+			angle: ChatState.fabExpanded && (ChatState.narrowSidebarExpanded && !ChatState.isWide || !ChatState.isWindow) ? 135 : 0
 
 			Behavior on angle {
 				Anim {}
@@ -287,7 +153,6 @@ Item {
 				return;
 			}
 
-			modelsContainer.expanded = false;
 			ChatState.fabExpanded = !ChatState.fabExpanded;
 		}