flea-qml 0.0.0-stage → 0.2.0

package/ui/FlyoutFade.qml

@@ -0,0 +1,23 @@
+import QtQuick
+
+// A context menu's flyout fade, built by its first flyout; it holds the flyout's rows, place and action at their last open values while it fades out.
+QtObject {
+    id: root
+
+    required property var menu
+
+    property Reveal reveal: Reveal { target: root.menu.submenuFrameItem; shown: root.menu.submenuOpen }
+    // The rows are copied while the flyout is open, on a change of its entries or of its openness, never by a Binding: that one re-reads the emptied rows of a closing flyout before its own `when` goes false.
+    property Connections heldRows: Connections {
+        target: root.menu
+        function onSubmenuEntriesChanged() { root.holdRows() }
+        function onSubmenuOpenChanged() { root.holdRows() }
+    }
+    property Binding heldOffset: Binding { target: root.menu; property: "heldOffset"; value: root.menu.submenuOffset(); when: root.menu.submenuOpen; restoreMode: Binding.RestoreNone }
+    property Binding heldAction: Binding { target: root.menu; property: "heldAction"; value: root.menu.submenuAction(); when: root.menu.submenuOpen; restoreMode: Binding.RestoreNone }
+
+    function holdRows() {
+        if (root.menu.submenuOpen) root.menu.heldRows = root.menu.submenuEntries
+    }
+    Component.onCompleted: root.holdRows()
+}

package/ui/FontPane.qml

