{#each items as item, index (item.id)} {@const subtitle = getSubtitle(item)} {@const duration = "runTimeTicks" in item ? formatDuration(item.runTimeTicks) : ""} {@const progress = getProgress(item)} {@const trackNum = getTrackNumber(item)} {@const isPlayed = "userData" in item && item.userData?.isPlayed} {@const downloadInfo = getDownloadInfo(item.id)} {@const isDownloaded = downloadInfo?.status === "completed"} {@const isDownloading = downloadInfo?.status === "downloading" || downloadInfo?.status === "pending"} onItemClick?.(item)} class="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-[var(--color-surface)] transition-colors group" > {trackNum || index + 1}

{#if progress > 0}

{/if}

{truncateMiddle(item.name, 56)}

{#if subtitle}

{subtitle}

{/if}

{#if showDownloadStatus && (isDownloaded || isDownloading)} {#if isDownloaded} {:else if isDownloading}

{/if} {/if} {#if isPlayed} {/if} {#if duration} {duration} {/if} {/each}