flea-qml 0.0.0-stage → 0.2.0

package/ui/boot/Ui/OpticalGlyph.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+Item {
+  id: root
+
+  property string text: ""
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.body
+  property real paintedSize: 0
+  property color color: Commons.Color.foreground
+  property bool debugBounds: false
+
+  readonly property int renderedFontSize: Math.max(1, Math.round(fontSize))
+  readonly property real tightWidth: Math.max(1, glyphMetrics.tightBoundingRect.width)
+  readonly property real tightHeight: Math.max(1, glyphMetrics.tightBoundingRect.height)
+  readonly property real paintedScale: paintedSize > 0
+    ? Math.min(paintedSize, width, height) / Math.max(tightWidth, tightHeight)
+    : 1
+  readonly property real paintedWidth: tightWidth * paintedScale
+  readonly property real paintedHeight: tightHeight * paintedScale
+  readonly property real horizontalCorrection: glyph.implicitWidth / 2 - (glyphMetrics.tightBoundingRect.x + tightWidth / 2)
+  readonly property real paintedCenterX: glyph.x + (glyphMetrics.tightBoundingRect.x + tightWidth / 2) * paintedScale
+  readonly property real paintedCenterY: glyph.y + (glyph.baselineOffset + glyphMetrics.tightBoundingRect.y + tightHeight / 2) * paintedScale
+  readonly property real baselineY: glyph.y + glyph.baselineOffset * paintedScale
+
+  TextMetrics {
+    id: glyphMetrics
+    font.family: root.fontFamily
+    font.pixelSize: root.renderedFontSize
+    text: root.text
+  }
+
+  Text {
+    id: glyph
+    textFormat: Text.PlainText
+    // Bar icons fit their painted bounds. Text labels retain their line box.
+    x: root.width / 2 - (glyphMetrics.tightBoundingRect.x + root.tightWidth / 2) * root.paintedScale
+    y: root.paintedSize > 0
+      ? root.height / 2 - (baselineOffset + glyphMetrics.tightBoundingRect.y + root.tightHeight / 2) * root.paintedScale
+      : Math.round((root.height - height) / 2)
+    text: root.text
+    color: root.color
+    font.family: root.fontFamily
+    font.pixelSize: root.renderedFontSize
+    transformOrigin: Item.TopLeft
+    scale: root.paintedScale
+    renderType: root.paintedSize > 0 ? Text.CurveRendering : Text.NativeRendering
+  }
+
+  Rectangle {
+    visible: root.debugBounds
+    anchors.fill: parent
+    color: "transparent"
+    border.width: 1
+    border.color: "#4488ff"
+  }
+
+  Rectangle {
+    visible: root.debugBounds
+    x: 0
+    y: Math.round(root.baselineY)
+    width: parent.width
+    height: 1
+    color: "#44ff88"
+  }
+}

package/ui/boot/Ui/OverlayWindow.qml

