feat: add counter, buttons, hashtag, and preview animations in composer

app/src/main/java/com/swoosh/microblog/ui/composer/ComposerScreen.kt

@@ -4,6 +4,8 @@ import android.net.Uri
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.*
+import androidx.compose.animation.Crossfade
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.*
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
@@ -40,6 +42,7 @@ import com.swoosh.microblog.data.HashtagParser
 import com.swoosh.microblog.data.model.FeedPost
 import com.swoosh.microblog.data.model.PostStats
 import com.swoosh.microblog.ui.animation.SwooshMotion
+import kotlinx.coroutines.delay
 import com.swoosh.microblog.ui.components.PulsingPlaceholder
 import com.swoosh.microblog.ui.preview.HtmlPreviewWebView
 import java.time.LocalDateTime
@@ -168,7 +171,12 @@ fun ComposerScreen(
                 }
             }
 
-            if (state.isPreviewMode) {
+            Crossfade(
+                targetState = state.isPreviewMode,
+                animationSpec = SwooshMotion.quick(),
+                label = "editPreviewCrossfade"
+            ) { isPreview ->
+            if (isPreview) {
                 // Preview mode: show rendered HTML
                 if (state.text.isBlank() && state.imageUris.isEmpty() && state.linkPreview == null) {
                     Box(
@@ -212,21 +220,31 @@ fun ComposerScreen(
                         supportingText = {
                             val charCount = state.text.length
                             val statsText = PostStats.formatComposerStats(state.text)
-                            val color = when {
+                            val targetColor = when {
                                 charCount > 500 -> MaterialTheme.colorScheme.error
                                 charCount > 280 -> MaterialTheme.colorScheme.tertiary
                                 else -> MaterialTheme.colorScheme.onSurfaceVariant
                             }
+                            val animatedColor by animateColorAsState(
+                                targetValue = targetColor,
+                                animationSpec = SwooshMotion.quick(),
+                                label = "counterColor"
+                            )
                             Text(
                                 text = statsText,
                                 style = MaterialTheme.typography.labelSmall,
-                                color = color
+                                color = animatedColor
                             )
                         }
                     )
 
                     // Extracted tags preview chips
-                    if (state.extractedTags.isNotEmpty()) {
+                    AnimatedVisibility(
+                        visible = state.extractedTags.isNotEmpty(),
+                        enter = fadeIn(SwooshMotion.quick()) + expandVertically(animationSpec = SwooshMotion.snappy()),
+                        exit = fadeOut(SwooshMotion.quick()) + shrinkVertically(animationSpec = SwooshMotion.snappy())
+                    ) {
+                        Column {
                             Spacer(modifier = Modifier.height(8.dp))
                             Row(
                                 modifier = Modifier.fillMaxWidth(),
@@ -262,6 +280,7 @@ fun ComposerScreen(
                                 }
                             }
                         }
+                    }
 
                     Spacer(modifier = Modifier.height(12.dp))
 
@@ -452,6 +471,13 @@ fun ComposerScreen(
 
                     // Action buttons
                     Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                        // Publish button (step 1)
+                        var publishVisible by remember { mutableStateOf(false) }
+                        LaunchedEffect(Unit) { publishVisible = true }
+                        AnimatedVisibility(
+                            visible = publishVisible,
+                            enter = scaleIn(animationSpec = SwooshMotion.gentle()) + fadeIn(SwooshMotion.quick())
+                        ) {
                             Button(
                                 onClick = viewModel::publish,
                                 modifier = Modifier.fillMaxWidth(),
@@ -463,7 +489,18 @@ fun ComposerScreen(
                                 }
                                 Text(if (state.isEditing) "Update & Publish" else "Publish now")
                             }
+                        }
 
+                        // Draft + Schedule row (step 2)
+                        var rowVisible by remember { mutableStateOf(false) }
+                        LaunchedEffect(Unit) {
+                            delay(SwooshMotion.StaggerDelayMs)
+                            rowVisible = true
+                        }
+                        AnimatedVisibility(
+                            visible = rowVisible,
+                            enter = scaleIn(animationSpec = SwooshMotion.gentle()) + fadeIn(SwooshMotion.quick())
+                        ) {
                             Row(
                                 modifier = Modifier.fillMaxWidth(),
                                 horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -490,6 +527,8 @@ fun ComposerScreen(
                     }
                 }
             }
+            } // end Crossfade
+        }
     }
 
     // Link dialog