Panel wächst in die Breite, Menüleiste wird schmaler

Das Raster ist weg. Widgets stehen nebeneinander, alle gleich groß, in
der Reihenfolge aus den Einstellungen. Das Panel sitzt am oberen Rand —
nach unten zu wachsen bedeckt den Bildschirm, nach rechts und links legt
es sich in den ohnehin leeren Streifen neben der Notch. Eine zweite Reihe
entsteht erst, wenn der Bildschirm keine weitere Kachel mehr hergibt.

Die Größenauswahl fällt damit weg, und das ist kein Verlust: ein 2×1
neben einem 2×2 lässt oben rechts eine Lücke, die niemand füllen kann und
die aussieht wie ein Fehler. Genau daher kam auch die Überlappung. Ein
Test prüft jetzt für ein bis zwölf Kacheln, dass sich keine zwei
schneiden und alle vollständig im Panel liegen — außerhalb heißt oben:
hinter der Notch. Kacheln werden zusätzlich beschnitten, damit
überquellender Inhalt nicht über den Nachbarn zeichnet.

Der Kalender wählt jetzt zwischen Monatsraster und Terminliste. Das war
vorher an die Kachelgröße gekoppelt und ist in Wahrheit eine Frage
dessen, was man sehen will.

In der Menüleiste wird die Breite gemessen statt geschätzt. Vorher stand
je Darstellungsart eine feste Zahl im Code, großzügig gewählt — mit dem
Ergebnis, dass neben jedem Wert Platz für ein weiteres Symbol blieb, in
dem nichts stand. Gemessen wird die breiteste vorkommende Zeichenfolge,
nicht die gerade angezeigte, sonst springt die Leiste bei jedem Messwert.
Die Balkendarstellung bekommt ihre Breite aus der Kernzahl, die erst nach
der ersten Messung feststeht.

Popover schließen jetzt beim Klick daneben. `behavior = .transient`
genügt nicht: es greift, solange die eigene App aktiv ist, aber Onyx läuft
als .accessory und wird durch einen Klick auf ein Statuselement nicht
aktiviert. Ein Klick in ein fremdes Fenster erreichte das Popover gar
nicht. Ein globaler Beobachter sieht solche Klicks, ein lokaler die in der
eigenen App, Escape schließt ebenfalls — und es ist immer nur eines offen.

Mixer und Lüfter haben eigene Menüleistenelemente. Beides regelt man
mitten in etwas anderem; der Weg über ein Einstellungsfenster war zu weit.
Die Lüfter sind damit auch als Panel-Kachel echt statt Platzhalter.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-11 11:07:20 +02:00
parent a0342205fd
commit 93fe95827f
27 changed files with 988 additions and 535 deletions

View File

