feat: add shadow for pens

Memola/Features/Memo/ColorPicker/ColorPicker.swift

@@ -29,10 +29,8 @@ struct ColorPicker: View {
                             .resizable()
                             .scaleEffect(1.8)
                             .aspectRatio(contentMode: .fill)
-                            .opacity(0.5)
+                            .clipShape(Triangle())
-                            .overlay {
                         pen.color
-                            }
                             .clipShape(Triangle())
                     }
                     .frame(width: size * 2 + 10)
@@ -170,7 +168,6 @@ struct ColorPicker: View {
                     Image("transparent-grid-rect")
                         .resizable()
                         .aspectRatio(contentMode: .fill)
-                        .opacity(0.5)
                         .background(.white)
                 }
                 color

Memola/Features/Memo/PenDock/PenDockView.swift

@@ -18,35 +18,7 @@ struct PenDockView: View {
         VStack(alignment: .trailing) {
             if let pen = tool.selectedPen {
                 VStack(spacing: 10) {
-                    Button {
+                    penColorButton(pen)
-                        tool.opensColorPicker = true
-                    } label: {
-                        let hsba = pen.color.hsba
-                        Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
-                            .overlay {
-                                Image("transparent-grid-square")
-                                    .resizable()
-                                    .scaleEffect(1.8)
-                                    .aspectRatio(contentMode: .fill)
-                                    .opacity(0.5)
-                                    .overlay {
-                                        pen.color
-                                    }
-                                    .clipShape(Triangle())
-                            }
-                            .clipShape(Capsule())
-                            .overlay {
-                                Capsule()
-                                    .stroke(Color.gray, lineWidth: 0.2)
-                            }
-                            .frame(height: 20)
-                            .drawingGroup()
-                    }
-                    .hoverEffect(.lift)
-                    .popover(isPresented: $tool.opensColorPicker) {
-                        ColorPicker(pen: pen)
-                            .presentationCompactAdaptation(.popover)
-                    }
                     Capsule()
                         .frame(height: 20)
                 }
@@ -61,6 +33,12 @@ struct PenDockView: View {
                 Color.clear
                     .frame(width: width * factor - 18, height: 50)
             }
+            penScrollView
+        }
+        .fixedSize()
+    }
+
+    var penScrollView: some View {
         ScrollViewReader { proxy in
             ScrollView(.vertical, showsIndicators: false) {
                 LazyVStack(spacing: 0) {
@@ -97,12 +75,10 @@ struct PenDockView: View {
                 .offset(x: 60, y: 10)
         }
     }
-        .fixedSize()
-    }
 
-    @ViewBuilder
     func penView(_ pen: Pen) -> some View {
         ZStack {
+            penShadow(pen)
             if let tip = pen.style.icon.tip {
                 Image(tip)
                     .resizable()
@@ -161,6 +137,38 @@ struct PenDockView: View {
         .offset(x: tool.selectedPen === pen ? 0 : 25)
     }
 
+    func penColorButton(_ pen: Pen) -> some View {
+        Button {
+            tool.opensColorPicker = true
+        } label: {
+            let hsba = pen.color.hsba
+            Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
+                .overlay {
+                    Image("transparent-grid-square")
+                        .resizable()
+                        .scaleEffect(1.8)
+                        .aspectRatio(contentMode: .fill)
+                        .clipShape(Triangle())
+                    pen.color
+                        .clipShape(Triangle())
+                }
+                .background(.white)
+                .clipShape(Capsule())
+                .frame(height: 20)
+                .overlay {
+                    Capsule()
+                        .stroke(Color.gray, lineWidth: 0.4)
+                }
+                .padding(0.2)
+                .drawingGroup()
+        }
+        .hoverEffect(.lift)
+        .popover(isPresented: $tool.opensColorPicker) {
+            ColorPicker(pen: pen)
+                .presentationCompactAdaptation(.popover)
+        }
+    }
+
     var newPenButton: some View {
         Button {
             let pen = PenObject.createObject(\.viewContext, penStyle: .marker)
@@ -199,4 +207,29 @@ struct PenDockView: View {
         .padding(.vertical, 5)
         .padding(.leading, 10)
     }
+
+    func penShadow(_ pen: Pen) -> some View {
+        ZStack {
+            Group {
+                if let tip = pen.style.icon.tip {
+                    Image(tip)
+                        .resizable()
+                        .renderingMode(.template)
+                }
+                Image(pen.style.icon.base)
+                    .resizable()
+                    .renderingMode(.template)
+            }
+            .drawingGroup()
+            .foregroundStyle(.black.opacity(0.2))
+            .blur(radius: 3)
+            if let tip = pen.style.icon.tip {
+                Image(tip)
+                    .resizable()
+                    .renderingMode(.template)
+                    .foregroundStyle(Color(red: pen.rgba[0], green: pen.rgba[1], blue: pen.rgba[2]))
+                    .blur(radius: 0.5)
+            }
+        }
+    }
 }