Every screen now speaks the paper vocabulary rather than only the bookmarks screen: Search, Sources, Podcasts and the player, Settings, Add/Edit, Smart Collections, Ask, Onboarding, the browser toolbar, the Siri snippets, and the share extension's save card. The change is mostly a design system rather than per-screen tweaks. LibraryKit gains: - Semantic colors — secondary/tertiary/faint text, `raised` surfaces, and accent/alarm/affirm, so screens stop reaching for .secondary, systemGray, .blue, .red and .green. The three status colors come out of the palette (the swatch blue, vermilion and forest) rather than from the system set, so the design keeps spending one set of inks. - PaperType — the two voices made explicit. Prose (titles, summaries, anything a person wrote) is serif; anything the machine contributes (domains, dates, counts, tags, labels, buttons) is monospaced. Keeping that split strict is what makes the design read as archival rather than as decoration. - paperSurface() / paperField() / paperCard() for grounds, inputs and raised blocks. - PaperEmptyState, because ContentUnavailableView can't be restyled — it draws its own bold system type and grey, which was the loudest remaining system voice once the screens moved onto the sheet. All nine usages are converted. The app also sets one accent for the system chrome it doesn't draw — tab bar, search fields, switches, swipe actions — which otherwise stayed system blue around paper screens. BookmarkRow is deleted. Once Search moved to the library row and TagBookmarksView was gone, nothing passed .classic, so the style fork in BookmarkListRow went with it. There is one bookmark row now. The share extension compiles LibraryKit directly, since its save card is a user-facing surface and should not be the one place still using system styling. Verified on device in both color schemes; screens toured with a temporary UI test harness (removed). Suite passes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JgLHztZGaEHvS3KNeGQmRM
154 lines
6.0 KiB
Swift
154 lines
6.0 KiB
Swift
import SwiftUI
|
|
|
|
/// The library's list presentation, and now the app's only bookmark row. It
|
|
/// carries what the old system-styled row did — unread state, excerpt, tags,
|
|
/// podcast affordance, reading progress — in the paper vocabulary. The favicon
|
|
/// became the color chip, so the same swatch that identifies a card in the grid
|
|
/// identifies its row in the list.
|
|
struct LibraryListRow: View {
|
|
let bookmark: Bookmark
|
|
var readingProgress: Double = 0
|
|
var onPodcast: (() -> Void)? = nil
|
|
|
|
@State private var podcastTapCount = 0
|
|
@State private var podcastCached = false
|
|
|
|
private var item: LibraryItem { LibraryItem(bookmark: bookmark) }
|
|
|
|
/// Compact, static relative date ("6 min ago"). Using a formatter instead of
|
|
/// `Text(_, style: .relative)` avoids the live per-second ticking timer.
|
|
private static let relativeFormatter: RelativeDateTimeFormatter = {
|
|
let f = RelativeDateTimeFormatter()
|
|
f.unitsStyle = .abbreviated
|
|
f.dateTimeStyle = .named
|
|
return f
|
|
}()
|
|
|
|
var body: some View {
|
|
HStack(alignment: .top, spacing: 12) {
|
|
RoundedRectangle(cornerRadius: 3)
|
|
.fill(item.swatch)
|
|
.frame(width: 34, height: 46)
|
|
.overlay(alignment: .topLeading) {
|
|
if bookmark.unread {
|
|
// Ink, not blue: the palette is the only color the
|
|
// library spends, and an accent dot would compete with
|
|
// the chip it sits on.
|
|
Circle()
|
|
.fill(Paper.ink)
|
|
.frame(width: 10, height: 10)
|
|
.overlay(Circle().stroke(Paper.sheet, lineWidth: 2))
|
|
.offset(x: -4, y: -4)
|
|
}
|
|
}
|
|
|
|
VStack(alignment: .leading, spacing: 5) {
|
|
Text(item.listDisplay)
|
|
.font(.system(size: 21, design: .serif))
|
|
.foregroundStyle(Paper.ink)
|
|
.lineLimit(2)
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
|
|
HStack(spacing: 5) {
|
|
Text(item.source)
|
|
Text("·")
|
|
Text(Self.relativeFormatter.localizedString(
|
|
for: bookmark.dateAdded, relativeTo: Date()
|
|
))
|
|
}
|
|
.font(.system(size: 15, design: .monospaced))
|
|
.foregroundStyle(Paper.ink.opacity(0.45))
|
|
.lineLimit(1)
|
|
|
|
if let excerpt = rowExcerpt {
|
|
Text(excerpt.text)
|
|
.font(.system(size: 18, design: .serif))
|
|
.italic(excerpt.isAI)
|
|
.foregroundStyle(Paper.ink.opacity(0.6))
|
|
.lineLimit(2)
|
|
}
|
|
|
|
if !effectiveTags.isEmpty {
|
|
tagRow
|
|
}
|
|
}
|
|
|
|
Spacer(minLength: 6)
|
|
|
|
if let onPodcast {
|
|
Button {
|
|
podcastTapCount += 1
|
|
onPodcast()
|
|
} label: {
|
|
Image(systemName: podcastCached ? "headphones.circle.fill" : "headphones.circle")
|
|
.font(.system(size: 25.5, weight: .light))
|
|
.foregroundStyle(Paper.ink.opacity(podcastCached ? 0.75 : 0.3))
|
|
}
|
|
.buttonStyle(.plain)
|
|
.sensoryFeedback(.impact(weight: .medium), trigger: podcastTapCount)
|
|
}
|
|
}
|
|
.padding(.vertical, 14)
|
|
.contentShape(Rectangle())
|
|
.overlay(alignment: .bottom) {
|
|
if readingProgress > 0.02 {
|
|
GeometryReader { geo in
|
|
ZStack(alignment: .leading) {
|
|
Rectangle().fill(Paper.ink.opacity(0.1))
|
|
Rectangle()
|
|
.fill(Paper.ink.opacity(0.5))
|
|
.frame(width: geo.size.width * min(readingProgress, 1))
|
|
}
|
|
}
|
|
.frame(height: 2)
|
|
}
|
|
}
|
|
.task(id: bookmark.url) {
|
|
// Stat the podcast cache off the render path: once per appearance
|
|
// (and when the URL changes), not on every `body` recomputation.
|
|
let path = ClaudeService.cachedPodcastURL(for: bookmark.url).path
|
|
podcastCached = await Task.detached { FileManager.default.fileExists(atPath: path) }.value
|
|
}
|
|
}
|
|
|
|
/// Tags wrap onto up to two lines rather than scrolling sideways. At the
|
|
/// scaled-up type a horizontal strip clipped its third chip mid-word, which
|
|
/// read as broken text; wrapping shows whole tags or none.
|
|
private var tagRow: some View {
|
|
FlowLayout(spacing: 5, lineSpacing: 5, maxRows: 2) {
|
|
ForEach(effectiveTags, id: \.self) { tag in
|
|
Text(tag)
|
|
.font(.system(size: 15, design: .monospaced))
|
|
.foregroundStyle(Paper.ink.opacity(0.55))
|
|
.lineLimit(1)
|
|
.padding(.horizontal, 8)
|
|
.padding(.vertical, 3)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 4)
|
|
.stroke(Paper.rule.opacity(0.6), lineWidth: 0.6)
|
|
)
|
|
}
|
|
}
|
|
.padding(.top, 1)
|
|
}
|
|
|
|
/// Excerpt shown under the title: prefer the AI summary (italic), else the
|
|
/// page's scraped description / user note. nil hides the line entirely.
|
|
private var rowExcerpt: (text: String, isAI: Bool)? {
|
|
if let s = bookmark.aiSummary?.trimmingCharacters(in: .whitespacesAndNewlines), !s.isEmpty {
|
|
return (s, true)
|
|
}
|
|
if let e = bookmark.contentExcerpt {
|
|
return (e, false)
|
|
}
|
|
return nil
|
|
}
|
|
|
|
private var effectiveTags: [String] {
|
|
let base = bookmark.tagNames
|
|
let ai = bookmark.aiTags ?? []
|
|
let extra = ai.filter { !base.contains($0) }.prefix(3)
|
|
return (base + extra).prefix(6).map { $0 }
|
|
}
|
|
}
|