diff --git a/Outpost/Features/Home/HomeView.swift b/Outpost/Features/Home/HomeView.swift index aca952d..7b86f1f 100644 --- a/Outpost/Features/Home/HomeView.swift +++ b/Outpost/Features/Home/HomeView.swift @@ -101,6 +101,7 @@ struct HomeView: View { PinnedDocumentCard(document: document) } .buttonStyle(.plain) + .pointerCursorOnHover() } } .padding(.horizontal, 24) diff --git a/Outpost/Features/Home/PinnedDocumentCard.swift b/Outpost/Features/Home/PinnedDocumentCard.swift index 04d19bc..c099fec 100644 --- a/Outpost/Features/Home/PinnedDocumentCard.swift +++ b/Outpost/Features/Home/PinnedDocumentCard.swift @@ -2,45 +2,57 @@ import SwiftUI import OutlineKit -/// Deliberately distinct from `DocumentCardView` — the pinned section is for -/// a quick scan of a small curated set, not browsing, so this is a dense -/// single-line row rather than a tall card, with an explicit pin glyph so -/// it doesn't read the same as the tab grids below it. +/// Same tall-card shape as `DocumentCardView` (the tab grids below it) so the +/// pinned section reads as a set of cards, not a row of tab-like chips — the +/// accent-filled pin badge is the one thing that marks these as pinned. struct PinnedDocumentCard: View { @Environment(StarStore.self) private var starStore let document: OutlineDocument var body: some View { - HStack(spacing: 10) { - if let emoji = document.emoji { - Text(emoji) - .font(.title3) - } else { - Image(systemName: "doc.text") - .font(.body) - .foregroundStyle(.secondary) + VStack(alignment: .leading, spacing: 8) { + HStack(spacing: 6) { + if let emoji = document.emoji { + Text(emoji) + .font(.title2) + } else { + Image(systemName: "doc.text") + .font(.title3) + .foregroundStyle(.secondary) + } + + Spacer() + + if starStore.isStarred(documentId: document.id) { + Image(systemName: "star.fill") + .font(.caption) + .foregroundStyle(.yellow) + } + + Image(systemName: "pin.fill") + .font(.caption2) + .foregroundStyle(.white) + .padding(5) + .background(Color.accentColor, in: Circle()) } Text(document.title.isEmpty ? "Untitled" : document.title) - .font(.callout.weight(.medium)) - .lineLimit(1) + .font(.headline) + .lineLimit(2) + .multilineTextAlignment(.leading) + .frame(maxWidth: .infinity, alignment: .leading) - Spacer(minLength: 0) - - if starStore.isStarred(documentId: document.id) { - Image(systemName: "star.fill") - .font(.caption2) - .foregroundStyle(.yellow) - } - - Image(systemName: "pin.fill") - .font(.caption2) + Text(document.updatedAt, format: .relative(presentation: .named)) + .font(.caption) .foregroundStyle(.secondary) } - .padding(.horizontal, 12) - .padding(.vertical, 9) - .frame(maxWidth: .infinity, alignment: .leading) - .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 8)) + .padding(14) + .frame(maxWidth: .infinity, minHeight: 96, alignment: .topLeading) + .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 12)) + .overlay( + RoundedRectangle(cornerRadius: 12) + .strokeBorder(Color.primary.opacity(0.08), lineWidth: 1) + ) } } #endif