feat(ui): simplify and refine the send experience

- separate the Material 3 Expressive button group from send content
- simplify file selection around large, responsive previews
- scale file thumbnails for phone, tablet, and desktop widths
- overlay filenames directly on previews while preserving extensions
- add compact remove actions to individual file previews
- keep selected files inside a horizontally scrollable row
- simplify file-picker actions and selected-file information
- remove the obsolete FileItemCard component
- refine nearby-device card shapes, layering, and spacing
- align reload controls with the established surface hierarchy
- align the floating navigation bar with the scaffold background
- allow Sync360Surface callers to provide an appropriate corner shape
- preserve existing send state, device selection, picker, and transfer flows

Author: CodePandaaAI

shared/src/commonMain/kotlin/com/liftley/sync360/Sync360Root.kt

@@ -108,7 +108,7 @@ fun Sync360Root() {
                         .padding(horizontal = 32.dp, vertical = 16.dp)
                         // 3. Clip the corners after padding to create the floating card shape
                         .clip(MaterialTheme.shapes.extraExtraLarge),
-                    containerColor = MaterialTheme.colorScheme.surfaceContainer,
+                    containerColor = MaterialTheme.colorScheme.surface,
                     // 4. Disable internal inset consumption so our custom modifiers control the shape
                     windowInsets = WindowInsets(0, 0, 0, 0)
                 ) {

shared/src/commonMain/kotlin/com/liftley/sync360/presentation/app/components/Sync360Surface.kt

@@ -1,21 +1,24 @@
 package com.liftley.sync360.presentation.app.components
 
+import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 
+
 @Composable
 fun Sync360Surface(
     modifier: Modifier = Modifier,
     containerColor: Color = MaterialTheme.colorScheme.surface,
+    shape: CornerBasedShape = MaterialTheme.shapes.large,
     content: @Composable (() -> Unit)
 ) {
     Surface(
         modifier = modifier,
         color = containerColor,
-        shape = MaterialTheme.shapes.large
+        shape = shape
     ) {
         content()
     }

shared/src/commonMain/kotlin/com/liftley/sync360/presentation/send/SendScreen.kt

@@ -48,6 +48,34 @@ fun SendScreen(
                 horizontalAlignment = Alignment.CenterHorizontally,
                 verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
+                Sync360Surface(
+                    containerColor = MaterialTheme.colorScheme.surface
+                ) {
+                    ButtonGroup(
+                        overflowIndicator = { menuState ->
+                            ButtonGroupDefaults.OverflowIndicator(menuState)
+                        },
+                        modifier = Modifier.fillMaxWidth().padding(8.dp)
+                    ) {
+                        toggleableItem(
+                            checked = screenState.selectedTab == SendTab.Text,
+                            label = "Text",
+                            onCheckedChange = { checked ->
+                                if (checked) sendScreenViewModel.onTabSelected(SendTab.Text)
+                            },
+                            weight = 1f
+                        )
+
+                        toggleableItem(
+                            checked = screenState.selectedTab == SendTab.Files,
+                            label = "Files",
+                            onCheckedChange = { checked ->
+                                if (checked) sendScreenViewModel.onTabSelected(SendTab.Files)
+                            },
+                            weight = 1f
+                        )
+                    }
+                }
                 Sync360Surface(
                     containerColor = MaterialTheme.colorScheme.surface
                 ) {
@@ -57,31 +85,6 @@ fun SendScreen(
                             .padding(16.dp),
                         verticalArrangement = Arrangement.spacedBy(16.dp)
                     ) {
-                        ButtonGroup(
-                            overflowIndicator = { menuState ->
-                                ButtonGroupDefaults.OverflowIndicator(menuState)
-                            },
-                            modifier = Modifier.fillMaxWidth()
-                        ) {
-                            toggleableItem(
-                                checked = screenState.selectedTab == SendTab.Text,
-                                label = "Text",
-                                onCheckedChange = { checked ->
-                                    if (checked) sendScreenViewModel.onTabSelected(SendTab.Text)
-                                },
-                                weight = 1f
-                            )
-
-                            toggleableItem(
-                                checked = screenState.selectedTab == SendTab.Files,
-                                label = "Files",
-                                onCheckedChange = { checked ->
-                                    if (checked) sendScreenViewModel.onTabSelected(SendTab.Files)
-                                },
-                                weight = 1f
-                            )
-                        }
-
                         when (screenState.selectedTab) {
                             SendTab.Text -> {
                                 TextSendContent(