@@ -0,0 +1,170 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import "." as Flea
+import "js/Kinds.js" as Kinds
+import "js/Ops.js" as Ops
+
+// The font page: Quick Look's bar, the sample at three sizes and the facts line, all drawn in the frame the backend's answer lands in.
+Item {
+    id: root
+
+    property bool active: false
+    property string path: ""
+    property int size: 0
+    property var backend: null
+
+    signal closeRequested
+
+    // "loading" until the answer, "font" once the page draws, and the unsupported sentence for a font the backend refused.
+    readonly property string status: root.failed ? "This file cannot be previewed." : (root.drawn ? "font" : "loading")
+    readonly property bool drawn: root.look !== null && root.look.path === root.path
+    readonly property bool failed: root.failedPath === root.path
+    property string failedPath: ""
+    // The last good answer. A theme change asks again and the old images stay up until the new three replace them at once.
+    property var look: null
+    property int pending: 0
+    // The path the pending ask carried, so an answer is read against its own request and not the path at answer time.
+    property string pendingPath: ""
+    property string askedKey: ""
+
+    // The board's sizes before the text-size ratio, then the pixels the image is drawn with at this window's pixel ratio.
+    readonly property real ratio: Screen.devicePixelRatio
+    readonly property var physical: Kinds.SAMPLE_SIZES.map(function (px) { return Math.round(Math.round(px * Theme.sizeRatio) * root.ratio) })
+    readonly property string fg: root.hex(Theme.color.foreground)
+    // The card's own colour, so the images carry no box of another one.
+    readonly property string bg: root.hex(Theme.color.surface)
+    readonly property string askKey: root.active && root.path !== "" && root.backend !== null
+        ? [root.path, root.fg, root.bg, root.physical.join(",")].join("\n") : ""
+    readonly property string factsLine: root.drawn
+        ? Kinds.fontLine(root.look.message.family || "", root.look.message.style || "", root.size, root.look.message.glyphs || 0, Ops.pluralWord) : ""
+
+    function hex(c) {
+        return "#" + [c.r, c.g, c.b].map(function (v) { return ("0" + Math.round(v * 255).toString(16)).slice(-2) }).join("")
+    }
+    // A theme load moves the surface before the foreground, so the ask goes out once from a zero timer, never with a mixed palette.
+    onAskKeyChanged: askTimer.restart()
+
+    Timer {
+        id: askTimer
+        interval: 0
+        onTriggered: root.ask()
+    }
+
+    // The id comes from one count shared by every font pane, so an older answer is dropped even across a Loader rebuild.
+    function ask() {
+        if (root.askKey === "" || root.askKey === root.askedKey) return
+        root.askedKey = root.askKey
+        root.pending = Kinds.nextLookId()
+        root.pendingPath = root.path
+        root.backend.send({ c: "fontlook", id: root.pending, path: root.path, fg: root.fg, bg: root.bg, sizes: root.physical, text: Kinds.SAMPLE_TEXT })
+    }
+
+    Connections {
+        target: root.backend
+        function onFontLooked(message) {
+            if (message.id !== root.pending) return
+            if (message.err) {
+                root.failedPath = root.pendingPath
+                // The old page goes with a refusal, so it never draws beside the unsupported state.
+                root.look = null
+            } else {
+                root.failedPath = ""
+                root.look = { path: root.pendingPath, message: message }
+            }
+        }
+    }
+
+    // Until the answer Quick Look draws its loading state, so the bar, the images and the facts never appear apart.
+    visible: root.drawn
+
+    // No fill of its own: Quick Look's surface is already the chrome colour and rounds the corners this bar sits under.
+    Item {
+        id: bar
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: Theme.chromeHeight
+
+        Rectangle {
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: Theme.spacing.hairline
+            color: Theme.color.foreground
+            opacity: 0.12
+        }
+
+        Flea.Glyph {
+            id: barMark
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.spacing.rowPaddingX
+            y: Math.round((parent.height - Theme.spacing.hairline - height) / 2)
+            width: Theme.chromeMarkSize
+            height: Theme.chromeMarkSize
+            name: "type"
+            color: Theme.color.foreground
+        }
+
+        // corner: a filename is arbitrary text, so PlainText, the same rule every name on this surface follows.
+        Text {
+            id: barName
+            anchors.left: barMark.right
+            anchors.leftMargin: Theme.spacing.gap
+            anchors.verticalCenter: parent.verticalCenter
+            width: Math.min(implicitWidth, Math.max(0, barClose.x - x - 2 * Theme.spacing.gap))
+            text: root.path.substring(root.path.lastIndexOf("/") + 1)
+            color: Theme.color.foreground
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.caption
+            textFormat: Text.PlainText
+            elide: Text.ElideMiddle
+        }
+
+        Flea.ChromeButton {
+            id: barClose
+            gesturePolicy: TapHandler.ReleaseWithinBounds
+            ruleRows: Theme.spacing.hairline
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.spacing.rowPaddingX
+            anchors.verticalCenter: parent.verticalCenter
+            glyph: "x"
+            accessName: "Close"
+            onActivated: root.closeRequested()
+        }
+    }
+
+    // One left-aligned column, centred between the bar and the foot, 24 px above and below and 40 px at the sides.
+    Column {
+        id: page
+        x: Math.round(40 * Theme.sizeRatio)
+        width: parent.width - 2 * x
+        y: bar.height + Math.max(Math.round(24 * Theme.sizeRatio), Math.round((parent.height - bar.height - height) / 2))
+        spacing: Math.round(18 * Theme.sizeRatio)
+
+        Repeater {
+            model: root.drawn ? Kinds.SAMPLE_SIZES.length : 0
+            // Drawn at its logical size from its own pixels, so a fractional pixel ratio leaves it unscaled.
+            Image {
+                id: sample
+                required property int index
+                source: "file://" + root.look.message.files[sample.index]
+                width: sample.implicitWidth / root.ratio
+                height: sample.implicitHeight / root.ratio
+                fillMode: Image.Pad
+                smooth: false
+                cache: false
+            }
+        }
+
+        Text {
+            width: parent.width
+            text: root.factsLine
+            color: Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.caption
+            font.features: { "tnum": 1 }
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+        }
+    }
+}

package/ui/Glass.qml

