iOS client for Grain
grain.social
ios
photography
atproto
feat: add atmosphere app logos to login marquee (#18)
Replace text-only marquee with actual app logo images from the
atmosphere ecosystem. Logos are rendered via Canvas for performance.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
Chad Miller
Claude Opus 4.6
and committed by
GitHub
fabd694e
3dd11b61
+405
-12
+13
Grain/Assets.xcassets/atmo-anisota.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-anisota.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-anisota.imageset/atmo-anisota.jpg
+3
Grain/Assets.xcassets/atmo-anisota.imageset/atmo-anisota.jpg
+13
Grain/Assets.xcassets/atmo-beacon-bits.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-beacon-bits.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-beacon-bits.imageset/atmo-beacon-bits.jpg
+3
Grain/Assets.xcassets/atmo-beacon-bits.imageset/atmo-beacon-bits.jpg
+13
Grain/Assets.xcassets/atmo-blacksky.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-blacksky.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-blacksky.imageset/atmo-blacksky.jpg
+3
Grain/Assets.xcassets/atmo-blacksky.imageset/atmo-blacksky.jpg
+13
Grain/Assets.xcassets/atmo-blento.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-blento.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-blento.imageset/atmo-blento.jpg
+3
Grain/Assets.xcassets/atmo-blento.imageset/atmo-blento.jpg
+13
Grain/Assets.xcassets/atmo-bluesky.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-bluesky.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-bluesky.imageset/atmo-bluesky.jpg
+3
Grain/Assets.xcassets/atmo-bluesky.imageset/atmo-bluesky.jpg
+13
Grain/Assets.xcassets/atmo-eurosky.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-eurosky.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-eurosky.imageset/atmo-eurosky.jpg
+3
Grain/Assets.xcassets/atmo-eurosky.imageset/atmo-eurosky.jpg
+13
Grain/Assets.xcassets/atmo-flashes.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-flashes.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-flashes.imageset/atmo-flashes.jpg
+3
Grain/Assets.xcassets/atmo-flashes.imageset/atmo-flashes.jpg
+13
Grain/Assets.xcassets/atmo-gander.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-gander.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-gander.imageset/atmo-gander.jpg
+3
Grain/Assets.xcassets/atmo-gander.imageset/atmo-gander.jpg
+13
Grain/Assets.xcassets/atmo-germ.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-germ.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-germ.imageset/atmo-germ.jpg
+3
Grain/Assets.xcassets/atmo-germ.imageset/atmo-germ.jpg
+13
Grain/Assets.xcassets/atmo-leaflet.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-leaflet.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-leaflet.imageset/atmo-leaflet.jpg
+3
Grain/Assets.xcassets/atmo-leaflet.imageset/atmo-leaflet.jpg
+13
Grain/Assets.xcassets/atmo-northsky.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-northsky.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-northsky.imageset/atmo-northsky.jpg
+3
Grain/Assets.xcassets/atmo-northsky.imageset/atmo-northsky.jpg
+13
Grain/Assets.xcassets/atmo-offprint.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-offprint.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-offprint.imageset/atmo-offprint.jpg
+3
Grain/Assets.xcassets/atmo-offprint.imageset/atmo-offprint.jpg
+13
Grain/Assets.xcassets/atmo-pckt.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-pckt.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-pckt.imageset/atmo-pckt.jpg
+3
Grain/Assets.xcassets/atmo-pckt.imageset/atmo-pckt.jpg
+13
Grain/Assets.xcassets/atmo-plyr.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-plyr.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-plyr.imageset/atmo-plyr.jpg
+3
Grain/Assets.xcassets/atmo-plyr.imageset/atmo-plyr.jpg
+13
Grain/Assets.xcassets/atmo-popfeed.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-popfeed.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-popfeed.imageset/atmo-popfeed.jpg
+3
Grain/Assets.xcassets/atmo-popfeed.imageset/atmo-popfeed.jpg
+13
Grain/Assets.xcassets/atmo-semble.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-semble.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-semble.imageset/atmo-semble.jpg
+3
Grain/Assets.xcassets/atmo-semble.imageset/atmo-semble.jpg
+13
Grain/Assets.xcassets/atmo-skylight.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-skylight.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-skylight.imageset/atmo-skylight.jpg
+3
Grain/Assets.xcassets/atmo-skylight.imageset/atmo-skylight.jpg
+13
Grain/Assets.xcassets/atmo-slices.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-slices.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-slices.imageset/atmo-slices.jpg
+3
Grain/Assets.xcassets/atmo-slices.imageset/atmo-slices.jpg
+13
Grain/Assets.xcassets/atmo-spark.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-spark.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-spark.imageset/atmo-spark.png
+3
Grain/Assets.xcassets/atmo-spark.imageset/atmo-spark.png
+13
Grain/Assets.xcassets/atmo-stream-place.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-stream-place.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-stream-place.imageset/atmo-stream-place.jpg
+3
Grain/Assets.xcassets/atmo-stream-place.imageset/atmo-stream-place.jpg
+13
Grain/Assets.xcassets/atmo-tangled.imageset/Contents.json
+13
Grain/Assets.xcassets/atmo-tangled.imageset/Contents.json
+3
Grain/Assets.xcassets/atmo-tangled.imageset/atmo-tangled.jpg
+3
Grain/Assets.xcassets/atmo-tangled.imageset/atmo-tangled.jpg
+69
-12
Grain/Views/LoginView.swift
+69
-12
Grain/Views/LoginView.swift
···
73
73
74
74
if suggestions.isEmpty {
75
75
// Heading
76
-
Text("Log in with your internet handle")
76
+
Text("Log in with your atmosphere account")
77
77
.font(.title3.weight(.semibold))
78
78
.foregroundStyle(.white)
79
79
.multilineTextAlignment(.center)
80
80
.padding(.bottom, 4)
81
81
82
-
Text("Enter the domain you use as your identity across the open social web.")
83
-
.font(.subheadline)
84
-
.foregroundStyle(.white.opacity(0.7))
85
-
.multilineTextAlignment(.center)
86
-
.padding(.horizontal, 8)
87
-
88
-
Link("Learn more", destination: URL(string: "https://internethandle.org")!)
89
-
.font(.subheadline.weight(.medium))
90
-
.underline()
91
-
.foregroundStyle(.white)
82
+
AtmosphereLogosMarquee()
92
83
.padding(.bottom, 16)
93
84
}
94
85
···
100
91
.font(.body.weight(.medium))
101
92
.foregroundStyle(.white.opacity(0.5))
102
93
103
-
TextField("e.g. jasmine.garden", text: $handle, prompt: Text("e.g. jasmine.garden").foregroundStyle(.white.opacity(0.5)))
94
+
TextField("e.g. user.bsky.social", text: $handle, prompt: Text("e.g. user.bsky.social").foregroundStyle(.white.opacity(0.5)))
104
95
.foregroundStyle(.white)
105
96
.textContentType(.username)
106
97
.autocorrectionDisabled()
···
406
397
let avatar: String?
407
398
var id: String {
408
399
handle
400
+
}
401
+
}
402
+
403
+
// MARK: - Atmosphere Logos Marquee
404
+
405
+
private struct AtmosphereApp: Identifiable {
406
+
let name: String
407
+
let logo: String
408
+
var id: String {
409
+
name
410
+
}
411
+
}
412
+
413
+
private struct AtmosphereLogosMarquee: View {
414
+
private static let apps: [AtmosphereApp] = [
415
+
.init(name: "Bluesky", logo: "atmo-bluesky"),
416
+
.init(name: "Tangled", logo: "atmo-tangled"),
417
+
.init(name: "Anisota", logo: "atmo-anisota"),
418
+
.init(name: "Beacon Bits", logo: "atmo-beacon-bits"),
419
+
.init(name: "Eurosky", logo: "atmo-eurosky"),
420
+
.init(name: "Flashes", logo: "atmo-flashes"),
421
+
.init(name: "Gander", logo: "atmo-gander"),
422
+
.init(name: "Germ", logo: "atmo-germ"),
423
+
.init(name: "Leaflet", logo: "atmo-leaflet"),
424
+
.init(name: "Northsky", logo: "atmo-northsky"),
425
+
.init(name: "Offprint", logo: "atmo-offprint"),
426
+
.init(name: "Pckt", logo: "atmo-pckt"),
427
+
.init(name: "Plyr", logo: "atmo-plyr"),
428
+
.init(name: "Popfeed", logo: "atmo-popfeed"),
429
+
.init(name: "Blento", logo: "atmo-blento"),
430
+
.init(name: "Semble", logo: "atmo-semble"),
431
+
.init(name: "Skylight", logo: "atmo-skylight"),
432
+
.init(name: "Blacksky", logo: "atmo-blacksky"),
433
+
.init(name: "Spark", logo: "atmo-spark"),
434
+
.init(name: "Stream Place", logo: "atmo-stream-place"),
435
+
]
436
+
437
+
private let logoSize: CGFloat = 40
438
+
private let itemSpacing: CGFloat = 12
439
+
private let speed: CGFloat = 25
440
+
441
+
private static let uiImages: [UIImage] = apps.compactMap { UIImage(named: $0.logo) }
442
+
443
+
var body: some View {
444
+
TimelineView(.animation) { (timeline: TimelineViewDefaultContext) in
445
+
let now = timeline.date.timeIntervalSinceReferenceDate
446
+
Canvas { ctx, size in
447
+
let images = Self.uiImages
448
+
let totalWidth = CGFloat(images.count) * (logoSize + itemSpacing)
449
+
let scrollOffset = (CGFloat(now) * speed).truncatingRemainder(dividingBy: totalWidth)
450
+
451
+
for i in 0 ..< images.count * 2 {
452
+
let idx = i % images.count
453
+
let x = CGFloat(i) * (logoSize + itemSpacing) - scrollOffset
454
+
guard x + logoSize > 0, x < size.width else { continue }
455
+
let rect = CGRect(x: x, y: (size.height - logoSize) / 2, width: logoSize, height: logoSize)
456
+
ctx.drawLayer { layerCtx in
457
+
let clipPath = RoundedRectangle(cornerRadius: 10).path(in: rect)
458
+
layerCtx.clip(to: clipPath)
459
+
layerCtx.draw(Image(uiImage: images[idx]), in: rect)
460
+
}
461
+
}
462
+
}
463
+
.frame(height: 44)
464
+
}
465
+
.clipped()
409
466
}
410
467
}
411
468