macOS 13 - How do you create a Message.App Settings toolbar using SwiftUI?

Hello fellow developers.

I'm trying to create an equivalent Settings window like in the Message.app settings window. With the code that Apple supplies I get nowhere, it works but shows it to small. With the code that I show here, gets closer but not like the message.app settings view.

import SwiftUI

@main
struct WKB_MultiWindow_PreferencesApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        Settings {
            SettingView()
                .frame(minWidth: 400, maxWidth: 500, minHeight: 500, maxHeight: 500, alignment: .center)
        }.commands {
            // This is possible using my own toolbar setup?
            ToolbarCommands() // ?????
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello")
                .padding()
            Spacer()
        }
        .frame(width: 500, height: 400)
    }
}

struct SettingView: View {
    var body: some View {
        Color.clear
            ToolbarItem(placement: .principal) {
                Button {
                } label: {
                    Label {
                        Text("General")
                    } icon: {
                        Image (systemName: "gearshape")
                    }
                    .font(.title)
                    //.frame(width: 100, height: 100)
                    .background(Color.white.opacity(0.01))
                    .padding(.horizontal, 4.0)
                    .padding(.vertical, 1.0)
                }
            }
            ToolbarItem(placement: .principal) {
                Button {
                } label: {
                    Label {
                        Text("General")
                    } icon: {
                        Image (systemName: "gearshape")
                    }
                }
                .font(.title)
                //.frame(width: 100, height: 100)
                .background(Color.white.opacity(0.01))
                .padding(.horizontal, 4.0)
                .padding(.vertical, 1.0)
            }
            ToolbarItem(placement: .principal) {
                Button(action: {print("text")}, label: {
                    VStack {
                        Image (systemName: "gearshape")
                        Text("General")
                    }
                    .font(.title)
                    //.frame(width: 100, height: 100)
                    .background(Color.white.opacity(0.01))
                    .padding(.horizontal, 4.0)
                    .padding(.vertical, 1.0)
                })
            }
            ToolbarItem {
                Button(action: save, label: {
                    VStack {
                        Image(systemName: "network")
                            .font(.title)
                            .padding(2)
                        Text("General")
                            .font(.body)
                            .padding(2)
                    }
                    .padding(0)
                })
                //.font(.title)
                .frame(width: 100, height: 150)
            }
        }
        .navigationTitle("My Application")
    }
}

What I like to create:

What I have: ( with just one icon, code will shows three )

I saw some sample code here at SO but none are coming close to the Message.app Settings window. As you can see, there is no text and the rectangle area is cut off above. All three ways are the same except the width of the hoover width. Also I just added the first try, its the last in the .toolbar.

If it works I can turn it into a modifier or viewBuilder to make it generic. Any suggestions?

Use TabView, e.g.

struct SettingsView: View {
    private enum Tabs: Hashable {
        case general, advanced
    }
    var body: some View {
        TabView {
            GeneralSettingsView()
                .tabItem {
                    Label("General", systemImage: "gear")
                }
                .tag(Tabs.general)
            AdvancedSettingsView()
                .tabItem {
                    Label("Advanced", systemImage: "star")
                }
                .tag(Tabs.advanced)
        }
        .padding(20)
        .frame(width: 375, height: 150)
    }
}