feat: reposition lock button

Memola/Features/Memo/Memo/MemoView.swift

@@ -32,7 +32,7 @@ struct MemoView: View {
             .overlay(alignment: .bottomTrailing) {
                 switch tool.selection {
                 case .pen:
-                    PenDock(tool: tool, canvas: canvas)
+                    PenDock(tool: tool, canvas: canvas, size: size)
                         .transition(.move(edge: .trailing))
                 case .photo:
                     if let photoItem = tool.selectedPhotoItem {

Memola/Features/Memo/PenDock/PenDock.swift

@@ -11,6 +11,7 @@ struct PenDock: View {
     @ObservedObject var tool: Tool
     @ObservedObject var canvas: Canvas
 
+    let size: CGFloat
     let width: CGFloat = 90
     let height: CGFloat = 30
     let factor: CGFloat = 0.9
@@ -19,15 +20,20 @@ struct PenDock: View {
     @State var opensColorPicker: Bool = false
 
     var body: some View {
-        if !canvas.locksCanvas {
+        ZStack(alignment: .bottomTrailing) {
-            VStack(alignment: .trailing) {
+            if !canvas.locksCanvas {
-                penPropertyTool
+                VStack(alignment: .trailing) {
-                penItemList
+                    penPropertyTool
+                    penItemList
+                }
+                .fixedSize()
+                .frame(maxHeight: .infinity)
+                .padding(10)
+                .transition(.move(edge: .trailing).combined(with: .blurReplace))
             }
-            .fixedSize()
+            lockButton
-            .frame(maxHeight: .infinity)
+                .padding(10)
-            .padding(10)
+                .transition(.move(edge: .trailing).combined(with: .blurReplace))
-            .transition(.move(edge: .trailing).combined(with: .blurReplace))
         }
     }
 
@@ -310,4 +316,27 @@ struct PenDock: View {
             }
         }
     }
+
+    var lockButton: some View {
+        Button {
+            withAnimation {
+                canvas.locksCanvas.toggle()
+            }
+        } label: {
+            ZStack {
+                if canvas.locksCanvas {
+                    Image(systemName: "lock.open")
+                        .transition(.move(edge: .trailing).combined(with: .blurReplace))
+                } else {
+                    Image(systemName: "lock")
+                        .transition(.move(edge: .leading).combined(with: .blurReplace))
+                }
+            }
+            .contentShape(.circle)
+            .frame(width: size, height: size)
+            .background(.regularMaterial)
+            .clipShape(.rect(cornerRadius: 8))
+        }
+        .hoverEffect(.lift)
+    }
 }

Memola/Features/Memo/Toolbar/Toolbar.swift

@@ -47,12 +47,13 @@ struct Toolbar: View {
                 }
             }
             .frame(maxWidth: .infinity, alignment: .leading)
-            elementTool
+            if !canvas.locksCanvas {
-            HStack(spacing: 5) {
+                elementTool
+            }
+            Group {
                 if !canvas.locksCanvas {
                     historyControl
                 }
-                lockButton
             }
             .frame(maxWidth: .infinity, alignment: .trailing)
         }
@@ -217,13 +218,14 @@ struct Toolbar: View {
                         .hoverEffect(.lift)
                     }
                     .matchedGeometryEffect(id: "element.toolbar.photo.options", in: namespace)
-                    .transition(.opacity.animation(.easeIn(duration: 0.1)))
+                    .transition(.blurReplace.animation(.easeIn(duration: 0.1)))
                 }
             }
             .background {
                 if tool.selection == .photo {
                     RoundedRectangle(cornerRadius: 8)
                         .fill(Color.white.tertiary)
+                        .transition(.move(edge: .leading).animation(.easeIn(duration: 0.1)))
                 }
             }
         }
@@ -231,6 +233,7 @@ struct Toolbar: View {
             RoundedRectangle(cornerRadius: 8)
                 .fill(.regularMaterial)
         }
+        .transition(.move(edge: .top).combined(with: .blurReplace))
     }
 
     var historyControl: some View {
@@ -259,30 +262,6 @@ struct Toolbar: View {
         .transition(.move(edge: .top).combined(with: .blurReplace))
     }
 
-    var lockButton: some View {
-        Button {
-            #warning("TODO: need to revisit toggale logic")
-            withAnimation {
-                canvas.locksCanvas.toggle()
-            }
-        } label: {
-            ZStack {
-                if canvas.locksCanvas {
-                    Image(systemName: "lock.open")
-                        .transition(.move(edge: .trailing).combined(with: .blurReplace))
-                } else {
-                    Image(systemName: "lock")
-                        .transition(.move(edge: .leading).combined(with: .blurReplace))
-                }
-            }
-            .contentShape(.circle)
-            .frame(width: size, height: size)
-            .background(.regularMaterial)
-            .clipShape(.rect(cornerRadius: 8))
-        }
-        .hoverEffect(.lift)
-    }
-
     func openCamera() {
         let status = AVCaptureDevice.authorizationStatus(for: .video)
         switch status {