Add calendar date badge to note list rows

Claude-Session: https://claude.ai/code/session_014esDWi42URLEC6Cj17hGQ3
2026-07-16 13:30:03 -04:00
parent a21dd62f17
commit 50adf522a8
3 changed files with 85 additions and 24 deletions
@@ -0,0 +1,53 @@
+import SwiftUI
+
+/// A torn-calendar-page date badge: month header over a day number and
+/// weekday, used to give note rows an at-a-glance date.
+struct CalendarBadge: View {
+    let date: Date
+    @Environment(\.colorScheme) private var colorScheme
+
+    var body: some View {
+        VStack(spacing: 0) {
+            Text(month)
+                .font(.system(size: 8, weight: .semibold))
+                .foregroundColor(.white)
+                .frame(maxWidth: .infinity)
+                .padding(.top, 6)
+                .padding(.bottom, 2)
+                .background(Color.accentColor)
+
+            VStack(spacing: 1) {
+                Text(dayNumber)
+                    .font(.system(size: 16, weight: .bold))
+                Text(dayOfWeek)
+                    .font(.system(size: 7))
+                    .foregroundColor(.secondary)
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.top, 3)
+            .padding(.bottom, 5)
+            .background(.quaternary)
+        }
+        .frame(width: 36, height: 44)
+        .clipShape(RoundedRectangle(cornerRadius: 5))
+        .overlay(
+            RoundedRectangle(cornerRadius: 5)
+                .strokeBorder(
+                    colorScheme == .dark ? Color.white.opacity(0.1) : Color.clear,
+                    lineWidth: 0.5
+                )
+        )
+    }
+
+    private var month: String {
+        date.formatted(.dateTime.month(.abbreviated)).uppercased()
+    }
+
+    private var dayNumber: String {
+        date.formatted(.dateTime.day())
+    }
+
+    private var dayOfWeek: String {
+        date.formatted(.dateTime.weekday(.abbreviated)).uppercased()
+    }
+}