Show queue count badge on macOS queue button

Add a queue-count badge to the macOS player controls queue button
(MacOSControlsSectionRenderer) and the shared mini player queue button
(MiniPlayerView), matching the iOS pill button behavior.
This commit is contained in:
Arkadiusz Fal
2026-06-20 23:24:48 +02:00
parent 71eb2aacc7
commit 76ae2717b2
2 changed files with 39 additions and 4 deletions

View File

@@ -519,10 +519,25 @@ struct MiniPlayerView: View {
incrementTapCount(for: config)
navigationCoordinator?.isMiniPlayerQueueSheetPresented = true
} label: {
Image(systemName: "list.bullet")
.font(isTabAccessory ? .title3 : .title2)
.frame(width: 32, height: 32)
.contentShape(Rectangle())
ZStack(alignment: .bottom) {
Image(systemName: "list.bullet")
.font(isTabAccessory ? .title3 : .title2)
.frame(width: 32, height: 32)
// Badge showing queue count
let queueCount = playerState?.queue.count ?? 0
if queueCount > 0 {
Text("\(queueCount)")
.font(.system(size: 9, weight: .bold))
.foregroundStyle(.white)
.padding(.horizontal, 4)
.padding(.vertical, 1)
.background(Color.accentColor, in: Capsule())
.offset(y: 4)
.allowsHitTesting(false)
}
}
.contentShape(Rectangle())
}
.buttonStyle(.plain)
}

View File

@@ -211,6 +211,9 @@ struct MacOSControlsSectionRenderer: View {
controlButton(systemImage: "list.bullet", help: config.buttonType.displayName) {
actions.onShowQueue?()
}
.overlay(alignment: .bottom) {
queueBadge
}
.disabled(isLocked)
.opacity(isLocked ? 0.5 : 1.0)
}
@@ -289,6 +292,23 @@ struct MacOSControlsSectionRenderer: View {
MacOSRendererButtonStyle(context: context)
}
/// Badge showing the number of items currently in the queue, mirroring the
/// iOS pill queue button. Hidden when the queue is empty.
@ViewBuilder
private var queueBadge: some View {
let count = actions.playerState.queue.count
if count > 0 {
Text("\(count)")
.font(.system(size: context == .bar ? 8 : 9, weight: .bold))
.foregroundStyle(.white)
.padding(.horizontal, 4)
.padding(.vertical, 1)
.background(Color.accentColor, in: Capsule())
.offset(y: 4)
.allowsHitTesting(false)
}
}
@ViewBuilder
private func controlButton(
systemImage: String,