Refactored ItemDetailsFragment to implement CollectionItemsGrid for better layout and fixed a bug where the down key event was being consumed before items were populated

- Fixes #270
- Closes #271

Author: RadicalMuffinMan

app/src/main/java/org/jellyfin/androidtv/ui/itemdetail/v2/ItemDetailsFragment.kt

@@ -24,6 +24,8 @@ import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -612,12 +614,12 @@ class ItemDetailsFragment : Fragment() {
 								if (keyEvent.nativeKeyEvent.action == android.view.KeyEvent.ACTION_DOWN) {
 									when (keyEvent.key) {
 										Key.DirectionDown -> {
-											if (isBoxSet) {
-												try { collectionFirstItemFocusRequester.requestFocus() } catch (_: Exception) {}
+											val focused = if (isBoxSet) {
+												try { collectionFirstItemFocusRequester.requestFocus(); true } catch (_: Exception) { false }
 											} else {
-												try { playButtonFocusRequester.requestFocus() } catch (_: Exception) {}
+												try { playButtonFocusRequester.requestFocus(); true } catch (_: Exception) { false }
 											}
-											true
+											focused
 										}
 										else -> false
 									}
@@ -795,8 +797,7 @@ class ItemDetailsFragment : Fragment() {
 				// ---- Collection items ----
 				if (isBoxSet && uiState.collectionItems.isNotEmpty()) {
 					item {
-						SectionWithCards(
-							title = "Items in Collection",
+						CollectionItemsGrid(
 							items = uiState.collectionItems,
 							firstItemFocusRequester = collectionFirstItemFocusRequester,
 						)
@@ -1385,6 +1386,39 @@ class ItemDetailsFragment : Fragment() {
 		}
 	}
 
+	@OptIn(ExperimentalLayoutApi::class)
+	@Composable
+	private fun CollectionItemsGrid(
+		items: List<BaseItemDto>,
+		firstItemFocusRequester: FocusRequester? = null,
+	) {
+		Column {
+			SectionHeader(title = "Items in Collection")
+			FlowRow(
+				modifier = Modifier.focusGroup(),
+				horizontalArrangement = Arrangement.spacedBy(16.dp),
+				verticalArrangement = Arrangement.spacedBy(16.dp),
+			) {
+				items.forEachIndexed { index, item ->
+					val cardModifier = if (index == 0 && firstItemFocusRequester != null)
+						Modifier.focusRequester(firstItemFocusRequester)
+					else Modifier
+
+					SimilarItemCard(
+						title = item.name ?: "",
+						imageUrl = getPosterUrl(item),
+						year = item.productionYear,
+						onClick = {
+							navigationRepository.navigate(Destinations.itemDetails(item.id, viewModel.serverId))
+						},
+						modifier = cardModifier,
+						item = item,
+					)
+				}
+			}
+		}
+	}
+
 	@Composable
 	private fun SeasonDetailsContent(uiState: ItemDetailsUiState, contentFocusRequester: FocusRequester, showBackdrop: Boolean = true) {
 		val item = uiState.item ?: return