Handle empty script view state

Author: adborbas

Source/Yasba/Views/Sieve Script/SieveScriptView.swift

@@ -37,14 +37,48 @@ struct SieveScriptView: View {
         ZStack(alignment: .center) {
             HStack {
                 Spacer()
-                scriptList
-                    .frame(maxWidth: 1000)
+                if viewModel.rowTokens.isEmpty {
+                    emptyDropArea
+                        .frame(maxWidth: 1000)
+                } else {
+                    scriptList
+                        .frame(maxWidth: 1000)
+                }
                 Spacer()
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
     }
+    
+    @ViewBuilder
+        private var emptyDropArea: some View {
+            VStack(spacing: 12) {
+                if dropGapIndex != nil || draggedRange != nil {
+                    PlaceholderRowView()
+                        .padding(.leading, 0)
+                        .transition(.opacity)
+                } else {
+                    Text("Drag a command from the sidebar to start writing your script.")
+                        .font(.title2)
+                        .foregroundStyle(Color.secondary)
+                        .multilineTextAlignment(.center)
+                        .padding(.horizontal, 24)
+                }
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+            .contentShape(Rectangle())
+            .onDrop(
+                of: [UTType.utf8PlainText],
+                delegate: UnifiedDropDelegate(
+                    target: .fixedGap(0),
+                    draggedRange: $draggedRange,
+                    dropGapIndex: $dropGapIndex,
+                    rowHeights: $rowHeights,
+                    viewModel: viewModel
+                )
+            )
+        }
 
     @ViewBuilder
     var scriptList: some View {
@@ -151,7 +185,32 @@ struct SieveScriptView: View {
     }
 }
 
-#Preview {
+#Preview("Not empty") {
+    @Previewable @State var viewModel = SieveScriptViewModel(script: [
+        AddFlagCommand(tag: "Spam"),
+        IfCommand(
+            quantifier: .any,
+            tests: [
+                .header(["from"], match: .contains, keys: ["[email protected]"]),
+                .exists(["x-marked-spam"])
+            ],
+            thenChildren: [
+                AddFlagCommand(tag: "Label 1"),
+                AddFlagCommand(tag: "Label 2")
+            ],
+            elseChildren: [
+                AddFlagCommand(tag: "Tag 1")
+            ]
+        ),
+        FileIntoCommand(mailbox: "Social"),
+        AddFlagCommand(tag: "Tag 1"),
+        AddFlagCommand(tag: "Tag 2"),
+        StopCommand()
+    ])
+    SieveScriptView(viewModel: $viewModel)
+}
+
+#Preview("Empty") {
     @Previewable @State var viewModel = SieveScriptViewModel()
     SieveScriptView(viewModel: $viewModel)
 }

Source/Yasba/Views/Sieve Script/SieveScriptViewModel.swift

@@ -2,27 +2,7 @@ import Combine
 
 final class SieveScriptViewModel: ObservableObject {
 
-    private var script: [AnySieveCommand] = [
-        AddFlagCommand(tag: "Spam"),
-        IfCommand(
-            quantifier: .any,
-            tests: [
-                .header(["from"], match: .contains, keys: ["[email protected]"]),
-                .exists(["x-marked-spam"])
-            ],
-            thenChildren: [
-                AddFlagCommand(tag: "Label 1"),
-                AddFlagCommand(tag: "Label 2")
-            ],
-            elseChildren: [
-                AddFlagCommand(tag: "Tag 1")
-            ]
-        ),
-        FileIntoCommand(mailbox: "Social"),
-        AddFlagCommand(tag: "Tag 1"),
-        AddFlagCommand(tag: "Tag 2"),
-        StopCommand()
-    ]
+    private var script: [AnySieveCommand] = []
 
     private let mapper: RowTokenMapping
     private let editor: RowTokenEditing
@@ -32,9 +12,11 @@ final class SieveScriptViewModel: ObservableObject {
         mapper.tokens(from: script)
     }
 
-    init(mapper: RowTokenMapping = RowTokenMapper(),
+    init(script: [AnySieveCommand] = [],
+         mapper: RowTokenMapping = RowTokenMapper(),
          editor: RowTokenEditing = RowTokenEditor(),
          scriptRenderer: SieveScriptRenderer = .default) {
+        self.script = script
         self.mapper = mapper
         self.editor = editor
         self.scriptRenderer = scriptRenderer