@@ -108,7 +108,20 @@ final class AppModel {
// MARK: - Widgets
var panelContentSize: CGSize { WidgetGrid.panelSize(for: layout) }
var panelContentSize: CGSize {
WidgetGrid.panelSize(for: layout, availableWidth: Self.availableWidth)
}
/// Wie breit das Panel höchstens werden darf.
///
/// Der **schmalste** aktive Bildschirm gibt den Ausschlag: dasselbe Panel
/// erscheint auf allen Displays, und eines, das auf dem Notebook über den
/// Rand ragt, wäre auf dem großen Monitor kein Trost. Der Abzug lässt Luft
/// zum Rand ein Panel, das exakt bis zur Kante geht, wirkt eingeklemmt.
static var availableWidth: CGFloat {
let narrowest = NSScreen.screens.map(\.frame.width).min() ?? 1440
return narrowest - 120
}
func isInPanel(_ widgetID: String) -> Bool {
layout.contains { $0.widgetID == widgetID }
@@ -116,19 +129,13 @@ final class AppModel {
func add(_ widget: any OnyxWidget) {
guard !isInPanel(widget.id) else { return }
let size = widget.supportedSizes.first ?? .small
layout.append(WidgetPlacement(widgetID: widget.id, size: size))
layout.append(WidgetPlacement(widgetID: widget.id))
}
func remove(_ widgetID: String) {
layout.removeAll { $0.widgetID == widgetID }
}
func setSize(_ size: WidgetSize, for widgetID: String) {
guard let index = layout.firstIndex(where: { $0.widgetID == widgetID }) else { return }
layout[index].size = size
}
func move(fromOffsets source: IndexSet, toOffset destination: Int) {
layout.move(fromOffsets: source, toOffset: destination)
}

239
Onyx/FanWidget.swift Normal file
View File

@@ -0,0 +1,239 @@
import SwiftUI
import AppKit
import OnyxDesign
import OnyxWidgetKit
import OnyxMenuBar
import OnyxHelperProtocol
/// Die Lüfter als Panel-Kachel und als Menüleistenmodul.
///
/// Beide zeigen dieselbe Ansicht auf derselben Datenquelle. Die Steuerung nur
/// in den Einstellungen zu verstecken war falsch: Lüfter regelt man, wenn es
/// gerade laut ist, und dann will man nicht erst ein Fenster suchen.
struct FanView: View {
let control: FanControl
/// Im Popover ist Platz für die Erklärung, in der Kachel nicht.
let roomy: Bool
var body: some View {
VStack(alignment: .leading, spacing: 10) {
switch control.installState {
case .installed:
if let report = control.report, !report.fans.isEmpty {
ForEach(Array(report.fans.enumerated()), id: \.offset) { index, fan in
FanRow(control: control, index: index, fan: fan, roomy: roomy)
}
if let hottest = report.hottestCelsius {
Divider().overlay(Onyx.Color.hairline)
HStack(spacing: 5) {
Image(systemName: "thermometer.medium")
.font(.system(size: 10))
Text("\(Int(hottest.rounded())) °C")
.font(Onyx.Font.metricSmall).monospacedDigit()
Spacer(minLength: 0)
}
.foregroundStyle(Onyx.Color.textTertiary)
}
} else {
notice("fans.noData", symbol: "fan")
}
case .requiresApproval:
notice("fans.approval.needed", symbol: "hand.raised") {
control.openApprovalSettings()
}
case .notInstalled:
notice("fans.notInstalled", symbol: "fan") { control.install() }
case .failed(let reason):
Text(reason)
.font(Onyx.Font.caption)
.foregroundStyle(Onyx.Color.critical)
.fixedSize(horizontal: false, vertical: true)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.onAppear { control.refreshInstallState() }
}
@ViewBuilder
private func notice(_ key: LocalizedStringKey, symbol: String,
action: (() -> Void)? = nil) -> some View {
VStack(alignment: .leading, spacing: 6) {
Image(systemName: symbol)
.font(.system(size: 15, weight: .light))
.foregroundStyle(Onyx.Color.textTertiary)
Text(key)
.font(Onyx.Font.caption)
.foregroundStyle(Onyx.Color.textSecondary)
.fixedSize(horizontal: false, vertical: true)
if let action {
Button(action: action) {
Text("fans.install")
.font(Onyx.Font.caption)
.foregroundStyle(Onyx.Color.surface)
.padding(.horizontal, 10).padding(.vertical, 4)
.background(Onyx.Color.accent, in: .capsule)
}
.buttonStyle(.plain)
}
}
}
}
private struct FanRow: View {
let control: FanControl
let index: Int
let fan: FanStatus
let roomy: Bool
var body: some View {
VStack(alignment: .leading, spacing: 4) {
HStack(spacing: 6) {
Text("fans.fan \(fan.index + 1)")
.font(Onyx.Font.caption)
.foregroundStyle(Onyx.Color.textSecondary)
.lineLimit(1)
Spacer(minLength: 4)
Text("\(Int(fan.currentRPM)) U/min")
.font(Onyx.Font.metricSmall).monospacedDigit()
.foregroundStyle(Onyx.Color.textPrimary)
}
HStack(spacing: 6) {
// Automatik ist der Ruhezustand und bleibt einen Klick entfernt:
// wer manuell geregelt hat, muss ohne Nachdenken zurückkönnen.
Button { control.setAutomatic(index: index) } label: {
Text("fans.auto")
.font(Onyx.Font.caption)
.foregroundStyle(fan.isManual ? Onyx.Color.textTertiary
: Onyx.Color.accent)
}
.buttonStyle(.plain)
Slider(value: Binding(
get: { fan.targetRPM },
set: { control.setTarget(index: index, rpm: $0) }),
in: fan.limits.minimum...fan.limits.maximum)
.controlSize(.mini)
}
}
}
}
// MARK: - Panel-Kachel
struct FanWidget: OnyxWidget {
let id = "fans"
var displayName: String { String(localized: "widget.fans.name") }
let symbolName = "fan"
private let control: FanControl
init(control: FanControl) { self.control = control }
func makeView() -> AnyView {
AnyView(ScrollView { FanView(control: control, roomy: false) }
.scrollIndicators(.never))
}
}
// MARK: - Menüleistenmodul
@MainActor
final class FanMenuBarModule: MenuBarModule {
let id = "fans"
var displayName: String { String(localized: "widget.fans.name") }
private let control: FanControl
private var view: FanStatusView?
private var isActive = false
init(control: FanControl) { self.control = control }
func makeStatusView(presentation: MenuBarPresentation) -> NSView {
let view = FanStatusView(presentation: presentation)
view.update(rpm: control.report?.fans.map(\.currentRPM).max())
self.view = view
return view
}
func makePopoverView() -> AnyView {
AnyView(FanView(control: control, roomy: true)
.padding(14)
.frame(width: 260))
}
func activate() {
isActive = true
control.start()
startObserving()
}
func deactivate() {
isActive = false
view = nil
}
/// Keine eigene Messschleife: `FanControl` fragt den Helfer ohnehin ab, hier
/// wird nur zugehört. `withObservationTracking` meldet sich **einmal** und
/// muss danach neu eingerichtet werden.
private func startObserving() {
withObservationTracking {
_ = control.report
} onChange: {
Task { @MainActor [weak self] in
guard let self, isActive else { return }
view?.update(rpm: control.report?.fans.map(\.currentRPM).max())
startObserving()
}
}
}
}
/// Die Drehzahl in der Menüleiste.
private final class FanStatusView: NSView, WidthReporting {
private let presentation: MenuBarPresentation
private var rpm: Double?
init(presentation: MenuBarPresentation) {
self.presentation = presentation
super.init(frame: NSRect(x: 0, y: 0, width: 22, height: 22))
}
@available(*, unavailable)
required init?(coder: NSCoder) { fatalError() }
override var intrinsicContentSize: NSSize {
NSSize(width: MenuBarText.width(for: reference, includesSymbol: true), height: 22)
}
/// Die breiteste Zahl, die vorkommen kann nicht die aktuelle. Sonst
/// änderte das Element bei jeder Messung seine Breite.
private var reference: String { presentation == .symbol ? "" : "9999" }
var onWidthChange: ((CGFloat) -> Void)?
func update(rpm: Double?) {
self.rpm = rpm
needsDisplay = true
}
override func draw(_ dirtyRect: NSRect) {
let color = NSColor.labelColor
guard let image = NSImage(systemSymbolName: "fan", accessibilityDescription: nil)
else { return }
image.isTemplate = true
if presentation == .symbol {
color.set()
image.draw(in: NSRect(x: bounds.midX - 7.5, y: bounds.midY - 7.5,
width: 15, height: 15))
return
}
color.set()
image.draw(in: NSRect(x: 0, y: bounds.midY - 6.5, width: 13, height: 13))
MenuBarText.draw(rpm.map { String(Int($0.rounded())) } ?? "",
color: color,
in: NSRect(x: 15, y: 0, width: bounds.width - 15, height: bounds.height))
}
}

View File

@@ -80,6 +80,22 @@
}
}
},
"fans.fan %lld": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Lüfter %lld"
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "Fan %lld"
}
}
}
},
"fans.hottest": {
"extractionState": "stale",
"localizations": {
@@ -98,18 +114,17 @@
}
},
"fans.install": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Hilfsdienst einrichten"
"value": "Installieren"
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "Install helper"
"value": "Install"
}
}
}
@@ -179,6 +194,38 @@
}
}
},
"fans.noData": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Noch keine Lüfterdaten."
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "No fan data yet."
}
}
}
},
"fans.notInstalled": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Die Lüftersteuerung braucht einen kleinen privilegierten Dienst."
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "Fan control needs a small privileged service."
}
}
}
},
"fans.reason.noTemperature": {
"extractionState": "stale",
"localizations": {
@@ -515,6 +562,22 @@
}
}
},
"mixer.menubar.name": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Lautstärkemixer"
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "Volume mixer"
}
}
}
},
"network.name": {
"extractionState": "stale",
"localizations": {
@@ -1515,6 +1578,22 @@
}
}
},
"settings.widgets.hint.order": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Alle Kacheln sind gleich groß. Die Reihenfolge hier ist die Reihenfolge im Panel — zum Sortieren ziehen."
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "All tiles are the same size. The order here is the order in the panel — drag to sort."
}
}
}
},
"settings.widgets.inPanel": {
"extractionState": "stale",
"localizations": {
@@ -1548,6 +1627,22 @@
}
}
}
},
"widget.fans.name": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Lüfter"
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "Fans"
}
}
}
}
},
"version": "1.1"

