First version

CHDataManagement/Views/Images/FlexibleColumnView.swift

@@ -0,0 +1,49 @@
+import SwiftUI
+
+struct FlexibleColumnView<Content, Inner>: View where Content: Identifiable, Inner: View {
+
+    @Binding
+    var items: [Content]
+
+    let maximumItemWidth: CGFloat
+
+    let spacing: CGFloat
+
+    private let content: (_ item: Content, _ width: CGFloat) -> Inner
+
+    init(items: Binding<[Content]>, maximumItemWidth: CGFloat = 300, spacing: CGFloat = 20, content: @escaping (_ item: Content, _ width: CGFloat) -> Inner) {
+        self._items = items
+        self.maximumItemWidth = maximumItemWidth
+        self.spacing = spacing
+        self.content = content
+    }
+
+    var body: some View {
+        GeometryReader { geometry in
+            let totalWidth = geometry.size.width
+            let columnCount = max(Int((totalWidth + spacing) / (maximumItemWidth + spacing)), 1)
+            let totalSpacing = spacing * CGFloat(columnCount + 1)
+            let trueItemWidth = (totalWidth - totalSpacing) / CGFloat(columnCount)
+
+            let columns = Array(repeating: GridItem(.flexible(), spacing: spacing), count: columnCount)
+
+            ScrollView {
+                LazyVGrid(columns: columns, spacing: spacing) {
+                    ForEach(items) { item in
+                        content(item, trueItemWidth)
+                    }
+                }
+                .padding(spacing)
+            }
+        }
+    }
+}
+
+#Preview {
+    FlexibleColumnView(items: .constant(MockImage.images), maximumItemWidth: 150) { image, width in
+        image.imageToDisplay
+            .resizable()
+            .aspectRatio(contentMode: .fit)
+            .frame(width: width)
+    }
+}

CHDataManagement/Views/Images/ImageDetailsView.swift

@@ -0,0 +1,59 @@
+import SwiftUI
+
+struct ImageDetailsView: View {
+
+    @Environment(\.language)
+    var language
+
+    let image: ImageResource
+
+    @State
+    private var newId: String
+
+    init(image: ImageResource) {
+        self.image = image
+        self.newId = image.id
+    }
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            Text("Unique identifier")
+                .font(.headline)
+            HStack {
+                TextField("", text: $newId)
+                Button(action: setNewId) {
+                    Text("Update")
+                }
+            }
+            Text("Description")
+                .font(.headline)
+            TextField("", text: image.altText.text(for: language))
+            Text("Info")
+                .font(.headline)
+            HStack(alignment: .top) {
+                VStack(alignment: .leading) {
+                    Text("Original Size")
+                    Text("Aspect ratio")
+                }
+                VStack(alignment: .trailing) {
+                    Text("\(Int(image.size.width)) x \(Int(image.size.height))")
+                    Text("\(image.aspectRatio)")
+                }
+            }.padding(.vertical)
+            Text("Versions")
+                .font(.headline)
+            Spacer()
+        }
+        .padding()
+    }
+
+    private func setNewId() {
+        #warning("Check if ID is unique")
+        // TODO: Clean id
+        image.id = newId
+    }
+}
+
+#Preview {
+    ImageDetailsView(image: MockImage.images.first!)
+}

CHDataManagement/Views/Images/ImagesView.swift

@@ -0,0 +1,62 @@
+import SwiftUI
+import SFSafeSymbols
+
+struct ImagesView: View {
+
+    @EnvironmentObject
+    var content: Content
+
+    let maximumItemWidth: CGFloat = 300
+
+    let aspectRatio: CGFloat = 1.5
+
+    let spacing: CGFloat = 20
+
+    @State
+    private var selectedImage: ImageResource?
+
+    @State
+    private var showImageDetails = false
+
+    var body: some View {
+        FlexibleColumnView(items: $content.images) { image, width in
+            let isSelected = selectedImage == image
+            let borderColor: Color = isSelected ? .accentColor : .clear
+            return image.imageToDisplay
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .border(borderColor, width: 5)
+                .frame(width: width)
+                .onTapGesture { didTap(image: image) }
+        }
+        .inspector(isPresented: $showImageDetails) {
+            if let selectedImage {
+                ImageDetailsView(image: selectedImage)
+            } else {
+                Text("Select an image to show its details")
+            }
+        }
+        .toolbar {
+            ToolbarItem(placement: .primaryAction) {
+                Button(action: { showImageDetails.toggle() }) {
+                    Label("Details", systemSymbol: .infoCircle)
+                }
+            }
+        }
+    }
+
+    private func didTap(image: ImageResource) {
+        if selectedImage == image {
+            selectedImage = nil
+        } else {
+            selectedImage = image
+        }
+    }
+}
+
+#Preview {
+    let content = Content()
+    content.images = MockImage.images
+    return ImagesView()
+        .environmentObject(content)
+}