Version one on the App Store

Mobile Music Assistant/ViewsLibraryAlbumsView.swift

@@ -21,12 +21,14 @@ struct AlbumsView: View {
     }
     
     private let columns = [
-        GridItem(.adaptive(minimum: 160), spacing: 16)
+        GridItem(.flexible(), spacing: 8),
+        GridItem(.flexible(), spacing: 8),
+        GridItem(.flexible(), spacing: 8)
     ]
     
     var body: some View {
         ScrollView {
-            LazyVGrid(columns: columns, spacing: 16) {
+            LazyVGrid(columns: columns, spacing: 8) {
                 ForEach(albums) { album in
                     NavigationLink(value: album) {
                         AlbumGridItem(album: album)
@@ -40,21 +42,17 @@ struct AlbumsView: View {
                 if isLoading {
                     ProgressView()
                         .gridCellColumns(columns.count)
-                        .padding()
+                        .padding(.horizontal, 12)
+            .padding(.vertical, 8)
                 }
             }
             .padding()
         }
-        .navigationDestination(for: MAAlbum.self) { album in
-            AlbumDetailView(album: album)
-        }
         .refreshable {
             await loadAlbums(refresh: true)
         }
         .task {
-            if albums.isEmpty {
-                await loadAlbums(refresh: false)
-            }
+            await loadAlbums(refresh: !albums.isEmpty)
         }
         .alert("Error", isPresented: $showError) {
             Button("OK", role: .cancel) { }
@@ -100,36 +98,28 @@ struct AlbumGridItem: View {
     let album: MAAlbum
     
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
+        VStack(alignment: .leading, spacing: 4) {
             // Album Cover
-            if let imageUrl = album.imageUrl {
-                let coverURL = service.imageProxyURL(path: imageUrl, size: 256)
-                
-                CachedAsyncImage(url: coverURL) { image in
-                    image
-                        .resizable()
-                        .aspectRatio(contentMode: .fill)
-                } placeholder: {
-                    Rectangle()
-                        .fill(Color.gray.opacity(0.2))
-                }
-                .frame(width: 160, height: 160)
-                .clipShape(RoundedRectangle(cornerRadius: 8))
-            } else {
+            CachedAsyncImage(url: service.imageProxyURL(path: album.imageUrl, provider: album.imageProvider, size: 256)) { image in
+                image
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+            } placeholder: {
                 RoundedRectangle(cornerRadius: 8)
                     .fill(Color.gray.opacity(0.2))
-                    .frame(width: 160, height: 160)
                     .overlay {
                         Image(systemName: "opticaldisc")
                             .font(.system(size: 40))
                             .foregroundStyle(.secondary)
                     }
             }
+            .aspectRatio(1, contentMode: .fit)
+            .clipShape(RoundedRectangle(cornerRadius: 8))
             
             // Album Info
             VStack(alignment: .leading, spacing: 2) {
                 Text(album.name)
-                    .font(.subheadline)
+                    .font(.caption)
                     .fontWeight(.medium)
                     .lineLimit(2)
                     .foregroundStyle(.primary)
@@ -147,7 +137,7 @@ struct AlbumGridItem: View {
                         .foregroundStyle(.tertiary)
                 }
             }
-            .frame(width: 160, alignment: .leading)
+            .frame(maxWidth: .infinity, alignment: .leading)
         }
     }
 }