@@ -0,0 +1,114 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Commons
+import qs.Commons as Commons
+import "js/Material.js" as Material
+
+// shell.toml's [flea] background-alpha through Omarchy's reader, and Omarchy's Window Transparency mode: one plane per pixel, content opaque; AGENTS.md "Theme roles and sources".
+QtObject {
+    id: root
+
+    readonly property string key: "flea.background-alpha"
+    // Pick candidate A: match Nautilus's 0.75 ground, lifting text rather than fading it like window opacity does.
+    property real glassAlpha: root.mode === "glassy" && root.usesDefault ? Material.floor(Theme.color.opaquePalette, Theme.textContrast) / 255 : 1
+    property bool focused: Qt.application.active
+    readonly property bool split: true
+    readonly property bool usesDefault: root.valueIn(Commons.Color.userShellValues) < 0 && root.valueIn(Commons.Color.themeShellValues) < 0
+    // "opaque", "glassy" or "transparent" (Omarchy's default), read from its toggle files by reread().
+    property string mode: "transparent"
+    property bool hasOpaque: false
+    property bool hasGlassy: false
+    // Set once by launch(), before the window exists, because a Wayland surface's format is fixed at creation.
+    property bool clear: false
+    // In whole 8-bit steps, so a value that rounds to 1 is 1; a launch a [flea] value pins opaque holds 1 until the next launch.
+    readonly property real alpha: root.clear ? root.stepped(root.wanted()) : 1
+    // False keeps every plane on its own opaque role, so a stock theme draws exactly what it drew before.
+    readonly property bool on: root.alpha < 1
+    readonly property color background: root.on ? Util.alpha(Theme.color.background, root.alpha) : Theme.color.background
+    readonly property color surface: root.on ? Util.alpha(Theme.color.surface, root.alpha) : Theme.color.surface
+    readonly property real listAlpha: root.on && root.usesDefault && root.mode === "glassy" && root.split ? Math.max(root.alpha, Material.listFloor(Theme.color.opaquePalette, Theme.textContrast) / 255) : root.alpha
+    readonly property color listBackground: root.on ? Util.alpha(Theme.color.background, root.listAlpha) : Theme.color.background
+
+    readonly property string toggleDir: (Quickshell.env("XDG_STATE_HOME") || Quickshell.env("HOME") + "/.local/state") + "/omarchy/toggles/hypr"
+    // A file test and not omarchy-hyprland-window-transparency, which needs OMARCHY_PATH that ssh and some launchers lack.
+    property FileView opaqueFile: FileView {
+        path: root.toggleDir + "/window-opaque.lua"
+        printErrors: false
+        onLoaded: root.hasOpaque = true
+        onLoadFailed: root.hasOpaque = false
+    }
+    property FileView glassyFile: FileView {
+        path: root.toggleDir + "/window-glassy.lua"
+        printErrors: false
+        onLoaded: root.hasGlassy = true
+        onLoadFailed: root.hasGlassy = false
+    }
+    // Hyprland reloads its config for a Window Transparency change, with no theme switch.
+    property Connections reloads: Connections {
+        target: Theme
+        function onConfigReloaded() { root.reread(); root.retag() }
+        function onFleaWindowOpened() { root.startTagger() }
+    }
+    // Only inside Hyprland, as ui/Theme.qml's event hookup: a headless run has no compositor to ask.
+    readonly property bool inHyprland: Quickshell.env("HYPRLAND_INSTANCE_SIGNATURE") !== null
+    // ui/GlassTagger.qml, made when Hyprland opens the first Flea window, so it costs nothing before the first rows.
+    property QtObject tagger: null
+    onModeChanged: root.retag()
+    onUsesDefaultChanged: root.retag()
+
+    // Sample input: 0.34 answers 87/255, 0.999 answers 1.
+    function stepped(value) { return Math.round(value * 255) / 255 }
+
+    // One shell.toml's value: -1 when it sets none, the clamped number, or 1 for what is not a number.
+    function valueIn(values) {
+        var v = values ? values[root.key] : undefined
+        if (typeof v !== "string" || v.length === 0) return -1
+        var n = Number(v)
+        return isFinite(n) ? Util.clampAlpha(n) : 1
+    }
+    // User and theme values keep their precedence; bare Transparent is opaque: no shipped theme sets an opacity of its own, and no toggle file means transparency was never chosen.
+    function wanted() {
+        var user = root.valueIn(Commons.Color.userShellValues)
+        if (user >= 0) return user
+        if (root.mode === "opaque") return 1
+        var theme = root.valueIn(Commons.Color.themeShellValues)
+        if (theme >= 0) return theme
+        return root.mode === "glassy" ? root.glassAlpha : 1
+    }
+
+    function reread() {
+        root.opaqueFile.reload()
+        root.glassyFile.reload()
+        root.opaqueFile.waitForJob()
+        root.glassyFile.waitForJob()
+        root.mode = root.hasGlassy ? "glassy" : root.hasOpaque ? "opaque" : "transparent"
+    }
+
+    // A [flea] value that pins 1 keeps an opaque surface; every other launch is made clear, so each Window Transparency switch shows live.
+    function pinsOpaque() {
+        var user = root.valueIn(Commons.Color.userShellValues)
+        if (user >= 0) return root.stepped(user) >= 1
+        var theme = root.valueIn(Commons.Color.themeShellValues)
+        return theme >= 0 && root.stepped(theme) >= 1
+    }
+
+    // Color's two shell readers load asynchronously; waiting here lands both before the decision.
+    function launch() {
+        Commons.Color.shellFile.waitForJob()
+        Commons.Color.userShellFile.waitForJob()
+        root.reread()
+        root.clear = !root.pinsOpaque()
+    }
+
+    function startTagger() {
+        if (!root.inHyprland) return
+        if (!root.tagger) root.tagger = Qt.createComponent("GlassTagger.qml").createObject(root, {
+            mode: Qt.binding(function () { return root.mode }),
+            usesDefault: Qt.binding(function () { return root.usesDefault })
+        })
+        root.retag()
+    }
+    function retag() { if (root.tagger) root.tagger.retag() }
+}

