From f4b3d87557af526329d0fbd73fcacff44b2f7736 Mon Sep 17 00:00:00 2001
From: Yunosuke Sakai <qmkns246@gmail.com>
Date: Thu, 31 Oct 2024 00:55:20 +0900
Subject: [PATCH] update setting UI

---
 .../Settings/Settings/SettingsView.swift      | 91 ++++++++++++-------
 1 file changed, 56 insertions(+), 35 deletions(-)

diff --git a/Features/Sources/Settings/Settings/SettingsView.swift b/Features/Sources/Settings/Settings/SettingsView.swift
index 61cca83..d48aa84 100644
--- a/Features/Sources/Settings/Settings/SettingsView.swift
+++ b/Features/Sources/Settings/Settings/SettingsView.swift
@@ -12,44 +12,65 @@ public struct SettingsView: View {
     public var body: some View {
         NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
             List {
-                NavigationLink(
-                    state: Settings.Path.State.apiKeySetting(
-                        APIKeySetting.State()
-                    )
-                ) {
-                    HStack {
-                        RoundedRectangle(cornerRadius: 8)
-                            .frame(width: 30, height: 30)
-                            .foregroundColor(.yellow)
-                            .overlay {
-                                Image(systemName: "key.fill")
-                                    .foregroundColor(.white)
-                            }
-                            .padding(.trailing, 8)
-
-                        Text("API Key")
-
-                        Spacer()
-
-                        Text(APIClient.apiKey?.rawValue.masked ?? "None")
-                            .foregroundStyle(Color.secondary)
+                Section {
+                    NavigationLink(
+                        state: Settings.Path.State.apiKeySetting(
+                            APIKeySetting.State()
+                        )
+                    ) {
+                        HStack {
+                            RoundedRectangle(cornerRadius: 8)
+                                .frame(width: 30, height: 30)
+                                .foregroundColor(.yellow)
+                                .overlay {
+                                    Image(systemName: "key.fill")
+                                        .foregroundColor(.white)
+                                }
+                                .padding(.trailing, 8)
+                            
+                            Text("API Key")
+                            
+                            Spacer()
+                            
+                            Text(APIClient.apiKey?.rawValue.masked ?? "None")
+                                .foregroundStyle(Color.secondary)
+                        }
                     }
                 }
 
-                NavigationLink {
-                    LanguageView()
-                } label: {
-                    HStack {
-                        RoundedRectangle(cornerRadius: 8)
-                            .frame(width: 30, height: 30)
-                            .foregroundColor(.green)
-                            .overlay {
-                                Image(systemName: "globe")
-                                    .foregroundColor(.white)
-                            }
-                            .padding(.trailing, 8)
-
-                        Text("Language")
+                Section {
+                    NavigationLink {
+                        LanguageView()
+                    } label: {
+                        HStack {
+                            RoundedRectangle(cornerRadius: 8)
+                                .frame(width: 30, height: 30)
+                                .foregroundColor(.green)
+                                .overlay {
+                                    Image(systemName: "globe")
+                                        .foregroundColor(.white)
+                                }
+                                .padding(.trailing, 8)
+                            
+                            Text("Language")
+                        }
+                    }
+                    
+                    NavigationLink {
+                        Text("Appearance")
+                    } label: {
+                        HStack {
+                            RoundedRectangle(cornerRadius: 8)
+                                .frame(width: 30, height: 30)
+                                .foregroundColor(.cyan)
+                                .overlay {
+                                    Image(systemName: "circle.lefthalf.filled")
+                                        .foregroundColor(.white)
+                                }
+                                .padding(.trailing, 8)
+                            
+                            Text("Appearance")
+                        }
                     }
                 }
             }