@@ -0,0 +1,102 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import qs.Commons as Commons
+
+// Map a fresh fullscreen surface on each open. Keep its first frames
+// transparent until Qt receives the output's scale, so it opens sharp without
+// retaining a parked surface that can be closed when a monitor disconnects.
+PanelWindow {
+  id: window
+
+  // Whether the overlay is showing. Drive this instead of visible.
+  property bool shown: false
+  property int shownLayer: WlrLayer.Overlay
+  property int shownKeyboardFocus: WlrKeyboardFocus.Exclusive
+
+  property var targetScreen: null
+  readonly property var targetMonitor: {
+    var monitors = Hyprland.monitors.values
+    for (var i = 0; i < monitors.length; i++) {
+      if (targetScreen && monitors[i].name === targetScreen.name) return monitors[i]
+    }
+    return null
+  }
+
+  // Wait for fullscreen geometry as well as scale so no smaller opening frame
+  // is stretched across the output. Fractional scale uses units of 1/120;
+  // compare in those units to tolerate floating point rounding.
+  readonly property bool contentReady: shown && backingWindowVisible && !!targetScreen
+    && width === targetScreen.width && height === targetScreen.height
+    && !!targetMonitor && Math.round(devicePixelRatio * 120) === Math.round(targetMonitor.scale * 120)
+  property bool contentRevealed: false
+
+  onContentReadyChanged: {
+    contentRevealed = false
+    // Resize and scale notifications arrive while Qt is still updating the
+    // window. Reveal on the next turn, once its content layout has caught up.
+    if (contentReady) Qt.callLater(function() {
+      if (window.contentReady) window.contentRevealed = true
+    })
+  }
+
+  function focusedScreen() {
+    var monitor = Hyprland.focusedMonitor
+    var name = monitor ? String(monitor.name || "") : ""
+    for (var i = 0; i < Quickshell.screens.length; i++) {
+      if (Quickshell.screens[i].name === name) return Quickshell.screens[i]
+    }
+    return Quickshell.screens.length > 0 ? Quickshell.screens[0] : null
+  }
+
+  // Live monitor scaling does not emit a Hyprland monitor event, so its cached
+  // scale can lag behind Qt. Refresh on opening and on scale changes while open.
+  onShownChanged: {
+    targetScreen = shown ? focusedScreen() : null
+    if (shown) Hyprland.refreshMonitors()
+  }
+  onDevicePixelRatioChanged: if (shown) Hyprland.refreshMonitors()
+
+  Connections {
+    target: Quickshell
+    function onScreensChanged() {
+      if (window.shown && Quickshell.screens.indexOf(window.targetScreen) < 0) {
+        window.targetScreen = null
+        // Let the removed output finish closing its old window before mapping
+        // a replacement, rather than recreating it during Qt's teardown.
+        Qt.callLater(function() {
+          if (window.shown && !window.targetScreen) window.targetScreen = window.focusedScreen()
+        })
+      }
+    }
+  }
+
+  visible: shown && !!targetScreen && !!targetMonitor
+  screen: targetScreen
+  anchors { top: true; left: true; bottom: true; right: true }
+  color: "transparent"
+  exclusionMode: ExclusionMode.Ignore
+  WlrLayershell.layer: shownLayer
+  WlrLayershell.keyboardFocus: shownKeyboardFocus
+
+  // Opacity preserves keyboard handling while the scale arrives, including
+  // search keystrokes and Escape pressed immediately after opening.
+  Binding {
+    target: window.contentItem
+    property: "opacity"
+    value: window.contentRevealed ? 1 : 0
+  }
+
+  // Right-to-left languages read the overlay mirrored.
+  Binding {
+    target: window.contentItem
+    property: "LayoutMirroring.enabled"
+    value: Commons.I18n.rightToLeft
+  }
+  Binding {
+    target: window.contentItem
+    property: "LayoutMirroring.childrenInherit"
+    value: true
+  }
+}

package/ui/boot/Ui/Panel.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import Quickshell.Io
+import qs.Commons
+import qs.Commons as Commons
+
+// Base item for plugin popup widgets. Many first-party plugins expose a bar
+// button plus a popup from one QML entry point; this base owns the shared
+// IPC-backed open/close lifecycle while implementations own button behavior,
+// keyboard navigation, and content.
+Item {
+  id: root
+
+  property QtObject bar: null
+  property string moduleName: ""
+  property var settings: ({})
+  property string ipcTarget: ""
+  property bool manageIpc: true
+  property alias controller: panelController
+  property bool popoutSwitching: false
+  property bool popoutSwitchClosing: false
+
+  readonly property bool opened: panelController.open
+  readonly property color barForeground: bar ? bar.barForeground : Commons.Color.foreground
+
+  function open() { panelController.show() }
+  function close() { panelController.hide() }
+  function closeForPopoutSwitch() {
+    popoutSwitchClosing = true
+    close()
+    Qt.callLater(function() { popoutSwitchClosing = false })
+  }
+  function toggle() { opened ? close() : open() }
+  function switchPanel(direction) {
+    if (bar && typeof bar.switchPanelFrom === "function") return bar.switchPanelFrom(root, direction)
+    return false
+  }
+
+  // Read a single value from this panel's inline shell.json entry, with a
+  // fallback for missing/null values. Matches BarWidget.setting().
+  function setting(name, fallback) {
+    var value = settings ? settings[name] : undefined
+    return value === undefined || value === null ? fallback : value
+  }
+
+  PanelController {
+    id: panelController
+  }
+
+  ShellIpc {
+    enabled: root.manageIpc && root.ipcTarget !== ""
+    target: root.ipcTarget
+
+    function open(): void { root.open() }
+    function close(): void { root.close() }
+    function show(): void { root.open() }
+    function hide(): void { root.close() }
+    function toggle(): void { root.toggle() }
+  }
+
+}

package/ui/boot/Ui/PanelActionButton.qml

