Improve defaults and style for stages

2 files changed, 113 insertions, 98 deletions

diff --git a/Map/Presentation/Preferences/StagesPreferencesView.swift b/Map/Presentation/Preferences/StagesPreferencesView.swift
index 7131034..1e57cbf 100644
--- a/Map/Presentation/Preferences/StagesPreferencesView.swift
+++ b/Map/Presentation/Preferences/StagesPreferencesView.swift
@@ -20,21 +20,16 @@ struct StagesPreferencesView: View {
   @State private var customStages: [CustomStage] = []
 
   var body: some View {
-    VStack(alignment: .leading, spacing: 16) {
+    VStack(alignment: .leading, spacing: Dimensions.Spacing.regular) {
       Text("preferences.stages.title")
         .font(.Theme.Title.emphasized)
-        .lineSpacing(Dimensions.FontSize.title - Dimensions.FontSize.title)
+        .lineSpacing(Dimensions.LineHeight.title - Dimensions.FontSize.title)
       Text("preferences.stages.explanation")
-        .font(.Theme.Body.emphasized)
-        .lineSpacing(Dimensions.FontSize.body - Dimensions.FontSize.body)
-
-      HStack {
-        Spacer()
-        Button(action: addStage) {
-          Image(systemName: "plus")
-        }
-        .buttonStyle(.borderless)
-      }
+        .font(.Theme.Body.regular)
+        .kerning(Dimensions.Kerning.body)
+        .lineSpacing(Dimensions.LineHeight.body - Dimensions.FontSize.body)
+        .padding(.top, Dimensions.Spacing.loose)
+        .padding(.bottom, Dimensions.Spacing.regular)
 
       Table(customStages) {
         TableColumn("Name") { customStage in
@@ -47,7 +42,7 @@ struct StagesPreferencesView: View {
               }
             )
           )
-          .textFieldStyle(.roundedBorder)
+          .textFieldStyle(.plain)
         }
         .width(120)
 
@@ -61,7 +56,7 @@ struct StagesPreferencesView: View {
               }
             )
           )
-          .textFieldStyle(.roundedBorder)
+          .textFieldStyle(.plain)
         }
 
         TableColumn("Stage II") { customStage in
@@ -74,7 +69,7 @@ struct StagesPreferencesView: View {
               }
             )
           )
-          .textFieldStyle(.roundedBorder)
+          .textFieldStyle(.plain)
         }
 
         TableColumn("Stage III") { customStage in
@@ -87,7 +82,7 @@ struct StagesPreferencesView: View {
               }
             )
           )
-          .textFieldStyle(.roundedBorder)
+          .textFieldStyle(.plain)
         }
 
         TableColumn("Stage IV") { customStage in
@@ -100,7 +95,7 @@ struct StagesPreferencesView: View {
               }
             )
           )
-          .textFieldStyle(.roundedBorder)
+          .textFieldStyle(.plain)
         }
 
         TableColumn("") { customStage in
@@ -113,9 +108,16 @@ struct StagesPreferencesView: View {
       }
       .tableStyle(.bordered(alternatesRowBackgrounds: true))
 
-      Spacer()
+      HStack {
+        Spacer()
+        Button(action: addStage) {
+          Image(systemName: "plus")
+        }
+        .buttonStyle(.borderless)
+      }
     }
-    .padding()
+    .padding(.vertical, Dimensions.Spacing.loose)
+    .padding(.horizontal, Dimensions.Spacing.indulgent)
     .onAppear {
       loadStages()
     }
@@ -125,7 +127,9 @@ struct StagesPreferencesView: View {
     if let decoded = try? JSONDecoder().decode([CustomStage].self, from: customStagesData) {
       customStages = decoded
     } else {
-      customStages = [CustomStage()]
+      // First use - create default Cynefin stage
+      customStages = [CustomStage.cynefinDefault()]
+      saveStages() // Save the default to UserDefaults
     }
   }
 
@@ -136,7 +140,7 @@ struct StagesPreferencesView: View {
   }
 
   private func addStage() {
-    customStages.append(CustomStage())
+    customStages.append(CustomStage.placeholderDefault())
     saveStages()
   }
 
