Make media browser file list feel native on macOS

Drop the iOS-grouped rounded card in MediaBrowserView's section
container for top/bottom dividers on macOS, force .buttonStyle(.plain)
on directory NavigationLinks to avoid default link tinting, and
shrink MediaFileRow's icon frame on macOS. iOS and tvOS unchanged.
This commit is contained in:
Arkadiusz Fal
2026-04-20 21:12:53 +02:00
parent d8f10e984a
commit bb9ec2fc2a
2 changed files with 23 additions and 0 deletions

View File

@@ -222,7 +222,11 @@ struct MediaBrowserView: View {
NavigationLink(value: NavigationDestination.mediaBrowser(source, path: file.path, showOnlyPlayable: showOnlyPlayable)) { NavigationLink(value: NavigationDestination.mediaBrowser(source, path: file.path, showOnlyPlayable: showOnlyPlayable)) {
MediaFileRow(file: file, sortOrder: sortOrder) MediaFileRow(file: file, sortOrder: sortOrder)
} }
#if os(macOS)
.buttonStyle(.plain)
#else
.foregroundStyle(.primary) .foregroundStyle(.primary)
#endif
} else if file.isPlayable { } else if file.isPlayable {
playableFileRow(for: file) playableFileRow(for: file)
} else { } else {
@@ -275,6 +279,16 @@ struct MediaBrowserView: View {
@ViewBuilder @ViewBuilder
private func sectionCard<Content: View>(@ViewBuilder content: () -> Content) -> some View { private func sectionCard<Content: View>(@ViewBuilder content: () -> Content) -> some View {
#if os(macOS)
VStack(spacing: 0) {
Divider()
LazyVStack(spacing: 0) {
content()
}
Divider()
}
.padding(.bottom, 12)
#else
if listStyle == .inset { if listStyle == .inset {
LazyVStack(spacing: 0) { LazyVStack(spacing: 0) {
content() content()
@@ -289,6 +303,7 @@ struct MediaBrowserView: View {
} }
.padding(.bottom, 16) .padding(.bottom, 16)
} }
#endif
} }
// MARK: - Preferences // MARK: - Preferences

View File

@@ -56,11 +56,19 @@ struct MediaFileRow: View {
} }
private var iconView: some View { private var iconView: some View {
#if os(macOS)
Image(systemName: file.systemImage)
.font(.title3)
.foregroundStyle(iconColor)
.frame(width: 28, height: 28)
.contentShape(Rectangle())
#else
Image(systemName: file.systemImage) Image(systemName: file.systemImage)
.font(.title2) .font(.title2)
.foregroundStyle(iconColor) .foregroundStyle(iconColor)
.frame(width: 44, height: 44) .frame(width: 44, height: 44)
.contentShape(Rectangle()) .contentShape(Rectangle())
#endif
} }
private var textView: some View { private var textView: some View {