.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-04-29T17:33:41.575251940Z">
+        <DropdownSelection timestamp="2025-05-03T07:36:08.121278195Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="PhysicalDevice" identifier="serial=R52N50NLGRT" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=/home/sebastian/.android/avd/Small_Phone_API_36.avd" />
             </handle>
           </Target>
         </DropdownSelection>

app/src/main/java/come/stormborntales/notevault/ui/screens/MainScreen.kt

@@ -8,9 +8,11 @@ import android.media.Image
 import android.net.Uri
 import android.util.Log
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
@@ -22,6 +24,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import come.stormborntales.notevault.FullscreenImageViewerActivity
@@ -43,12 +46,14 @@ fun loadImageBitmap(context: Context, uriString: String): ImageBitmap? {
         e.printStackTrace()
         null
     }
-}
+}@Composable
-
-@Composable
 fun NoteCard(note: NoteEntity, onDeleteNote: (NoteEntity) -> Unit, onEditNote: (NoteEntity) -> Unit) {
     val context = LocalContext.current
 
+    val screenWidth = LocalConfiguration.current.screenWidthDp // Bildschirmbreite in dp
+
+    // Dynamische Bildgröße basierend auf der Bildschirmbreite
+    val imageSize = if (screenWidth < 400) 80.dp else 120.dp
 
     Card(
         modifier = Modifier
@@ -57,20 +62,103 @@ fun NoteCard(note: NoteEntity, onDeleteNote: (NoteEntity) -> Unit, onEditNote: (
         shape = RoundedCornerShape(16.dp),
         elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
     ) {
+        // Responsive Layout: Überprüfen, ob der Bildschirm schmaler als 360 dp ist
+        if (screenWidth < 400) {
+            // Wenn der Bildschirm schmal ist, arrangiere die Elemente vertikal
+            Row(modifier = Modifier.padding(16.dp)) {
+                AsyncImage(
+                    model = note.imagePreview,
+                    contentDescription = "Vorschaubild",
+                    modifier = Modifier
+                        .size(imageSize)
+                        .clip(RoundedCornerShape(12.dp))
+                )
+
+
+                Column(modifier = Modifier.padding(16.dp)) {
+                    Text(
+                        text = note.title,
+                        style = MaterialTheme.typography.titleMedium
+                    )
+
+                    note.composer?.let {
+                        Text("von $it", style = MaterialTheme.typography.labelMedium)
+                    }
+
+                    Spacer(modifier = Modifier.height(4.dp))
+
+                    note.year?.let {
+                        Text("Jahr: $it", style = MaterialTheme.typography.bodySmall)
+                    }
+
+                    note.genre?.let {
+                        Text("Genre: $it", style = MaterialTheme.typography.bodySmall)
+                    }
+
+                    note.description?.let {
+                        Text("Beschreibung: $it", style = MaterialTheme.typography.bodySmall, maxLines = 2)
+                    }
+
+                    Spacer(modifier = Modifier.height(16.dp)) // Abstand zwischen Text und Buttons
+                }
+            }
+            // Buttons unter dem Text
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                modifier = Modifier.fillMaxWidth().padding(16.dp),
+            ) {
+                OutlinedButton(
+                    onClick = {
+                        val uris = ArrayList<Uri>()
+                        note.images.forEach { uris.add(it.toUri()) }
+
+                        val intent = Intent(context, FullscreenImageViewerActivity::class.java).apply {
+                            putParcelableArrayListExtra("imageUris", ArrayList(uris))
+                        }
+                        context.startActivity(intent)
+                    },
+                    contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+                ) {
+                    Text("Anzeigen", style = MaterialTheme.typography.labelLarge)
+                }
+
+                OutlinedButton(
+                    onClick = {
+                        onEditNote(note)
+                    },
+                    contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+                ) {
+                    Text("Bearbeiten", style = MaterialTheme.typography.labelLarge)
+                }
+
+                OutlinedButton(
+                    onClick = {
+                        onDeleteNote(note)
+                    },
+                    colors = ButtonDefaults.outlinedButtonColors(
+                        contentColor = MaterialTheme.colorScheme.error
+                    ),
+                    contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+                ) {
+                    Text("Löschen", style = MaterialTheme.typography.labelLarge)
+                }
+            }
+        } else {
+            // Wenn der Bildschirm breiter als 360 dp ist, arrangiere die Elemente nebeneinander
             Row(modifier = Modifier.padding(16.dp)) {
                 // Linkes Vorschaubild
                 AsyncImage(
                     model = note.imagePreview,
                     contentDescription = "Vorschaubild",
                     modifier = Modifier
-                    .size(120.dp)
+                        .size(imageSize)
                         .clip(RoundedCornerShape(12.dp))
                 )
 
                 // Rechte Info-Spalte
                 Column(
                     modifier = Modifier
-                    .weight(1f)
+                        .weight(1f) // Damit die Spalte den verfügbaren Platz nutzt
                         .align(Alignment.CenterVertically)
                         .padding(start = 16.dp)
                 ) {
@@ -99,12 +187,14 @@ fun NoteCard(note: NoteEntity, onDeleteNote: (NoteEntity) -> Unit, onEditNote: (
 
                     Spacer(modifier = Modifier.height(8.dp))
 
+                    // Buttons in einer Row anordnen
                     Row(
-                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        modifier = Modifier.fillMaxWidth() // Stellt sicher, dass die Row den gesamten verfügbaren Platz einnimmt
                     ) {
                         OutlinedButton(
                             onClick = {
-                            val uris = ArrayList<Uri>();
+                                val uris = ArrayList<Uri>()
                                 note.images.forEach { uris.add(it.toUri()) }
 
                                 val intent = Intent(context, FullscreenImageViewerActivity::class.java).apply {
@@ -116,15 +206,16 @@ fun NoteCard(note: NoteEntity, onDeleteNote: (NoteEntity) -> Unit, onEditNote: (
                         ) {
                             Text("Anzeigen", style = MaterialTheme.typography.labelLarge)
                         }
+
                         OutlinedButton(
                             onClick = {
                                 onEditNote(note)
-                            Log.d("EditNote", "on Edit Note!")
                             },
                             contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
                         ) {
                             Text("Bearbeiten", style = MaterialTheme.typography.labelLarge)
                         }
+
                         OutlinedButton(
                             onClick = {
                                 onDeleteNote(note)
@@ -141,6 +232,7 @@ fun NoteCard(note: NoteEntity, onDeleteNote: (NoteEntity) -> Unit, onEditNote: (
             }
         }
     }
+}
 
 
 @OptIn(ExperimentalMaterial3Api::class)