@@ -0,0 +1,105 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// Small (22×22 by default) icon button used at the right edge of panel rows
+// for inline actions — forget network, confirm passphrase, unpair device,
+// etc. Two visual modes are supported via `hoverColor`:
+//   - default: hoverColor === foreground → subtle foreground-tint hover
+//   - urgent:  hoverColor === bar.urgent → red-tint hover for destructive
+//              actions like forget/unpair
+//
+// `enabled` gates clicks and dims the icon. The component owns its own
+// hover state visuals; mouse hover does NOT update any panel cursor state
+// here because action buttons are not cursor targets — the row they live
+// in is.
+//
+// Set `focusable: true` to make the button keyboard-tabbable with the
+// shared hover-cursor/focus tokens. Use this
+// in form contexts where Tab walks a list
+// of controls; leave it false for the right-edge actions on panel rows
+// where the row's CursorSurface owns the keyboard cursor.
+//
+// Set `hasCursor: true` to have the button render the same hover state as
+// mouse hover — so a panel's keyboard cursor lands on it identically.
+// Use this when a PanelActionButton is itself the cursor target (rather
+// than living inside a CursorSurface row). Emits `hovered(bool)` on
+// pointer enter/leave so the panel can update its cursor state to match.
+BorderSurface {
+  id: root
+
+  property string iconText: ""
+  property string tooltipText: ""
+  property color foreground: Commons.Color.foreground
+  property color hoverColor: foreground
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.icon
+  // Whole and odd, so an icon glyph (usually an odd number of pixels wide)
+  // has the same space on both sides instead of one pixel more on one side.
+  property real size: Math.round(Math.max(Style.space(22), fontSize + Style.spacing.sm * 2)) | 1
+
+  property bool focusable: false
+  property bool hasCursor: false
+  property bool bordered: false
+
+  signal clicked()
+  signal hovered(bool isHovered)
+
+  activeFocusOnTab: focusable
+  Keys.onReturnPressed: if (focusable) root.clicked()
+  Keys.onEnterPressed: if (focusable) root.clicked()
+  Keys.onSpacePressed: if (focusable) root.clicked()
+
+  implicitWidth: size
+  implicitHeight: size
+  radius: Style.cornerRadius
+
+  readonly property bool _showFocusRing: focusable && activeFocus
+  readonly property bool _hot: (mouse.containsMouse || root.hasCursor) && root.enabled
+  readonly property var _borderSpec: _showFocusRing
+    ? Border.controlSpec("focus", hoverColor, hoverColor)
+    : (_hot && bordered
+      ? Border.controlSpec("hover-cursor", hoverColor, hoverColor)
+      : (bordered ? Border.controlSpec("normal", foreground, Commons.Color.accent) : Border.none()))
+
+  color: _showFocusRing
+    ? Style.focusFillFor(hoverColor, hoverColor)
+    : (_hot
+      ? Style.hoverFillFor(hoverColor, hoverColor)
+      : "transparent")
+  borderSpec: _borderSpec
+
+  Behavior on color { ColorAnimation { duration: Style.duration(60) } }
+
+  Text {
+    textFormat: Text.PlainText
+    // Snap to whole pixels so the glyph doesn't round away from the fill's center.
+    x: Math.round((root.width - width) / 2)
+    y: Math.round((root.height - height) / 2)
+    text: root.iconText
+    color: root.enabled
+      ? (root._hot ? root.hoverColor : root.foreground)
+      : Qt.darker(root.foreground, 2.0)
+    font.family: root.fontFamily
+    font.pixelSize: root.fontSize
+  }
+
+  MouseArea {
+    id: mouse
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+    enabled: root.enabled
+    onContainsMouseChanged: root.hovered(containsMouse)
+    onClicked: {
+      if (root.focusable) root.forceActiveFocus()
+      root.clicked()
+    }
+  }
+
+  PanelToolTip {
+    visible: root.tooltipText !== "" && mouse.containsMouse
+    text: root.tooltipText
+    fontFamily: root.fontFamily
+  }
+}

package/ui/boot/Ui/PanelController.qml

@@ -0,0 +1,16 @@
+import QtQuick
+// Stores the open state for a shell panel. Panel owns the public lifecycle
+// methods and IPC wiring; this object only keeps state separate from the
+// panel implementation's own properties.
+//
+// Usage:
+//   PanelController { id: panelController }
+QtObject {
+  id: root
+
+  property bool open: false
+
+  function toggle() { open = !open }
+  function show() { if (!open) open = true }
+  function hide() { open = false }
+}

package/ui/boot/Ui/PanelHero.qml

