z-bar-qt/Modules/Notifications/Sidebar/Content.qml

pragma ComponentBehavior: Bound

import ZShell.Config
import ZShell.Llm
import QtQuick
import QtQuick.Layouts
import qs.Components
import qs.Modules.Notifications.Sidebar.Chat
import qs.Services

Item {
	id: root

	required property ScreenState screenState

	Connections {
		function onIsWindowChanged(): void {
			if (ChatState.isWindow)
				root.screenState.sidebarTab = 0;
		}

		target: ChatState
	}

	ColumnLayout {
		id: layout

		anchors.fill: parent
		spacing: Tokens.spacing.small

		Tabs {
			Layout.fillWidth: true
			Layout.preferredHeight: ChatState.isWindow || !Config.llm.enabled ? 0 : implicitHeight
			screenState: root.screenState
			nonAnimWidth: layout.width
			visible: height > 0
		}

		Item {
			Layout.fillHeight: true
			Layout.fillWidth: true
			clip: true

			Item {
				id: pages

				anchors.bottom: parent.bottom
				anchors.top: parent.top
				implicitWidth: parent.width
				opacity: root.screenState.sidebarTab === 0 ? 1 : 0
				visible: opacity > 0
				x: root.screenState.sidebarTab === 0 ? 0 : -root.width

				Behavior on opacity {
					Anim {}
				}
				Behavior on x {
					Anim {}
				}

				CustomRect {
					id: bg
					anchors.fill: parent
					color: Colors.tPalette.m3surfaceContainerLow
					radius: Tokens.rounding.small

					NotifDock {
						screenState: root.screenState
					}
				}
			}

			Loader {
				id: chatLoader

				anchors.bottom: parent.bottom
				anchors.top: parent.top
				active: Config.llm.enabled
				width: parent.width
				property bool tre: true

				sourceComponent: Item {
					id: chatPage

					opacity: root.screenState.sidebarTab === 1 ? 1 : 0
					visible: opacity > 0
					x: root.screenState.sidebarTab === 0 ? root.width : 0
					z: 1

					Behavior on opacity {
						Anim {}
					}

					Behavior on x {
						Anim {}
					}

					CustomRect {
						anchors.fill: parent
						color: Colors.tPalette.m3surfaceContainerLow
						radius: Tokens.rounding.large

						ChatPanel {
							anchors.fill: parent
						}

						GeminiGlow {
							innerGlow: 50
							z: 5
							opacity: LlmClient.busy ? 1.0 : 0.0
							glowSize: 0
							visible: opacity > 0 && !ChatState.isWindow

							layer.enabled: true
							layer.effect: OpacityMask {
								maskSource: fadeMask
							}

							Behavior on opacity {
								Anim {
									type: Anim.DefaultEffects
								}
							}
						}

						Rectangle {
							id: fadeMask

							readonly property real fadeStartPos: {
								const h = Math.max(1, height);
								const nh = (h - h / 3) / h;
								return nh;
							}

							anchors.fill: parent
							layer.enabled: true
							visible: false

							gradient: Gradient {
								orientation: Gradient.Vertical

								GradientStop {
									color: Qt.rgba(0, 0, 0, 0)
									position: 0
								}

								GradientStop {
									color: Qt.rgba(0, 0, 0, 0)
									position: fadeMask.fadeStartPos
								}

								GradientStop {
									color: Qt.rgba(0, 0, 0, 1.0)
									position: 1.0
								}
							}
						}
					}
				}
			}
		}

		CustomRect {
			Layout.fillWidth: true
			Layout.topMargin: Tokens.padding.small - layout.spacing
			color: Colors.tPalette.m3outlineVariant
			implicitHeight: 1
		}
	}
}