zach/z-bar-qt
1
1
Fork 0
Code Issues 24 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

better scrollbar in codeblocks + enter anim for delegates

Browse Source
This commit is contained in:
zach
2026-08-27 01:47:17 +02:00
parent c33dbc147f
commit 293bf67e09
16 changed files with 458 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Notifications/Sidebar/Chat/Content/BubbleEdit.qml
+28
View File
@@ -0,0 +1,28 @@
import Quickshell
import QtQuick
import ZShell.Config
import qs.Components
import qs.Services
TextEditBase {
id: root
color: Colors.palette.m3onSurface
readOnly: true
anchors.margins: Tokens.padding.medium
textFormat: Text.MarkdownText
font.pointSize: Tokens.font.size.smaller
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
onLinkActivated: link => {
Qt.openUrlExternally(link);
}
CustomMouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: root.hoveredLink !== "" ? Qt.PointingHandCursor : Qt.IBeamCursor
preventStealing: false
hoverEnabled: true
}
}
Modules/Notifications/Sidebar/Chat/Content/CodeBlockView.qml
+39 -13
View File
@@ -1,4 +1,5 @@
import QtQuick
import QtQuick.Effects
import QtQuick.Shapes
import QtQuick.Layouts
import Quickshell
@@ -7,7 +8,7 @@ import ZShell.Llm
import qs.Components
import qs.Services
CustomClippingRect {
CustomRect {
id: root
required property string language
@@ -15,16 +16,11 @@ CustomClippingRect {
property bool copied: false
property color codeBackgroundColor: Colors.palette.m3surfaceContainerHigh
property color codeHeaderColor: Colors.palette.m3outline
// Highlighter spans for the current code; refreshed when the code or
// its language changes. Highlighting runs off the GUI thread; the
// token drops results that arrive after the code already changed.
property var codeSpans: []
property int highlightToken: 0
function refresh() {
const token = ++root.highlightToken;
codeSpans = [];
CodeHighlighter.highlight(root.code, root.language, root, token);
}
@@ -84,10 +80,14 @@ CustomClippingRect {
let pos = 0;
for (let i = 0; i < spans.length; i++) {
const span = spans[i];
if (span.start > pos)
out += escapeHtml(code.slice(pos, span.start));
out += `<font color="${roleColor(span.kind)}">` + escapeHtml(code.slice(span.start, span.start + span.length)) + "</font>";
pos = span.start + span.length;
const start = Math.min(span.start, code.length);
const end = Math.min(span.start + span.length, code.length);
if (end <= pos)
continue;
if (start > pos)
out += escapeHtml(code.slice(pos, start));
out += `<font color="${roleColor(span.kind)}">` + escapeHtml(code.slice(start, end)) + "</font>";
pos = end;
}
if (pos < code.length)
out += escapeHtml(code.slice(pos));
@@ -100,7 +100,10 @@ CustomClippingRect {
color: root.codeBackgroundColor
radius: Tokens.rounding.medium
onLanguageChanged: refresh()
onLanguageChanged: {
codeSpans = [];
refresh();
}
onCodeChanged: refresh()
RowLayout {
@@ -212,7 +215,7 @@ CustomClippingRect {
}
}
CustomRect {
CustomClippingRect {
id: codeRect
anchors.left: parent.left
@@ -226,6 +229,21 @@ CustomClippingRect {
implicitHeight: codeText.implicitHeight + codeFlick.anchors.margins * 2
color: CodeColors.active.bg
CustomText {
id: code
anchors.top: parent.top
anchors.bottom: parent.bottom
x: implicitWidth * (0 - codeFlick.visibleArea.xPosition) + Tokens.padding.small
anchors.margins: Tokens.padding.small
text: root.highlightedHtml(root.code, root.codeSpans)
textFormat: Text.RichText
color: CodeColors.active.normal
layer.enabled: true
clip: false
font.family: Config.appearance.font.family.mono
font.pointSize: Tokens.font.size.small
}
Flickable {
id: codeFlick
@@ -234,15 +252,23 @@ CustomClippingRect {
CustomScrollBar.horizontal: CustomScrollBar {
flickable: codeFlick
parent: codeFlick.parent
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
}
TextAreaBase.flickable: TextAreaBase {
id: codeText
color: CodeColors.active.normal
layer.enabled: true
leftInset: Tokens.padding.small
clip: false
font.family: Config.appearance.font.family.mono
font.pointSize: Tokens.font.size.small
textFormat: Text.RichText
text: root.highlightedHtml(root.code, root.codeSpans)
text: code.text
readOnly: true
}
}
Modules/Notifications/Sidebar/Chat/Content/ContentBubble.qml
+21 -14
View File
@@ -24,7 +24,7 @@ Item {
implicitHeight: bubble.implicitHeight + actionsRow.implicitHeight + actionsRow.anchors.topMargin
CustomRect {
CustomClippingRect {
id: bubble
radius: Tokens.rounding.medium
@@ -33,16 +33,21 @@ Item {
implicitHeight: root.isUser ? msgText.contentHeight + Tokens.padding.medium * 2 : blocks.implicitHeight + blocks.anchors.topMargin * 2
anchors.right: root.isUser ? parent.right : undefined
Behavior on implicitHeight {
// enabled: root.segment.running
Anim {}
}
// Behavior on implicitHeight {
// enabled: !root.segment.running
//
// Anim {
// type: Anim.DefaultEffects
// }
// }
// User messages stay a plain editable text field.
TextEditBase {
id: msgText
property string cachedText: root.segment.text
property bool cancelled: false
visible: root.isUser
anchors.left: parent.left
anchors.margins: Tokens.padding.medium
@@ -65,27 +70,29 @@ Item {
event.accepted = true;
}
} else if (event.key == Qt.Key_Escape) {
text = root.segment.text;
cancelled = true;
readOnly = true;
event.accepted = true;
}
}
onEditingFinished: {
const old = root.segment.text;
if (old !== text)
root.edit(text);
readOnly = true;
}
onReadOnlyChanged: {
if (readOnly) {
animateCursor = false;
root.forceActiveFocus();
textFormat = CustomText.MarkdownText;
if (cancelled) {
text = cachedText;
cancelled = false;
return;
}
root.edit(text);
} else {
var raw = root.segment.text;
textFormat = CustomText.PlainText;
text = raw;
text = cachedText;
forceActiveFocus();
cursorPosition = text.length;
animateCursor = true;
Modules/Notifications/Sidebar/Chat/Content/MarkdownBlocks.qml
+9 -10
View File
@@ -1,4 +1,5 @@
import QtQuick
import Quickshell
import ZShell.Config
import ZShell.Llm
import qs.Components
@@ -7,7 +8,6 @@ import qs.Services
Column {
id: root
// Top-level markdown blocks (see MarkdownParser / LlmSegment.markdown).
required property var blocks
spacing: Tokens.spacing.small
@@ -15,8 +15,10 @@ Column {
Repeater {
id: blockRep
model: root.blocks
model: ScriptModel {
values: root.blocks
objectProp: "id"
}
delegate: DelegateChooser {
role: "type"
@@ -50,7 +52,7 @@ Column {
DelegateChoice {
roleValue: LlmMarkdown.Type.Heading
delegate: CustomText {
delegate: TextEditBase {
required property var modelData
color: Colors.palette.m3onSurface
@@ -59,10 +61,11 @@ Column {
anchors.margins: Tokens.padding.medium
text: modelData.text
textFormat: Text.MarkdownText
readOnly: true
font.bold: true
font.pointSize: {
if (modelData.level <= 1)
return Tokens.font.size.larger;
return Tokens.font.size.large;
if (modelData.level === 2)
return Tokens.font.size.normal;
return Tokens.font.size.smaller;
@@ -74,17 +77,13 @@ Column {
DelegateChoice {
roleValue: LlmMarkdown.Type.Text
delegate: CustomText {
delegate: BubbleEdit {
required property var modelData
color: Colors.palette.m3onSurface
anchors.right: parent.right
anchors.left: parent.left
anchors.margins: Tokens.padding.medium
text: modelData.text
textFormat: Text.MarkdownText
font.pointSize: Tokens.font.size.smaller
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
}
}
Modules/Notifications/Sidebar/Chat/Content/MessageDelegate.qml
+12 -32
View File
@@ -83,8 +83,9 @@ MouseArea {
Anim {
target: root
property: "x"
to: changeAnim.next ? -root.width / 2 : root.width / 2
to: changeAnim.next ? root.width / 4 : -root.width / 4
from: 0
type: Anim.FastEffects
}
Anim {
@@ -92,6 +93,7 @@ MouseArea {
property: "opacity"
from: 1
to: 0
type: Anim.FastEffects
}
}
@@ -101,7 +103,8 @@ MouseArea {
Anim {
target: root
property: "x"
from: changeAnim.next ? root.width / 2 : -root.width / 2
from: changeAnim.next ? -root.width / 4 : root.width / 4
type: Anim.FastEffects
to: 0
}
@@ -109,30 +112,21 @@ MouseArea {
target: root
property: "opacity"
from: 0
type: Anim.FastEffects
to: 1
}
}
}
}
// Behavior on implicitHeight {
// enabled: !root.isUser && root.current.streaming
//
// Anim {}
// }
onCurrentChanged: {
console.log(modelData.generations.indexOf(current));
Binding {
property: "contentY"
restoreMode: Binding.RestoreNone
target: root.ListView.view
value: root.y + root.height + Tokens.padding.large * 2 - root.ListView.view.height
when: root.reasoningExpanded && root.ListView.view && (root.y + root.height + Tokens.padding.large * 2 > root.ListView.view.contentY + root.ListView.view.height)
}
// Binding {
// property: "contentY"
// restoreMode: Binding.RestoreNone
// target: root.ListView.view
// value: root.y - Tokens.padding.large * 2
// when: root.reasoningExpanded && root.ListView.view && ((root.y - Tokens.padding.large * 2) < root.ListView.view.contentY)
// }
Anim {
id: restoreAnim
@@ -148,20 +142,6 @@ MouseArea {
anchors.left: parent.left
anchors.right: parent.right
// onImplicitHeightChanged: console.log("LAYOUT:", layout.implicitHeight)
// add: Transition {
// Anim {
// from: 10
// property: "y"
// }
// }
// move: Transition {
// Anim {
// property: "y"
// }
// }
Repeater {
id: segmentRep