package/ui/GlassTagger.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import "js/GlassTag.js" as GlassTag
+
+// Omarchy's Transparent mode is Hyprland's to draw: a Flea window Hyprland leaves at 1 takes the transparency hotkey's tag, so no alpha stacks.
+// ui/Glass.qml makes this when Hyprland opens the first Flea window, after the first rows, and binds the mode to it.
+QtObject {
+    id: root
+
+    property string mode: "transparent"
+    property bool usesDefault: true
+    // The addresses this process tagged, so a tag the user set with the hotkey is never taken away.
+    property var tagged: ({})
+    // A request that lands mid-run waits this long and asks again, until every process has finished.
+    readonly property int rerunGapMs: 100
+    readonly property bool busy: root.clients.running || root.props.running || root.tags.running
+
+    property Process clients: Process {
+        command: ["hyprctl", "clients", "-j"]
+        stdout: StdioCollector {
+            waitForEnd: true
+            onStreamFinished: root.probe(GlassTag.ownAddresses(text, Quickshell.processId))
+        }
+    }
+    property Process props: Process {
+        stdout: StdioCollector {
+            waitForEnd: true
+            onStreamFinished: root.apply(text)
+        }
+    }
+    property Process tags: Process {}
+    property Timer rerun: Timer {
+        interval: root.rerunGapMs
+        onTriggered: root.retag()
+    }
+
+    function retag() {
+        if (root.busy) {
+            root.rerun.restart()
+            return
+        }
+        root.clients.running = true
+    }
+    function probe(addresses) {
+        if (addresses.length === 0)
+            return
+        root.props.command = ["sh", "-c", GlassTag.PROBE, "sh"].concat(addresses)
+        root.props.running = true
+    }
+    function apply(text) {
+        var plan = GlassTag.plan(text, root.mode, root.usesDefault, root.tagged)
+        root.tagged = plan.tagged
+        if (plan.pairs.length === 0)
+            return
+        root.tags.command = ["sh", "-c", GlassTag.DISPATCH, "sh"].concat(plan.pairs)
+        root.tags.running = true
+    }
+}

