Add icons for Preferences sections

Tusker/Screens/Preferences/PreferencesView.swift

@@ -94,24 +94,24 @@ struct PreferencesView: View {
     private var preferencesSection: some View {
         Section {
             NavigationLink(destination: AppearancePrefsView()) {
-                Text("Appearance")
+                PreferenceSectionLabel(title: "Appearance", systemImageName: "textformat", backgroundColor: .indigo)
             }
             NavigationLink(destination: BehaviorPrefsView()) {
-                Text("Behavior")
+                PreferenceSectionLabel(title: "Behavior", systemImageName: "flowchart.fill", backgroundColor: .green)
             }
             NavigationLink(isActive: $navigationState.showNotificationPreferences) {
                 NotificationsPrefsView()
             } label: {
-                Text("Notifications")
+                PreferenceSectionLabel(title: "Notifications", systemImageName: "bell.fill", backgroundColor: .red)
             }
             NavigationLink(destination: ComposingPrefsView()) {
-                Text("Composing")
+                PreferenceSectionLabel(title: "Composing", systemImageName: "pencil", backgroundColor: .blue)
             }
             NavigationLink(destination: WellnessPrefsView()) {
-                Text("Digital Wellness")
+                PreferenceSectionLabel(title: "Digital Wellness", systemImageName: "brain.fill", backgroundColor: .purple)
             }
             NavigationLink(destination: AdvancedPrefsView()) {
-                Text("Advanced")
+                PreferenceSectionLabel(title: "Advanced", systemImageName: "gearshape.2.fill", backgroundColor: .gray)
             }
         }
         .appGroupedListRowBackground()
@@ -119,14 +119,28 @@ struct PreferencesView: View {
     
     private var aboutSection: some View {
         Section {
-            NavigationLink("About") {
+            NavigationLink {
                 AboutView()
+            } label: {
+                Label {
+                    Text("About")
+                } icon: {
+                    Image("AboutIcon")
+                        .resizable()
+                        .clipShape(RoundedRectangle(cornerRadius: 6))
+                        .frame(width: 30, height: 30)
+                }
             }
-            NavigationLink("Tip Jar") {
+            NavigationLink {
                 TipJarView()
+            } label: {
+                // TODO: custom tip jar icon?
+                PreferenceSectionLabel(title: "Tip Jar", systemImageName: "dollarsign.square.fill", backgroundColor: .yellow)
             }
-            NavigationLink("Acknowledgements") {
+            NavigationLink {
                 AcknowledgementsView()
+            } label: {
+                PreferenceSectionLabel(title: "Acknowledgements", systemImageName: "doc.text.fill", backgroundColor: .gray)
             }
         }
         .appGroupedListRowBackground()
@@ -137,6 +151,24 @@ struct PreferencesView: View {
     }
 }
 
+private struct PreferenceSectionLabel: View {
+    let title: LocalizedStringKey
+    let systemImageName: String
+    let backgroundColor: Color
+    
+    var body: some View {
+        Label {
+            Text(title)
+        } icon: {
+            Image(systemName: systemImageName)
+                .imageScale(.medium)
+                .foregroundStyle(.white)
+                .frame(width: 30, height: 30)
+                .background(backgroundColor, in: RoundedRectangle(cornerRadius: 6))
+        }
+    }
+}
+
 //#if DEBUG
 //struct PreferencesView_Previews : PreviewProvider {
 //    static var previews: some View {