Create an Action ButtonStyle

[JPKribs]

Summary

Resolves: #1667

Originally Mentioned Here: #1543 (comment)

I wanted to split this out into it's own PR / Discussion for better visibility.

---

This PR changes the action buttons from their current floating icons to instead use more a square button similar to tvOS. I try to preserve the Icon Color so it doesn't flip when the button goes from selected to unselected. To do this, I am using the same overlay color for the PlayButton so it's consistent. Un-selected buttons are .gray to account for either black or white icon colors.

All buttons grow to fill their container, identical to tvOS, except Compact Poster they will always be exact squares similar to the existing layout.

---

Totally open to suggestions for this! I'm not positive this is what was meant in the original comment but this is where my mind went since this would bring iOS and tvOS in line with similar layouts.

---

Screenshots

Cinematic

Compact Poster

Generic / Simple Scroll View

Collections

iPadOS - Standard

iPadOS - Collections

Minimum Items vs Maximum Items

[chickdan]

Well, it looks like Apple is moving toward pill shaped buttons in tvOS 26 😆

[JPKribs]

Well, it looks like Apple is moving toward pill shaped buttons in tvOS 26 😆

The only constant is change I suppose lol.

I really hope there are some revisions in iOS 26 before the final release. I personally felt like a lot of their demos were really difficult to read with the layered transparency

[LePips]

Apologies for not keeping up with this PR. For these buttons I've always wanted a tinted material instead of a solid color and I've added those in my latest commit. Play around with that for these buttons to see what it looks like.

Edit: apologies for no example, usage would look somewhat like the following:

Button {} label: {
    Image(systemName: "heart.fill")
        .foregroundStyle(.white)
        .padding(10)
        .background(
            TintedMaterial()
        )
        .tint(.green)
        .cornerRadius(10)
}

[JPKribs]

Apologies for not keeping up with this PR. For these buttons I've always wanted a tinted material instead of a solid color and I've added those in my latest commit. Play around with that for these buttons to see what it looks like.

Edit: apologies for no example, usage would look somewhat like the following:

Button {} label: {
    Image(systemName: "heart.fill")
        .foregroundStyle(.white)
        .padding(10)
        .background(
            TintedMaterial()
        )
        .tint(.green)
        .cornerRadius(10)
}

I think I'm off. I have this on my latest commit:

Dark.Mode.mp4

Light.Mode.mp4

Simple

Poster

I added a 50% gray tint because otherwise I would get:

Poster

Simple

I don't love how this looks though. I'm not sure what our best route is for making the icon visible since the tinting makes it easy to lose it

[JPKribs]

@LePips I cleaned this up a little. Made this more transparent to see the color through and made the text always white. I'm using mostly transparent gray so you can still see the material underneath. Let me know if this isn't the way I should do this. I'm happy with how this version looks now. Please find demos below.

Should I use this same material format for tvOS as well?

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.11.06.16.mp4

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.11.18.45.mp4

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.11.20.17.mp4

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.11.20.44.mp4

[JPKribs]

Also, an option if we want to do the PlayButton in the same styling. IMO, I think this looks good:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.21.26.18.mp4

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.21.26.47.mp4

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-08.at.21.27.04.mp4

[LePips]

I've changed the visual effect style and opacity used since it dulled the colors a bit too much. We will probably still tweak these over time.

PlayButton in the same styling

Yes, that it also an intention of this style.

same material format for tvOS as well?

Maybe, but we can take a look at that later.

[JPKribs]

Those were a big help, thank you! I have this in a place where I think this looks good. The last question is whether we'd want to fully mirror Apple where the text for the button is the accent color. I like what Apple does for Apple Music and Podcasts but they also have a static accent color so they've selected colors that are more distinct and less likely to be hard to see:

In Swiftfin, this is what I have in my last commit. Please let me know if this is not the direction we want to go:

Disabled Play Button:

Standard

How Collections Look

[LePips]

the text for the button is the accent color.

No, just please have the styling as it was prior.

[JPKribs]

Sounds good. Using this:

White Accent

Orange Accent

Purple? Accent

Simple View

There is one part of this I think is wrong. For the PlayButton, to get this to conform to the existing .tintedMaterial, I have .isSelected(true). Should I just manually set up this button instead of reusing the button style? Or, should the buttonstyle be primary, secondary, tertiary with text, background unselected, background selected?

        var body: some View {
            Button {
                play()
            } label: {
                HStack {
                    Label(title, systemImage: "play.fill")
                        .font(.callout)
                        .fontWeight(.semibold)

                    if let source {
                        Marquee(source, speed: 40, delay: 3, fade: 5)
                            .font(.caption)
                            .fontWeight(.medium)
                            .frame(maxWidth: 175)
                    }
                }
                .padding(.horizontal, 5)
            }
            .buttonStyle(.tintedMaterial)
            .foregroundStyle(.white, accentColor)
            .isSelected(true)
            .contextMenu {
                if viewModel.playButtonItem?.userData?.playbackPositionTicks != 0 {
                    Button(L10n.playFromBeginning, systemImage: "gobackward") {
                        play(fromBeginning: true)
                    }
                }
            }
            .disabled(!isEnabled)
        }