mirror of
https://github.com/arthur-pbty/arthur-os.git
synced 2026-08-04 20:28:23 +02:00
262 lines
9.2 KiB
QML
262 lines
9.2 KiB
QML
// Notification card. Pure presentational — no service, Notification, or
|
|
// ListModel references. The popup container drives lifetime; the history
|
|
// panel drives static rendering. Both use the same component.
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import qs.Commons
|
|
|
|
Rectangle {
|
|
id: root
|
|
|
|
property string app: ""
|
|
property string appIcon: ""
|
|
property string summary: ""
|
|
property string body: ""
|
|
property string image: ""
|
|
// Nerd Font glyph rendered in the icon slot when no real icon is set.
|
|
// Used by omarchy-notification-send so user-action toasts (`Silenced
|
|
// notifications` etc.) show their bell/lock/etc. glyph without leaking
|
|
// into the summary text.
|
|
property string glyph: ""
|
|
// NotificationUrgency: Low=0, Normal=1, Critical=2 (upstream).
|
|
property int urgency: 1
|
|
property double timestamp: 0
|
|
property int cornerRadius: 0
|
|
|
|
property real progress: 1.0
|
|
property bool showProgress: false
|
|
|
|
// System font from shell.json bar.fontFamily, injected by the container.
|
|
property string fontFamily: ""
|
|
|
|
readonly property bool hovered: hoverTracker.hovered
|
|
|
|
signal closeRequested()
|
|
signal cardClicked()
|
|
signal imageClicked()
|
|
|
|
// Media mode = the notification carries a real screenshot or screen
|
|
// recording preview. Quickshell normalizes file paths from `-i` and the
|
|
// `image-path` hint into `image://icon//<absolute path>` (double slash
|
|
// marks an absolute filesystem path vs a themed icon name like
|
|
// `image://icon/firefox`).
|
|
function _imageFilePath(s) {
|
|
if (!s) return ""
|
|
if (s.indexOf("image://icon//") === 0) return s.substring("image://icon/".length)
|
|
if (s.indexOf("file://") === 0) return decodeURIComponent(s.substring(7))
|
|
return ""
|
|
}
|
|
function _isMediaFile(path) {
|
|
if (!path) return false
|
|
var lower = path.toLowerCase()
|
|
return lower.endsWith(".png") || lower.endsWith(".jpg") ||
|
|
lower.endsWith(".jpeg") || lower.endsWith(".webp") ||
|
|
lower.endsWith(".gif")
|
|
}
|
|
readonly property string mediaImageSource: ""
|
|
readonly property bool mediaMode: false
|
|
// Use only what the notification explicitly carries — no themed-icon
|
|
// theme-lookup fallback because Quickshell's icon image provider returns
|
|
// a placeholder for missing names (rather than erroring), which means
|
|
// we'd render Qt's pink "broken image" pattern for any unknown app.
|
|
// Apps that send their own icon via `image` (image-data hint) or
|
|
// `appIcon` (-i flag) still get one.
|
|
readonly property string smallIconSource: image.length > 0 ? image : appIcon
|
|
readonly property bool hasGlyph: glyph.length > 0
|
|
readonly property bool hasSmallIcon: !mediaMode && (smallIconSource.length > 0 || hasGlyph)
|
|
readonly property bool chromiumDerived: {
|
|
var source = (app + "\n" + appIcon).toLowerCase()
|
|
return source.indexOf("chrom") >= 0 || source.indexOf("brave") >= 0 ||
|
|
source.indexOf("vivaldi") >= 0 || source.indexOf("microsoft-edge") >= 0 ||
|
|
source.indexOf("opera") >= 0
|
|
}
|
|
readonly property string sanitizedBody: sanitizeBody(body)
|
|
|
|
readonly property color dimColor: Qt.darker(Color.notifications.text, 1.4)
|
|
readonly property color bodyColor: Qt.darker(Color.notifications.text, 1.15)
|
|
readonly property color hoverColor: Qt.rgba(Color.notifications.text.r, Color.notifications.text.g, Color.notifications.text.b, 0.14)
|
|
readonly property color accentColor: urgency === 2 ? Color.urgent : (urgency === 0 ? dimColor : Color.notifications.countdown)
|
|
|
|
function sanitizeBody(s) {
|
|
var text = String(s).replace(/<img[^>]*>/gi, "")
|
|
if (!chromiumDerived) return text
|
|
|
|
// Chromium web notifications often prefix the body with the sending
|
|
// origin, sometimes as a hyperlink. The browser icon already identifies
|
|
// the source, so drop only that leading URL/domain.
|
|
return text
|
|
.replace(/^\s*<a\b[^>]*>\s*(?:https?:\/\/|www\.)?(?:[a-z0-9-]+\.)+[a-z]{2,}(?::\d+)?(?:\/[^<\s]*)?\s*<\/a>\s*/i, "")
|
|
.replace(/^\s*(?:https?:\/\/|www\.)?(?:[a-z0-9-]+\.)+[a-z]{2,}(?::\d+)?(?:\/\S*)?\s+/i, "")
|
|
}
|
|
|
|
implicitWidth: 380
|
|
// Add 2 * border.width so mainColumn (inset by border.width on top/left/right)
|
|
// doesn't push content under the bottom edge. The bottom edge is also inset
|
|
// for symmetry except when the progress bar replaces it.
|
|
implicitHeight: mainColumn.implicitHeight + border.width * 2
|
|
radius: cornerRadius
|
|
color: Color.notifications.background
|
|
border.color: urgency === 2 ? Color.urgent : Color.notifications.border
|
|
border.width: 2
|
|
clip: true
|
|
|
|
HoverHandler { id: hoverTracker }
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: root.cardClicked()
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: mainColumn
|
|
// Inset by the card border so the hero image (and the text row) don't
|
|
// paint over the card's outer border. Without this the left/right/top
|
|
// border is invisible under the image.
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.topMargin: root.border.width
|
|
anchors.leftMargin: root.border.width
|
|
anchors.rightMargin: root.border.width
|
|
spacing: 0
|
|
|
|
// Hero image strip (media notifications only). PreserveAspectCrop so
|
|
// the preview looks like a clean banner without dark letterboxing.
|
|
Item {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 140
|
|
visible: root.mediaMode
|
|
clip: true
|
|
|
|
Image {
|
|
anchors.fill: parent
|
|
source: root.mediaImageSource
|
|
fillMode: Image.PreserveAspectCrop
|
|
sourceSize.width: width > 0 ? width * Screen.devicePixelRatio : 0
|
|
sourceSize.height: height > 0 ? height * Screen.devicePixelRatio : 0
|
|
asynchronous: true
|
|
smooth: true
|
|
cache: false
|
|
}
|
|
|
|
// Bottom divider matching the card border so the screenshot is
|
|
// visually framed on every side (card border wraps top/left/right;
|
|
// this line completes the bottom).
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
height: root.border.width
|
|
color: root.urgency === 2 ? Color.urgent : Color.notifications.border
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: root.imageClicked()
|
|
}
|
|
|
|
}
|
|
|
|
// Text content. Always rendered — for media notifications this carries
|
|
// the summary/body ("Screenshot saved" etc) under the hero image.
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.leftMargin: 12
|
|
Layout.rightMargin: 12
|
|
Layout.topMargin: 10
|
|
Layout.bottomMargin: 10
|
|
spacing: 12
|
|
|
|
Item {
|
|
id: smallIconSlot
|
|
Layout.preferredWidth: 40
|
|
Layout.preferredHeight: 40
|
|
Layout.alignment: Qt.AlignVCenter
|
|
// Hide the slot when the icon failed to resolve (themed-icon name
|
|
// not in the user's icon theme) AND we don't have a glyph fallback
|
|
// — prevents rendering Qt's pink broken-image placeholder.
|
|
visible: root.hasSmallIcon && (root.hasGlyph || smallIconImage.status !== Image.Error)
|
|
|
|
Image {
|
|
id: smallIconImage
|
|
anchors.fill: parent
|
|
source: root.smallIconSource
|
|
sourceSize.width: 40 * Screen.devicePixelRatio
|
|
sourceSize.height: 40 * Screen.devicePixelRatio
|
|
fillMode: Image.PreserveAspectFit
|
|
asynchronous: true
|
|
smooth: true
|
|
visible: !root.hasGlyph || smallIconImage.status === Image.Ready
|
|
}
|
|
|
|
// Glyph fallback (Nerd Font character) when no image icon is
|
|
// available. Used by omarchy-notification-send's `-g` flag.
|
|
Text {
|
|
anchors.centerIn: parent
|
|
visible: root.hasGlyph && smallIconImage.status !== Image.Ready
|
|
text: root.glyph
|
|
color: Color.notifications.text
|
|
font.family: root.fontFamily
|
|
font.pixelSize: 18
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignVCenter
|
|
spacing: 2
|
|
|
|
Text {
|
|
Layout.fillWidth: true
|
|
visible: root.summary.length > 0
|
|
text: root.summary
|
|
font.family: "Liberation Sans"
|
|
color: Color.notifications.text
|
|
font.pixelSize: 14
|
|
font.bold: true
|
|
wrapMode: Text.WordWrap
|
|
elide: Text.ElideRight
|
|
maximumLineCount: 2
|
|
}
|
|
|
|
Text {
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 2
|
|
visible: root.sanitizedBody.length > 0
|
|
text: root.sanitizedBody
|
|
textFormat: Text.StyledText
|
|
font.family: "Liberation Sans"
|
|
color: root.bodyColor
|
|
font.pixelSize: 14
|
|
wrapMode: Text.WordWrap
|
|
elide: Text.ElideRight
|
|
maximumLineCount: 3
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Progress bar at the bottom edge. Stays visible while the container has
|
|
// a finite lifetime; freezes (doesn't decrement) when hover pauses the
|
|
// tick from the container side.
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
height: 3
|
|
color: Color.notifications.border
|
|
visible: false
|
|
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width * Math.max(0, Math.min(1, root.progress))
|
|
color: root.accentColor
|
|
}
|
|
}
|
|
}
|