View File

@@ -0,0 +1,108 @@
import SwiftUI
import AppKit
import AudioProvider
import OnyxMenuBar
import OnyxDesign
/// Der Lautstärkemixer als eigenes Element in der Menüleiste.
///
/// Bewusst getrennt vom Onyx-Element: den Ton einer einzelnen App leiser zu
/// drehen ist etwas, das man mitten in etwas anderem tut. Ein Umweg über ein
/// Menü und dann in ein Panel ist dafür zwei Schritte zu weit.
@MainActor
final class MixerMenuBarModule: MenuBarModule {
let id = "audio"
var displayName: String { String(localized: "mixer.menubar.name") }
private let mixer: AudioMixer
private var view: MixerStatusView?
private var isActive = false
init(mixer: AudioMixer) { self.mixer = mixer }
func makeStatusView(presentation: MenuBarPresentation) -> NSView {
let view = MixerStatusView()
view.update(isEnabled: mixer.isEnabled, managed: mixer.managed.count)
self.view = view
return view
}
func makePopoverView() -> AnyView {
AnyView(
ScrollView {
MixerView(mixer: mixer)
.padding(14)
}
.scrollIndicators(.automatic)
.frame(width: 280)
.frame(maxHeight: 420)
)
}
func activate() {
isActive = true
startObserving()
}
func deactivate() {
isActive = false
view = nil
}
/// Der Mixer misst ohnehin; hier wird nur zugehört. `withObservationTracking`
/// meldet sich einmal und muss danach neu eingerichtet werden.
private func startObserving() {
withObservationTracking {
_ = mixer.isEnabled
_ = mixer.managed
} onChange: {
Task { @MainActor [weak self] in
guard let self, isActive else { return }
view?.update(isEnabled: mixer.isEnabled, managed: mixer.managed.count)
startObserving()
}
}
}
}
/// Ein Glyph, mehr nicht.
///
/// Eine Zahl wäre hier sinnlos: welche Lautstärke" hat bei einem Mischpult
/// keine einzelne Antwort. Der Zustand, der zählt, ist ob überhaupt etwas
/// geregelt wird und den zeigt die Deckkraft.
private final class MixerStatusView: NSView {
private var isEnabled = false
private var managed = 0
init() {
super.init(frame: NSRect(x: 0, y: 0, width: MenuBarText.minimumWidth, height: 22))
}
@available(*, unavailable)
required init?(coder: NSCoder) { fatalError() }
override var intrinsicContentSize: NSSize {
NSSize(width: MenuBarText.minimumWidth, height: 22)
}
func update(isEnabled: Bool, managed: Int) {
self.isEnabled = isEnabled
self.managed = managed
needsDisplay = true
}
override func draw(_ dirtyRect: NSRect) {
guard let image = NSImage(systemSymbolName: "slider.horizontal.3",
accessibilityDescription: nil) else { return }
image.isTemplate = true
// Ausgeschaltet bleibt es sichtbar, aber zurückgenommen: das Element
// verschwinden zu lassen wäre die schlechtere Antwort dann fände man
// den Weg zum Einschalten nicht mehr.
let color = (isEnabled && managed > 0)
? NSColor.labelColor
: NSColor.labelColor.withAlphaComponent(0.55)
color.set()
image.draw(in: NSRect(x: bounds.midX - 7.5, y: bounds.midY - 7.5,
width: 15, height: 15))
}
}

