♻️ [ShareableCardContent] Display a shadow instead of a border around the profile picture.

feature/profilecard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardBack.kt

@@ -1,9 +1,7 @@
 package io.github.droidkaigi.confsched.profilecard.component
 
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -12,7 +10,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithCache
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.layer.GraphicsLayer
@@ -63,11 +60,6 @@ internal fun BackgroundCapturableCardBack(
             qrCodeImagePainter,
             modifier = Modifier
                 .size(width = 300.dp, height = 380.dp)
-                .border(
-                    3.dp,
-                    Color.Black,
-                    RoundedCornerShape(8.dp),
-                )
                 .graphicsLayer {
                     rotationY = 180f
                 },

feature/profilecard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardFront.kt

@@ -1,9 +1,7 @@
 package io.github.droidkaigi.confsched.profilecard.component
 
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -12,7 +10,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithCache
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.layer.drawLayer
 import androidx.compose.ui.graphics.rememberGraphicsLayer
@@ -59,13 +56,7 @@ internal fun BackgroundCapturableCardFront(
         FlipCardFront(
             uiState,
             profileImagePainter,
-            modifier = Modifier
-                .size(width = 300.dp, height = 380.dp)
-                .border(
-                    3.dp,
-                    Color.Black,
-                    RoundedCornerShape(8.dp),
-                ),
+            modifier = Modifier.size(width = 300.dp, height = 380.dp),
         )
     }
 }

feature/profilecard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/ShareableCard.kt

@@ -18,8 +18,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.layer.drawLayer
 import androidx.compose.ui.platform.LocalDensity
@@ -109,42 +113,104 @@ private fun ShareableCardContent(
             .background(LocalProfileCardTheme.current.primaryColor),
     ) {
         Box(modifier = Modifier.padding(vertical = 30.dp)) {
-            backImage?.let {
-                Image(
-                    bitmap = it,
-                    contentDescription = null,
-                    modifier = Modifier
-                        .offset(
-                            x = with(density) { offsetXBackPx.toDp() },
-                            y = with(density) { offsetYBackPx.toDp() },
-                        )
-                        .rotate(10f)
-                        .size(
-                            width = with(density) { cardWidthPx.toDp() },
-                            height = with(density) { cardHeightPx.toDp() },
-                        ),
+            backImage?.let { backBitmap ->
+                ShadowedImage(
+                    imageBitmap = backBitmap,
+                    offsetX = offsetXBackPx,
+                    offsetY = offsetYBackPx,
+                    rotation = 10f,
+                    cardWidthPx = cardWidthPx,
+                    cardHeightPx = cardHeightPx,
                 )
             }
-            frontImage?.let {
-                Image(
-                    bitmap = it,
-                    contentDescription = null,
-                    modifier = Modifier
-                        .offset(
-                            x = with(density) { offsetXFrontPx.toDp() },
-                            y = with(density) { offsetYFrontPx.toDp() },
-                        )
-                        .rotate(-12.2f)
-                        .size(
-                            width = with(density) { cardWidthPx.toDp() },
-                            height = with(density) { cardHeightPx.toDp() },
-                        ),
+            frontImage?.let { frontBitmap ->
+                ShadowedImage(
+                    imageBitmap = frontBitmap,
+                    offsetX = offsetXFrontPx,
+                    offsetY = offsetYFrontPx,
+                    rotation = -12.2f,
+                    cardWidthPx = cardWidthPx,
+                    cardHeightPx = cardHeightPx,
                 )
             }
         }
     }
 }
 
+@Composable
+private fun ShadowedImage(
+    imageBitmap: ImageBitmap,
+    offsetX: Float,
+    offsetY: Float,
+    rotation: Float,
+    cardWidthPx: Int,
+    cardHeightPx: Int,
+    modifier: Modifier = Modifier,
+) {
+    val density = LocalDensity.current
+    Box(
+        modifier = modifier
+            .offset(
+                x = with(density) { offsetX.toDp() },
+                y = with(density) { offsetY.toDp() },
+            )
+            .rotate(rotation)
+            .size(
+                width = with(density) { cardWidthPx.toDp() },
+                height = with(density) { cardHeightPx.toDp() },
+            )
+            .drawWithContent {
+                // Draw the blurred shadow behind the actual content.
+                // This function first draws a shadow by calling drawBlurredShadow(),
+                // then draws the actual content (the image) with drawContent().
+                // By doing this, we ensure the shadow appears behind the image,
+                // creating a layered effect with the shadow in the background.
+                drawBlurredShadow(size, Color.Black.copy(alpha = 0.2f))
+                // The child element Image is drawn by calling drawContent.
+                drawContent()
+            },
+    ) {
+        Image(
+            bitmap = imageBitmap,
+            contentDescription = null,
+            modifier = Modifier.graphicsLayer(),
+        )
+    }
+}
+
+/**
+ * Draws a blurred shadow effect on the canvas.
+ *
+ * This function creates a blurred shadow by drawing multiple layers of rectangles with varying offsets
+ * and transparency. The shadow effect is created by gradually increasing the offset and reducing the
+ * opacity of each rectangle, simulating the natural fading of a shadow.
+ *
+ * @param size The size of the base rectangle to draw the shadow around.
+ * @param color The base color of the shadow. The alpha channel will be adjusted for the blur effect.
+ */
+private fun ContentDrawScope.drawBlurredShadow(size: Size, color: Color) {
+    // The number of shadow layers determines the smoothness of the shadow.
+    // Fewer layers result in a less smooth shadow.
+    val shadowLayers = 30
+
+    // Controls how much the shadow spreads out.
+    // A larger number results in a more diffused and smoother shadow.
+    val maxOffset = 20f
+
+    for (i in 1..shadowLayers) {
+        val offset = i * (maxOffset / shadowLayers)
+        drawRect(
+            // The shadow is darkest at its base, and becomes lighter as it extends further away.
+            color = color.copy(alpha = 0.05f / i),
+            // The shadow extends diagonally from the upper left to the lower right.
+            topLeft = Offset(offset, offset),
+            // Increasing the size of the rectangles with each iteration creates the effect of a shadow
+            // that gets thinner and more diffused the further it is from the base.
+            size = Size(size.width + offset, size.height + offset),
+        )
+    }
+}
+
 @Composable
 @Preview
 fun ShareableCardPreview() {