@@ -0,0 +1,112 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+Item {
+  id: root
+
+  property Component iconComponent: null
+  property string title: ""
+  property string meta: ""
+  property string detail: ""
+  property color foreground: Commons.Color.foreground
+  property string fontFamily: Style.font.family
+  property real iconSize: Style.font.display
+  property real iconOpacity: 1.0
+  property alias metaOpacity: metaText.opacity
+
+  // Optional control pinned to the trailing edge of the hero — a ToggleSwitch,
+  // a small button. The hero centers it against the labels and reserves the
+  // space itself, so callers never do the geometry.
+  property Component trailingControl: null
+
+  readonly property color dim: Qt.darker(foreground, 1.4)
+  readonly property real trailingInset: trailingLoader.item && trailingLoader.item.visible ? trailingLoader.width + Style.space(12) : 0
+
+  width: parent ? parent.width : implicitWidth
+  implicitHeight: Math.max(iconLoader.implicitHeight, heroLabels.implicitHeight, trailingLoader.implicitHeight)
+
+  Loader {
+    id: iconLoader
+    sourceComponent: root.iconComponent
+    anchors.left: parent.left
+    anchors.verticalCenter: parent.verticalCenter
+    opacity: root.iconOpacity
+  }
+
+  Column {
+    id: heroLabels
+    anchors.left: iconLoader.right
+    anchors.leftMargin: Style.space(14)
+    anchors.right: parent.right
+    anchors.rightMargin: root.trailingInset
+    anchors.verticalCenter: parent.verticalCenter
+    spacing: Style.space(2)
+
+    Row {
+      id: titleRow
+      visible: root.title !== "" || detailPill.visible
+      width: parent.width
+
+      Text {
+        textFormat: Text.PlainText
+        visible: root.title !== ""
+        text: root.title
+        width: Math.min(implicitWidth, Math.max(0, parent.width - (detailPill.visible ? detailPill.implicitWidth + Style.space(8) : 0)))
+        color: root.foreground
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.title
+        font.bold: true
+        elide: Text.ElideRight
+      }
+
+      Item {
+        width: Math.max(0, parent.width - parent.children[0].width - detailPill.implicitWidth)
+        height: 1
+      }
+
+      BorderSurface {
+        id: detailPill
+        visible: root.detail !== ""
+        implicitWidth: detailText.implicitWidth + Style.space(10)
+        implicitHeight: detailText.implicitHeight + Style.space(4)
+        anchors.verticalCenter: parent.verticalCenter
+        color: "transparent"
+        borderSpec: Border.controlSpec("normal", root.foreground, Commons.Color.accent)
+        radius: Style.cornerRadius
+
+        Text {
+          id: detailText
+          textFormat: Text.PlainText
+          anchors.centerIn: parent
+          text: root.detail
+          color: root.dim
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.body
+          font.bold: true
+        }
+      }
+    }
+
+    Text {
+      id: metaText
+      textFormat: Text.PlainText
+      width: parent.width
+      text: root.meta.toUpperCase()
+      visible: text !== ""
+      color: root.dim
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.caption
+      font.bold: true
+      font.letterSpacing: 1.2
+      elide: Text.ElideRight
+    }
+  }
+
+  Loader {
+    id: trailingLoader
+    sourceComponent: root.trailingControl
+    anchors.right: parent.right
+    anchors.verticalCenter: parent.verticalCenter
+  }
+}

package/ui/boot/Ui/PanelKeyCatcher.qml

