From c36c70382b69ce487941c988b6c000245fb3baf1 Mon Sep 17 00:00:00 2001
From: psmattas <me@psmattas.com>
Date: Thu, 20 Aug 2026 22:26:21 +0100
Subject: [PATCH] redesign: pinned document cards on Home

PinnedDocumentCard was a squat single-line HStack chip (12/9 padding,
cornerRadius 8, flat tertiary fill) - in a grid of several it read as a
row of tab/segmented-control buttons rather than distinct documents.
Restyled to the same tall VStack card shape as DocumentCardView (the
tab grids below it): icon row, 2-line headline title, relative-date
caption, subtle border. The one thing that still marks these as
pinned vs. the grids below is an accent-filled circular pin badge in
the corner, replacing the old plain gray pin glyph.

Also wired the new pointerCursorOnHover() modifier onto the pinned
card buttons, same as every other clickable row in the sidebar/lists.
---
 Outpost/Features/Home/HomeView.swift          |  1 +
 .../Features/Home/PinnedDocumentCard.swift    | 68 +++++++++++--------
 2 files changed, 41 insertions(+), 28 deletions(-)

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