feat: Implement Material 3 Expressive layouts and animations

app/src/main/java/com/astralquarks/notes/ui/components/AiAssistantBottomSheet.kt

@@ -212,7 +212,7 @@ fun AiAssistantBottomSheet(
     ModalBottomSheet(
         onDismissRequest = onDismiss,
         sheetState = sheetState,
-        shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
+        shape = RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp),
         containerColor = MaterialTheme.colorScheme.surfaceContainerLow,
         modifier = Modifier.testTag("ai_assistant_bottom_sheet")
     ) {

app/src/main/java/com/astralquarks/notes/ui/components/ColorPickerDialog.kt

@@ -57,7 +57,7 @@ fun ColorPickerDialog(
 
     AlertDialog(
         onDismissRequest = onDismiss,
-        shape = RoundedCornerShape(24.dp),
+        shape = RoundedCornerShape(32.dp),
         icon = {
             Icon(
                 imageVector = Icons.Default.Palette,

app/src/main/java/com/astralquarks/notes/ui/components/ExpressiveSearchBar.kt

@@ -66,7 +66,7 @@ fun ExpressiveSearchBar(
             .fillMaxWidth()
             .height(56.dp)
             .testTag("expressive_search_bar"),
-        shape = RoundedCornerShape(28.dp),
+        shape = RoundedCornerShape(32.dp),
         color = MaterialTheme.colorScheme.surfaceContainerHigh,
         tonalElevation = 6.dp,
         shadowElevation = 2.dp

app/src/main/java/com/astralquarks/notes/ui/components/ImageUrlDialog.kt

@@ -93,7 +93,7 @@ fun ImageUrlDialog(
 
     AlertDialog(
         onDismissRequest = { if (!isUploading) onDismiss() },
-        shape = RoundedCornerShape(28.dp),
+        shape = RoundedCornerShape(32.dp),
         icon = {
             Icon(
                 imageVector = Icons.Default.Image,

app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt

@@ -1,5 +1,9 @@
 package com.astralquarks.notes.ui.components
 
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
@@ -48,6 +52,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
@@ -123,19 +128,30 @@ fun NoteCard(
         }
     }
 
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val scale by animateFloatAsState(
+        targetValue = if (isPressed) 0.95f else 1f,
+        animationSpec = spring(dampingRatio = 0.6f, stiffness = 300f),
+        label = "card_scale"
+    )
+
     Card(
         onClick = onClick,
-        shape = RoundedCornerShape(24.dp),
+        interactionSource = interactionSource,
+        modifier = modifier.fillMaxWidth().testTag("note_card_${note.id}").graphicsLayer {
+            scaleX = scale
+            scaleY = scale
+        },
+        shape = RoundedCornerShape(32.dp),
         colors = CardDefaults.cardColors(containerColor = cardBg),
         border = BorderStroke(
             1.dp,
             if (isDark) MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.2f)
             else MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.4f)
         ),
-        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp, pressedElevation = 4.dp),
-        modifier = modifier
-            .fillMaxWidth()
-            .testTag("note_card_${note.id}")
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp, pressedElevation = 4.dp)
+
     ) {
         Column(modifier = Modifier.fillMaxWidth()) {
             // Optional image header

app/src/main/java/com/astralquarks/notes/ui/components/ShareNoteDialog.kt

@@ -317,7 +317,7 @@ fun ShareNoteDialog(
                 }
             }
         },
-        shape = RoundedCornerShape(24.dp)
+        shape = RoundedCornerShape(32.dp)
     )
 }
 

app/src/main/java/com/astralquarks/notes/ui/components/VaultAuthDialog.kt

@@ -106,7 +106,7 @@ fun VaultAuthDialog(
 
     AlertDialog(
         onDismissRequest = { if (!isProcessing) onDismiss() },
-        shape = RoundedCornerShape(28.dp),
+        shape = RoundedCornerShape(32.dp),
         icon = {
             Surface(
                 shape = RoundedCornerShape(16.dp),

app/src/main/java/com/astralquarks/notes/ui/screens/HomeScreen.kt

@@ -3,6 +3,11 @@ package com.astralquarks.notes.ui.screens
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -119,6 +124,14 @@ fun HomeScreen(
     var noteForColorPicker by remember { mutableStateOf<Note?>(null) }
     var noteToShare by remember { mutableStateOf<Note?>(null) }
     var isExportingShare by remember { mutableStateOf(false) }
+
+    val fabInteractionSource = remember { MutableInteractionSource() }
+    val isFabPressed by fabInteractionSource.collectIsPressedAsState()
+    val fabScale by animateFloatAsState(
+        targetValue = if (isFabPressed) 0.95f else 1f,
+        animationSpec = spring(dampingRatio = 0.6f, stiffness = 300f),
+        label = "fab_scale"
+    )
     var shareStatusText by remember { mutableStateOf<String?>(null) }
     var showImageDialogForQuickNote by remember { mutableStateOf(false) }
     var showCreateActionSheet by remember { mutableStateOf(false) }
@@ -288,7 +301,7 @@ fun HomeScreen(
             ) {
                 Surface(
                     modifier = Modifier.fillMaxWidth(),
-                    shape = RoundedCornerShape(28.dp),
+                    shape = RoundedCornerShape(32.dp),
                     color = MaterialTheme.colorScheme.surfaceContainerHigh,
                     tonalElevation = 6.dp,
                     shadowElevation = 4.dp
@@ -371,7 +384,8 @@ fun HomeScreen(
                             // Material 3 Expressive Add FAB
                             FloatingActionButton(
                                 onClick = { showCreateActionSheet = true },
-                                shape = RoundedCornerShape(24.dp),
+                                interactionSource = fabInteractionSource,
+                                shape = RoundedCornerShape(32.dp),
                                 containerColor = MaterialTheme.colorScheme.primaryContainer,
                                 contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                                 elevation = FloatingActionButtonDefaults.elevation(
@@ -381,6 +395,10 @@ fun HomeScreen(
                                 modifier = Modifier
                                     .size(56.dp)
                                     .testTag("fab_create_note")
+                                    .graphicsLayer {
+                                        scaleX = fabScale
+                                        scaleY = fabScale
+                                    }
                             ) {
                                 Icon(
                                     imageVector = Icons.Default.Add,
@@ -615,7 +633,7 @@ fun HomeScreen(
     if (showCreateActionSheet) {
         ModalBottomSheet(
             onDismissRequest = { showCreateActionSheet = false },
-            shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
+            shape = RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp),
             containerColor = MaterialTheme.colorScheme.surfaceContainerHigh
         ) {
             Column(