@@ -0,0 +1,100 @@
+import QtQuick
+
+// Drop-in key dispatcher for keyboard-driven panels. Wraps panel content
+// and emits semantic signals so each panel keeps its own state machine
+// (focusSection, selectedIndex, action rules) while the boilerplate
+// key handling lives here.
+//
+// Usage:
+//   Common.KeyboardPanel {
+//     ...
+//     PanelKeyCatcher {
+//       anchors.fill: parent
+//       onMoveRequested: function(dx, dy) { root.moveCursor(dx, dy) }
+//       onActivateRequested: root.activateCursor()
+//       onCloseRequested: root.close()
+//       onDeleteRequested: root.deleteSelected()
+//       onTextKey: function(t, modifiers) { if (t === "r") root.refresh() }
+//
+//       Column { ... panel content ... }
+//     }
+//   }
+//
+// Keys.priority: Keys.BeforeItem means this handler gets keys first,
+// even when a descendant has activeFocus. That's what lets Up/Down
+// arrows drive the cursor instead of being consumed by an inner
+// Flickable's built-in scroll handling. When a panel has an inline
+// editor (wifi passphrase, gallery TextField demo) the panel must
+// set `blocked: editor.activeFocus` so this handler short-circuits
+// and the editor receives keys normally.
+//
+// blocked: when true, ALL keys are forwarded to descendants without
+// triggering signals.
+Item {
+  id: root
+
+  property bool blocked: false
+  // Panels that let items be reordered set this, and Ctrl+Up/Down (or
+  // Ctrl+k/j) then asks to move the current item instead of the cursor.
+  property bool reorderable: false
+
+  signal moveRequested(int dx, int dy)
+  signal reorderRequested(int dy)
+  signal activateRequested()
+  signal returnRequested()
+  signal closeRequested()
+  signal deleteRequested()
+  signal tabRequested(int direction)
+  // The held modifiers ride along, so a panel can tell Alt+T from T.
+  signal textKey(string text, int modifiers)
+
+  focus: true
+  Keys.priority: Keys.BeforeItem
+  Keys.onPressed: function(event) {
+    if (blocked) return
+
+    if (event.key === Qt.Key_Escape) {
+      closeRequested(); event.accepted = true; return
+    }
+    if (event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab) {
+      tabRequested((event.modifiers & Qt.ShiftModifier) || event.key === Qt.Key_Backtab ? -1 : 1)
+      event.accepted = true
+      return
+    }
+    if (reorderable && (event.modifiers & Qt.ControlModifier)) {
+      var up = event.key === Qt.Key_Up || event.key === Qt.Key_K
+      var down = event.key === Qt.Key_Down || event.key === Qt.Key_J
+      if (up || down) {
+        reorderRequested(down ? 1 : -1); event.accepted = true; return
+      }
+    }
+    if (event.key === Qt.Key_Down || event.text === "j") {
+      moveRequested(0, 1); event.accepted = true; return
+    }
+    if (event.key === Qt.Key_Up || event.text === "k") {
+      moveRequested(0, -1); event.accepted = true; return
+    }
+    // In a mirrored (right-to-left) panel, Left moves forward along a row.
+    var right = event.key === Qt.Key_Right || event.text === "l"
+    var left = event.key === Qt.Key_Left || event.text === "h"
+    if (LayoutMirroring.enabled ? left : right) {
+      moveRequested(1, 0); event.accepted = true; return
+    }
+    if (LayoutMirroring.enabled ? right : left) {
+      moveRequested(-1, 0); event.accepted = true; return
+    }
+    if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+      returnRequested()
+      activateRequested(); event.accepted = true; return
+    }
+    if (event.key === Qt.Key_Space) {
+      activateRequested(); event.accepted = true; return
+    }
+    if (event.key === Qt.Key_Delete || event.text === "x" || event.text === "X") {
+      deleteRequested(); event.accepted = true; return
+    }
+    if (event.text && event.text.length === 1) {
+      textKey(event.text, event.modifiers)
+    }
+  }
+}

package/ui/boot/Ui/PanelSectionHeader.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// Small-caps-style label that introduces a panel section ("DNS provider",
+// "Wi-Fi networks", "Output device", "Paired devices"). Sits between a
+// PanelSeparator and the content rows.
+Text {
+  id: root
+
+  property color foreground: Commons.Color.foreground
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.caption
+
+  // Callers bind `text` from outside this file, so the default has to be set
+  // here. AutoText would let a section title that happens to carry a device or
+  // network name promote itself to rich text.
+  textFormat: Text.PlainText
+  color: Qt.darker(foreground, 1.4)
+  font.family: fontFamily
+  font.pixelSize: fontSize
+  font.bold: true
+
+  // Glyphs can paint above the box Text reserves for them: JetBrainsMono Nerd
+  // Font's outlines run 10% of the em past its own ascent, and a patched or
+  // user-chosen family can be worse. That sliver is invisible in normal flow,
+  // but a header sitting at the top of a clipping list — bluetooth's device
+  // list, network's station list — loses it to the clip and renders beheaded.
+  // Reserve the overshoot here so every panel is covered at once.
+  topPadding: Math.ceil(fontSize * 0.15)
+}

package/ui/boot/Ui/PanelSeparator.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// 1px horizontal divider for panel sections. The alpha-on-foreground tint
+// keeps the rule legible against the panel background without competing
+// with text or borders.
+Rectangle {
+  id: root
+
+  property color foreground: Commons.Color.foreground
+  property real strength: 0.12
+
+  width: parent ? parent.width : implicitWidth
+  implicitWidth: 100
+  implicitHeight: 1
+  height: 1
+  color: Qt.rgba(foreground.r, foreground.g, foreground.b, strength)
+}