View File

@@ -100,6 +100,13 @@ final class AppDelegate: NSObject, NSApplicationDelegate {
menuBar.register(NetworkMenuBarModule(model: networkModel),
settings: model.menuBarSettings(for: "network"))
}
// Mixer und Lüfter gehören genauso in die Leiste wie die Messwerte:
// beides regelt man mitten in etwas anderem, und dafür ist der Weg
// über ein Fenster zu weit.
menuBar.register(MixerMenuBarModule(mixer: audioMixer),
settings: model.menuBarSettings(for: "audio"))
menuBar.register(FanMenuBarModule(control: fanControl),
settings: model.menuBarSettings(for: "fans"))
menuBar.start()
self.menuBar = menuBar
model.menuBar = menuBar
@@ -176,7 +183,6 @@ final class AppDelegate: NSObject, NSApplicationDelegate {
audioMixer.disable()
}
/// Echte Widgets zuerst, danach die Platzhalter für alles, was noch fehlt.
private func registerWidgets() {
let calendarModel = CalendarModel()
self.calendarModel = calendarModel
@@ -202,12 +208,12 @@ final class AppDelegate: NSObject, NSApplicationDelegate {
WidgetRegistry.shared.register(AudioMixerWidget(mixer: audioMixer))
WidgetRegistry.shared.register(FanWidget(control: fanControl))
let shelfStore = ShelfStore()
self.shelfStore = shelfStore
WidgetRegistry.shared.register(ShelfWidget(store: shelfStore))
WidgetRegistry.shared.register(AirDropWidget())
PlaceholderWidgets.registerAll()
}
private func applyContentSize() {
@@ -320,6 +326,6 @@ private struct NotchPanelContent: View {
let model: AppModel
var body: some View {
WidgetGrid(placements: model.layout)
WidgetGrid(placements: model.layout, availableWidth: AppModel.availableWidth)
}
}

View File

@@ -1,52 +0,0 @@
import SwiftUI
import OnyxDesign
import OnyxWidgetKit
/// Vorläufige Widgets für Phase 2.
///
/// Sie tragen keine echten Daten ihr Zweck ist zu belegen, dass Registry,
/// Layout-Engine, Persistenz und Panelgröße zusammenspielen, bevor die Provider
/// dazukommen. Jedes wird in seiner Phase durch das echte Widget ersetzt; die
/// Kennungen bleiben dabei gleich, damit gespeicherte Layouts weitergelten.
struct PlaceholderWidget: OnyxWidget {
let id: String
let displayName: String
let symbolName: String
let supportedSizes: [WidgetSize]
/// In welcher Phase dieses Widget echt wird.
let phase: String
func makeView(size: WidgetSize) -> AnyView {
AnyView(
VStack(alignment: .leading, spacing: 6) {
HStack(spacing: 6) {
Image(systemName: symbolName)
.font(.system(size: 12, weight: .medium))
.foregroundStyle(Onyx.Color.accent)
Text(displayName)
.font(Onyx.Font.caption)
.foregroundStyle(Onyx.Color.textSecondary)
}
Spacer(minLength: 0)
Text(phase)
.font(Onyx.Font.caption)
.foregroundStyle(Onyx.Color.textTertiary)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
)
}
}
@MainActor
enum PlaceholderWidgets {
/// Registriert nur noch die Karten, deren echte Fassung fehlt. Sobald ein
/// Widget umgesetzt ist, verschwindet es hier die Kennung bleibt gleich,
/// damit gespeicherte Layouts weitergelten.
static func registerAll() {
let widgets: [PlaceholderWidget] = [
.init(id: "fans", displayName: "Lüfter", symbolName: "fan",
supportedSizes: [.small, .medium], phase: "Phase 6"),
]
widgets.forEach { WidgetRegistry.shared.register($0) }
}
}

View File

@@ -217,6 +217,8 @@ private struct MenuBarSettings: View {
("metric.battery", "metric.battery", "battery.100"),
("metric.temperature", "metric.sensors", "thermometer"),
("network", "network.name", "network"),
("audio", "mixer.menubar.name", "slider.horizontal.3"),
("fans", "widget.fans.name", "fan"),
]
var body: some View {
@@ -249,6 +251,18 @@ private struct ModuleRow: View {
let symbol: String
let metricsModel: MetricsModel?
/// Welche Darstellungen dieses Modul beherrscht.
static func presentations(for id: String) -> [MenuBarPresentation] {
switch id {
// Ein Mischpult hat keinen einzelnen Messwert.
case "audio": []
// Drehzahl als Zahl oder nur das Symbol ein Verlauf der Drehzahl
// sagt in 28 Punkten Breite nichts.
case "fans": [.value, .symbol]
default: MenuBarPresentation.allCases
}
}
/// Zu welcher Hardwaregröße dieses Modul gehört `nil` beim Netzwerk.
private var metricKind: MetricKind? {
guard id.hasPrefix("metric.") else { return nil }
@@ -286,20 +300,25 @@ private struct ModuleRow: View {
.disabled(!settings.isEnabled)
}
Picker("", selection: Binding(
get: { settings.presentation },
set: { presentation in
var updated = settings
updated.presentation = presentation
model.setMenuBarSettings(updated, for: id)
})) {
ForEach(MenuBarPresentation.allCases) { presentation in
Text(presentation.localizedName).tag(presentation)
// Nur anbieten, was das Modul auch zeichnen kann. Der Mixer hat
// keinen einzelnen Messwert, den man als Zahl oder Verlauf zeigen
// könnte eine Auswahl ohne Wirkung wäre eine Falle.
if !Self.presentations(for: id).isEmpty {
Picker("", selection: Binding(
get: { settings.presentation },
set: { presentation in
var updated = settings
updated.presentation = presentation
model.setMenuBarSettings(updated, for: id)
})) {
ForEach(Self.presentations(for: id)) { presentation in
Text(presentation.localizedName).tag(presentation)
}
}
}
.labelsHidden()
.frame(width: 150)
.disabled(!settings.isEnabled)
.labelsHidden()
.frame(width: 150)
.disabled(!settings.isEnabled)
}
}
}
}
@@ -416,18 +435,6 @@ private struct PlacementRow: View {
Spacer()
// Nur die Größen anbieten, die das Widget auch sinnvoll ausfüllt.
// Ein Mini-Monat in 1×1 wäre unleserlich.
Picker("", selection: Binding(
get: { placement.size },
set: { model.setSize($0, for: placement.widgetID) })) {
ForEach(widget.supportedSizes) { size in
Text(size.localizedName).tag(size)
}
}
.labelsHidden()
.frame(width: 130)
Button {
model.remove(placement.widgetID)
} label: {
@@ -477,14 +484,3 @@ private struct DisplaySettings: View {
.padding()
}
}
extension WidgetSize {
var localizedName: LocalizedStringKey {
switch self {
case .small: "settings.size.small"
case .medium: "settings.size.medium"
case .large: "settings.size.large"
case .wide: "settings.size.wide"
}
}
}