diff --git a/Map/Presentation/Preferences/TemplatesPreferencesView.swift b/Map/Presentation/Preferences/TemplatesPreferencesView.swift
index 806c22b..42db1a3 100644
--- a/Map/Presentation/Preferences/TemplatesPreferencesView.swift
+++ b/Map/Presentation/Preferences/TemplatesPreferencesView.swift
@@ -86,95 +86,106 @@ struct TemplatesPreferencesView: View {
   @State private var newTemplateName = ""
 
   var body: some View {
-    HStack(spacing: 0) {
-      VStack(alignment: .leading, spacing: 8) {
-        HStack {
-          Text("Templates")
-            .font(.headline)
-
-          Spacer()
-
-          Button(action: { showingAddSheet = true }) {
-            Image(systemName: "plus")
-          }
-          .buttonStyle(.borderless)
-
-          Button(action: removeTemplate) {
-            Image(systemName: "minus")
-          }
-          .buttonStyle(.borderless)
-          .disabled(selectedTemplate == nil)
-        }
-
-        List(templates, selection: $selectedTemplate) { template in
-          Text(template.name)
-            .tag(template)
-        }
-        .listStyle(.sidebar)
-      }
-      .frame(width: 200)
-
-      Divider()
-
-      VStack(alignment: .leading, spacing: 8) {
-        if let selected = selectedTemplate {
+    VStack(alignment: .leading, spacing: Dimensions.Spacing.regular) {
+      Text("preferences.templates.title")
+        .font(.Theme.Title.emphasized)
+        .lineSpacing(Dimensions.LineHeight.title - Dimensions.FontSize.title)
+      Text("preferences.templates.explanation")
+        .font(.Theme.Body.regular)
+        .kerning(Dimensions.Kerning.body)
+        .lineSpacing(Dimensions.LineHeight.body - Dimensions.FontSize.body)
+        .padding(.top, Dimensions.Spacing.loose)
+        .padding(.bottom, Dimensions.Spacing.regular)
+      HStack(spacing: 0) {
+        VStack(alignment: .leading, spacing: 8) {
           HStack {
-            Text("Template: \(selected.name)")
+            Text("Templates")
               .font(.headline)
+            
             Spacer()
+            
+            Button(action: { showingAddSheet = true }) {
+              Image(systemName: "plus")
+            }
+            .buttonStyle(.borderless)
+            
+            Button(action: removeTemplate) {
+              Image(systemName: "minus")
+            }
+            .buttonStyle(.borderless)
+            .disabled(selectedTemplate == nil)
           }
-
-          SimpleTextEditor(text: $templateText)
-            .onChange(of: templateText) { _, newValue in
-              updateSelectedTemplate(newValue)
+          
+          List(templates, selection: $selectedTemplate) { template in
+            Text(template.name)
+              .tag(template)
+          }
+          .listStyle(.sidebar)
+        }
+        .frame(width: 200)
+        
+        Divider()
+        
+        VStack(alignment: .leading, spacing: 8) {
+          if let selected = selectedTemplate {
+            HStack {
+              Text("Template: \(selected.name)")
+                .font(.headline)
+              Spacer()
             }
-        } else {
-          VStack {
-            Spacer()
-            Text("Select a template to edit")
-              .foregroundColor(.secondary)
-            Spacer()
+            
+            SimpleTextEditor(text: $templateText)
+              .onChange(of: templateText) { _, newValue in
+                updateSelectedTemplate(newValue)
+              }
+          } else {
+            VStack {
+              Spacer()
+              Text("Select a template to edit")
+                .foregroundColor(.secondary)
+              Spacer()
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
           }
-          .frame(maxWidth: .infinity, maxHeight: .infinity)
         }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.leading)
       }
-      .frame(maxWidth: .infinity, maxHeight: .infinity)
-      .padding(.leading)
-    }
-    .padding()
-    .onAppear {
-      loadTemplates()
-    }
-    .onChange(of: selectedTemplate) { _, newSelection in
-      if let template = newSelection {
-        templateText = template.content
+      .padding()
+      .onAppear {
+        loadTemplates()
       }
-    }
-    .sheet(isPresented: $showingAddSheet) {
-      VStack(spacing: 16) {
-        Text("Add New Template")
-          .font(.headline)
-
-        TextField("Template Name", text: $newTemplateName)
-          .textFieldStyle(.roundedBorder)
-
-        HStack {
-          Button("Cancel") {
-            showingAddSheet = false
-            newTemplateName = ""
-          }
-
-          Spacer()
-
-          Button("Add") {
-            addTemplate()
+      .onChange(of: selectedTemplate) { _, newSelection in
+        if let template = newSelection {
+          templateText = template.content
+        }
+      }
+      .sheet(isPresented: $showingAddSheet) {
+        VStack(spacing: 16) {
+          Text("Add New Template")
+            .font(.headline)
+          
+          TextField("Template Name", text: $newTemplateName)
+            .textFieldStyle(.roundedBorder)
+          
+          HStack {
+            Button("Cancel") {
+              showingAddSheet = false
+              newTemplateName = ""
+            }
+            
+            Spacer()
+            
+            Button("Add") {
+              addTemplate()
+            }
+            .disabled(newTemplateName.isEmpty)
           }
-          .disabled(newTemplateName.isEmpty)
         }
+        .frame(width: 300, height: 120)
       }
-      .padding()
-      .frame(width: 300, height: 120)
-    }
+    }.padding(.vertical, Dimensions.Spacing.loose)
+      .padding(.horizontal, Dimensions.Spacing.indulgent)
   }
 
   private func loadTemplates() {