feat: redesign memo tool bar

Memola/Features/Memo/Memo/MemoView.swift

@@ -9,16 +9,17 @@ import SwiftUI
 import CoreData
 
 struct MemoView: View {
-    @Environment(\.dismiss) var dismiss
-
     @StateObject var tool: Tool
     @StateObject var canvas: Canvas
     @StateObject var history = History()
 
-    let memo: MemoObject
+    @State var memo: MemoObject
+    @State var title: String
+    @FocusState var textFieldState: Bool
 
     init(memo: MemoObject) {
         self.memo = memo
+        self.title = memo.title
         self._tool = StateObject(wrappedValue: Tool(object: memo.tool))
         self._canvas = StateObject(wrappedValue: Canvas(size: memo.canvas.size, canvasID: memo.canvas.objectID))
     }
@@ -26,27 +27,14 @@ struct MemoView: View {
     var body: some View {
         CanvasView()
             .ignoresSafeArea()
-            .overlay(alignment: .topTrailing) {
-                historyTool
-                    .padding()
-            }
             .overlay(alignment: .trailing) {
                 PenDockView()
                     .frame(maxHeight: .infinity)
                     .padding()
             }
-            .overlay(alignment: .topLeading) {
-                Button {
-                    closeMemo()
-                } label: {
-                    Image(systemName: "xmark")
-                        .contentShape(.circle)
-                        .padding(15)
-                        .background(.regularMaterial)
-                        .clipShape(RoundedRectangle(cornerRadius: 20))
-                }
-                .hoverEffect(.lift)
-                .padding()
+            .disabled(textFieldState)
+            .overlay(alignment: .top) {
+                Toolbar(memo: memo)
             }
             .disabled(canvas.state == .loading || canvas.state == .closing)
             .overlay {
@@ -64,30 +52,6 @@ struct MemoView: View {
             .environmentObject(history)
     }
 
-    var historyTool: some View {
-        HStack {
-            Button {
-                history.historyPublisher.send(.undo)
-            } label: {
-                Image(systemName: "arrow.uturn.backward.circle")
-                    .contentShape(.circle)
-            }
-            .hoverEffect(.lift)
-            .disabled(history.undoDisabled)
-            Button {
-                history.historyPublisher.send(.redo)
-            } label: {
-                Image(systemName: "arrow.uturn.forward.circle")
-                    .contentShape(.circle)
-            }
-            .hoverEffect(.lift)
-            .disabled(history.redoDisabled)
-        }
-        .padding(15)
-        .background(.regularMaterial)
-        .clipShape(RoundedRectangle(cornerRadius: 20))
-    }
-
     func progressView(_ title: String) -> some View {
         ProgressView {
             Text(title)
@@ -97,11 +61,4 @@ struct MemoView: View {
         .background(.regularMaterial)
         .clipShape(RoundedRectangle(cornerRadius: 20))
     }
-
-    func closeMemo() {
-        withPersistenceSync(\.viewContext) { context in
-            try context.saveIfNeeded()
-        }
-        dismiss()
-    }
 }

Memola/Features/Memo/Toolbar/Toolbar.swift

@@ -0,0 +1,101 @@
+//
+//  Toolbar.swift
+//  Memola
+//
+//  Created by Dscyre Scotti on 5/19/24.
+//
+
+import SwiftUI
+import Foundation
+
+struct Toolbar: View {
+    @Environment(\.dismiss) var dismiss
+    
+    @EnvironmentObject var history: History
+    
+    @State var memo: MemoObject
+    @State var title: String
+    @FocusState var textFieldState: Bool
+
+    init(memo: MemoObject) {
+        self.memo = memo
+        self.title = memo.title
+    }
+    
+    var body: some View {
+        HStack(spacing: 5) {
+            closeButton
+            titleField
+            Spacer()
+            historyTool
+        }
+        .font(.subheadline)
+        .padding(10)
+    }
+
+    var closeButton: some View {
+        Button {
+            closeMemo()
+        } label: {
+            Image(systemName: "xmark")
+                .contentShape(.circle)
+                .padding(10)
+                .background(.regularMaterial)
+                .clipShape(.rect(cornerRadius: 8))
+        }
+        .hoverEffect(.lift)
+        .disabled(textFieldState)
+    }
+
+    var titleField: some View {
+        TextField("", text: $title)
+            .focused($textFieldState)
+            .textFieldStyle(.plain)
+            .padding(.vertical, 5)
+            .padding(.horizontal, 10)
+            .frame(width: 120)
+            .background(.regularMaterial)
+            .clipShape(.rect(cornerRadius: 8))
+            .onChange(of: textFieldState) { oldValue, newValue in
+                if !newValue {
+                    if !title.isEmpty {
+                        memo.title = title
+                    } else {
+                        title = memo.title
+                    }
+                }
+            }
+    }
+
+    var historyTool: some View {
+        HStack {
+            Button {
+                history.historyPublisher.send(.undo)
+            } label: {
+                Image(systemName: "arrow.uturn.backward.circle")
+                    .contentShape(.circle)
+            }
+            .hoverEffect(.lift)
+            .disabled(history.undoDisabled)
+            Button {
+                history.historyPublisher.send(.redo)
+            } label: {
+                Image(systemName: "arrow.uturn.forward.circle")
+                    .contentShape(.circle)
+            }
+            .hoverEffect(.lift)
+            .disabled(history.redoDisabled)
+        }
+        .padding(10)
+        .background(.regularMaterial)
+        .clipShape(.rect(cornerRadius: 8))
+        .disabled(textFieldState)
+    }
+
+    func closeMemo() {
+        withPersistenceSync(\.viewContext) { context in
+            try context.saveIfNeeded()
+        }
+        dismiss()
+    }
+}