feat: experimental falback gradient for pure commons categories without main image

Author: nylki

CommonsFinder/Views/Reusable Views/CategoryTeaser.swift

@@ -73,32 +73,44 @@ private struct CategoryTeaserBase: View {
     }
 
 
+    @ViewBuilder
     private var background: some View {
-        Color(.emptyWikiItemBackground)
-            .overlay {
-                if let imageRequest = categoryInfo.base.thumbnailImage {
-                    LazyImage(request: imageRequest, transaction: .init(animation: .linear)) { imageState in
-                        if let image = imageState.image {
-                            image.resizable()
-                                .aspectRatio(contentMode: .fill)
-                                .scaledToFill()
-                        } else {
-                            Color.clear
+        let imageRequest = categoryInfo.base.thumbnailImage
+        
+        ZStack {
+            if let imageRequest {
+                Color(.emptyWikiItemBackground)
+                    .overlay {
+                        LazyImage(request: imageRequest, transaction: .init(animation: .linear)) { imageState in
+                            if let image = imageState.image {
+                                image.resizable()
+                                    .aspectRatio(contentMode: .fill)
+                                    .scaledToFill()
+                            } else {
+                                Color.clear
+                            }
                         }
                     }
-                }
-            }
-            .overlay {
-                if categoryInfo.base.thumbnailImage != nil {
-                    LinearGradient(
-                        stops: [
-                            .init(color: .init(white: 0, opacity: 0), location: 0),
-                            .init(color: .init(white: 0, opacity: 0.1), location: 0.35),
-                            .init(color: .init(white: 0, opacity: 0.2), location: 0.5),
-                            .init(color: .init(white: 0, opacity: 0.8), location: 1),
-                        ], startPoint: .top, endPoint: .bottom)
-                }
+            } else {
+                ProceduralBackground(categoryName: categoryInfo.base.commonsCategory ?? categoryInfo.base.wikidataId ?? "")
+                    .blur(radius: 5)
+                    .clipped()
             }
+        }
+        .overlay {
+            LinearGradient(
+                stops: [
+                    .init(color: .init(white: 0, opacity: 0), location: 0),
+                    .init(color: .init(white: 0, opacity: 0.1), location: 0.35),
+                    .init(color: .init(white: 0, opacity: 0.2), location: 0.5),
+                    .init(color: .init(white: 0, opacity: 0.8), location: 1),
+                ], startPoint: .top, endPoint: .bottom)
+        }
+
+        
+        
+        
+
     }
 }
 

CommonsFinder/Views/Reusable Views/ProceduralBackground.swift

@@ -0,0 +1,102 @@
+//
+//  ProceduralBackground.swift
+//  CommonsFinder
+//
+//  Created by Tom Brewe on 27.08.25.
+//
+
+import SwiftUI
+import RegexBuilder
+import NaturalLanguage
+import Algorithms
+
+struct ProceduralBackground: View {
+    let categoryName: String
+    var body: some View {
+
+        let gradient = createGradient(from: categoryName)
+        gradient.opacity(0.5)
+    }
+}
+
+@ViewBuilder
+private func createGradient(from string: String) -> some View {
+    let colors = categoryColors(for: string)
+    let hues = categoryHues(for: string)
+    let points: [SIMD2<Float>] = hues.adjacentPairs().map({ (x,y) in
+            .init(x: Float(x), y: Float(y))
+    })
+    let dim = Int(sqrt(Double(points.count)))
+    
+
+    MeshGradient(width: dim, height: dim, points: points, colors: colors, background: colors.first?.opacity(0.8) ?? .clear, smoothsColors: true)
+}
+
+
+private func categoryHues(for string: String) -> [Double] {
+    string
+        .lowercased()
+        .adjacentPairs()
+        .map { [$0.0, $0.1] }
+        .map { $0.prefix(2).hashValue }
+        .map { v in
+            (Double(v) - Double(Int.min)) / Double(UInt.max)
+        }
+}
+
+private func categoryColors(for string: String) -> [Color] {
+    let colors: [Color] = categoryHues(for: string)
+        .map { hue in
+                .init(hue: hue, saturation: 0.6, brightness: 0.5, opacity: 1)
+    }
+    return colors
+}
+
+
+#Preview {
+    let categorieNames = [
+        "apples of the forrest",
+        "people of france",
+        "people of Paris",
+        "sheep walking",
+        "people with sheep",
+        "aaa aaa",
+        "Ananas food",
+        "Banana Food",
+        "Banana dessert",
+        "Berlin-Adlershof",
+        "Berlin-Kreuzberg",
+        "Berlin-Friedrichshain",
+        "Berlin-Zehlendorf",
+        "Potsdam-Babelsberg",
+        "Potsdam-Jägervorstadt",
+        "Potsdam-West",
+        "Potsdam-Drewitz",
+        "zzz zzz",
+        "3 continents",
+        "Streets of Berlin",
+        "Streets of New York City in the 1990s",
+        "Berlin",
+        "Berlin Wall",
+        "Sundown in Paris",
+        "cities in Africa",
+        "cities in America",
+        "Cities in Europe",
+        "Flux Compensator",
+        "Fluvial geomorphology"
+        
+    ]
+    
+    ScrollView(.vertical) {
+        LazyVGrid(columns: [.init(), .init(), .init()]) {
+            ForEach(categorieNames, id: \.self) { categoryName in
+                ProceduralBackground(categoryName: categoryName)
+                    .frame(width: 100, height: 100)
+                    .overlay {
+                        Text(categoryName)
+                    }
+            }
+        }
+    }
+}
+