package/ui/Glyph.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Commons
+import "js/Icons.js" as Icons
+
+// One row or sidebar mark, chosen by name. Lucide's grid is 24 units at stroke 2, scaled to the slot.
+Item {
+    id: root
+
+    property string name: "file"
+    property color color: "transparent"
+    // Lucide draws on a 24 unit grid, so every path in Icons.js is in those units.
+    readonly property real grid: 24
+    // The mark's ceiling. Default is the row and menu mark; a surface drawing a mark alone passes its own.
+    property real maxSize: Theme.markSize
+    // The min() against the slot is the icon spec's own rule, so a smaller caller slot still wins
+    // (the Network "+" at the caption token needs it) and no container can ever enlarge a mark.
+    readonly property real markSize: Math.min(root.maxSize, root.width, root.height)
+    // Its own name: "scale" would shadow Item.scale, which qmllint flagged.
+    readonly property real gridScale: root.markSize / root.grid
+    property real strokeWidth: Theme.strokeWidth
+    // The solid part of the mark (Icons.js FILLED), empty for every mark but the few that have one.
+    readonly property string filledPath: Icons.filledPathFor(root.name)
+    // Built the first time a mark names a solid part: a plain glyph owns no object for it, which tests/rowcost.qml counts.
+    property Item solid: null
+    function syncSolid() {
+        if (root.solid === null && root.filledPath.length > 0)
+            root.solid = Qt.createComponent("GlyphSolid.qml").createObject(root, { glyph: root })
+    }
+    // filledPath starts empty, so its first non-empty value, on a build or a reuse, lands here.
+    onFilledPathChanged: root.syncSolid()
+    // An emoji mark draws as text in the same slot; Icons.isEmoji says which a name is.
+    readonly property bool emoji: Icons.isEmoji(root.name)
+
+    Text {
+        visible: root.emoji
+        anchors.centerIn: parent
+        text: root.emoji ? root.name : ""
+        font.pixelSize: root.markSize
+    }
+
+    // The Shape is sized in grid units pre-transform; Scale's origin defaults to (0,0), so this
+    // offset is what re-centers the scaled-down box in root's slot instead of pinning it top-left.
+    Shape {
+        visible: !root.emoji
+        width: root.grid
+        height: root.grid
+        x: (root.width - root.markSize) / 2
+        y: (root.height - root.markSize) / 2
+        preferredRendererType: Shape.CurveRenderer
+        transform: Scale { xScale: root.gridScale; yScale: root.gridScale }
+
+        ShapePath {
+            strokeColor: root.color
+            fillColor: "transparent"
+            strokeWidth: root.strokeWidth
+            // The Omarchy cut: square caps and mitered joins, the edge of the brand spiral; Icons.js paths are redrawn sharp to match.
+            capStyle: ViewState.hyprlandIcons && Style.cornerRadius > 0 ? ShapePath.RoundCap : ShapePath.SquareCap
+            joinStyle: ViewState.hyprlandIcons && Style.cornerRadius > 0 ? ShapePath.RoundJoin : ShapePath.MiterJoin
+            // A mark with more than one stroke is one multi-subpath SVG string; see Icons.js "Lucide path data".
+            PathSvg { path: Icons.pathFor(root.name) }
+        }
+    }
+}

package/ui/GlyphSolid.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Shapes
+
+// The solid part of a mark, drawn over its stroke in the same ink; ui/Glyph.qml builds it only for a mark that names one.
+Shape {
+    id: root
+
+    required property Glyph glyph
+
+    width: root.glyph.grid
+    height: root.glyph.grid
+    x: (root.glyph.width - root.glyph.markSize) / 2
+    y: (root.glyph.height - root.glyph.markSize) / 2
+    preferredRendererType: Shape.CurveRenderer
+    transform: Scale { xScale: root.glyph.gridScale; yScale: root.glyph.gridScale }
+
+    ShapePath {
+        strokeColor: "transparent"
+        fillColor: root.glyph.color
+        PathSvg { path: root.glyph.filledPath }
+    }
+}