refactor(share): popover instead of modal sheet, redesigned layout

Share button now opens a popover anchored to the toolbar icon instead
of a full modal window. Redesigned the content as a narrow vertical
card (icon section headers, avatar-initial rows for members, link
card with collapsible title override) sized to fit the People section
without scrolling in the common case.

Outpost/Features/Collections/DocumentReaderView.swift

@@ -111,6 +111,9 @@ struct DocumentReaderView: View {
                     Image(systemName: "square.and.arrow.up")
                 }
                 .help("Share")
+                .popover(isPresented: $isShowingShareSheet, arrowEdge: .bottom) {
+                    DocumentShareSheet(apiClient: apiClient, documentId: viewModel.documentId)
+                }
 
                 Button {
                     Task { await viewModel.toggleEditing() }
@@ -215,9 +218,6 @@ struct DocumentReaderView: View {
         .sheet(isPresented: $isShowingSearchSheet) {
             DocumentSearchSheet(apiClient: apiClient, document: document)
         }
-        .sheet(isPresented: $isShowingShareSheet) {
-            DocumentShareSheet(apiClient: apiClient, documentId: viewModel.documentId)
-        }
         .sheet(isPresented: $isShowingNewDocumentSheet) {
             NewDocumentSheet(apiClient: apiClient, initialParentDocument: document) { child in
                 onDocumentCreated()

Outpost/Features/Collections/DocumentShareSheet.swift

@@ -3,10 +3,12 @@ import AppKit
 import SwiftUI
 import OutlineKit
 
+/// Content of the Share popover anchored to the reader toolbar's Share
+/// button (see `DocumentReaderView`'s `.popover(isPresented:)`). Was a
+/// modal `.sheet` originally — moved to a popover so it reads as "options
+/// for this button" instead of interrupting the whole window.
 @MainActor
 struct DocumentShareSheet: View {
-    @Environment(\.dismiss) private var dismiss
-
     let apiClient: OutlineAPIClient
     let documentId: String
 
@@ -16,6 +18,7 @@ struct DocumentShareSheet: View {
     @State private var isUpdatingShare = false
     @State private var isRevoking = false
     @State private var isShowingRevokeConfirmation = false
+    @State private var isShowingTitleField = false
     @State private var shareErrorMessage: String?
     @State private var didCopy = false
 
@@ -30,22 +33,25 @@ struct DocumentShareSheet: View {
     @State private var actionErrorMessage: String?
 
     var body: some View {
-        VStack(alignment: .leading, spacing: 16) {
+        VStack(alignment: .leading, spacing: 0) {
-            HStack {
+            Text("Share")
-                Text("Share")
+                .font(.headline)
-                    .font(.headline)
+                .padding(.horizontal, 16)
-                Spacer()
+                .padding(.top, 14)
-                Button("Done") { dismiss() }
+                .padding(.bottom, 10)
-            }
-
-            shareLinkSection
 
             Divider()
 
-            peopleSection
+            ScrollView {
+                VStack(alignment: .leading, spacing: 18) {
+                    shareLinkSection
+                    peopleSection
+                }
+                .padding(16)
+            }
+            .frame(minHeight: 150, maxHeight: 900)
         }
-        .padding(20)
+        .frame(width: 280)
-        .frame(width: 380)
         .task { await loadShare() }
         .task { await loadMembers() }
         .task(id: userSearchQuery) {
@@ -72,70 +78,105 @@ struct DocumentShareSheet: View {
         }
     }
 
+    // MARK: - Link section
+
     @ViewBuilder
     private var shareLinkSection: some View {
-        if isLoadingShare {
+        VStack(alignment: .leading, spacing: 8) {
-            ProgressView().frame(maxWidth: .infinity)
+            sectionHeader(icon: "link", title: "Public Link")
-        } else if let shareErrorMessage {
+
-            Text(shareErrorMessage)
+            if isLoadingShare {
-                .font(.callout)
+                ProgressView()
-                .foregroundStyle(.red)
+                    .controlSize(.small)
-        } else if let share {
+                    .frame(maxWidth: .infinity, alignment: .center)
-            if let url = share.url {
+            } else if let shareErrorMessage {
-                HStack {
+                Text(shareErrorMessage)
-                    Text(url)
+                    .font(.callout)
-                        .font(.callout)
+                    .foregroundStyle(.red)
-                        .lineLimit(1)
+            } else if let share {
-                        .truncationMode(.middle)
+                VStack(alignment: .leading, spacing: 6) {
-                    Spacer()
+                    if let url = share.url {
-                    Button {
+                        HStack(spacing: 8) {
-                        copyLink(url)
+                            Image(systemName: "globe")
-                    } label: {
+                                .foregroundStyle(.secondary)
-                        Image(systemName: didCopy ? "checkmark" : "doc.on.doc")
+                                .font(.callout)
+                            Text(url)
+                                .font(.callout)
+                                .lineLimit(1)
+                                .truncationMode(.middle)
+                            Spacer(minLength: 0)
+                            Button {
+                                copyLink(url)
+                            } label: {
+                                Image(systemName: didCopy ? "checkmark" : "doc.on.doc")
+                                    .font(.callout)
+                            }
+                            .buttonStyle(.plain)
+                            .foregroundStyle(didCopy ? .green : .secondary)
+                            .help("Copy link")
+                        }
+                    }
+
+                    if isShowingTitleField {
+                        TextField("Public page title", text: $titleOverride)
+                            .textFieldStyle(.roundedBorder)
+                            .font(.callout)
+                            .disabled(isUpdatingShare)
+                            .onSubmit {
+                                Task { await setTitle(titleOverride) }
+                            }
+                    }
+                }
+                .padding(10)
+                .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 8))
+
+                HStack(spacing: 12) {
+                    Button(isShowingTitleField ? "Hide title field" : "Set public title") {
+                        isShowingTitleField.toggle()
                     }
                     .buttonStyle(.plain)
-                }
-                .padding(8)
-                .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 6))
-            }
-
-            VStack(alignment: .leading, spacing: 4) {
-                Text("Public page title")
                     .font(.caption)
                     .foregroundStyle(.secondary)
-                TextField("Uses the document's title if empty", text: $titleOverride)
-                    .textFieldStyle(.roundedBorder)
-                    .disabled(isUpdatingShare)
-                    .onSubmit {
-                        Task { await setTitle(titleOverride) }
-                    }
-            }
 
-            Button("Revoke Link", role: .destructive) {
+                    Spacer()
-                isShowingRevokeConfirmation = true
+
-            }
+                    Button("Revoke", role: .destructive) {
-            .disabled(isRevoking)
+                        isShowingRevokeConfirmation = true
-        } else {
+                    }
-            Button("Create Share Link") {
+                    .buttonStyle(.plain)
-                Task { await create() }
+                    .font(.caption)
+                    .foregroundStyle(.red)
+                    .disabled(isRevoking)
+                }
+            } else {
+                Button {
+                    Task { await create() }
+                } label: {
+                    Label("Create Share Link", systemImage: "link.badge.plus")
+                        .frame(maxWidth: .infinity)
+                }
+                .buttonStyle(.bordered)
+                .controlSize(.regular)
             }
         }
     }
 
+    // MARK: - People section
+
     @ViewBuilder
     private var peopleSection: some View {
         VStack(alignment: .leading, spacing: 8) {
             HStack {
-                Text("People with access")
+                sectionHeader(icon: "person.2", title: "People with Access")
-                    .font(.caption)
-                    .foregroundStyle(.secondary)
                 Spacer()
                 Button {
                     isShowingAddPerson.toggle()
                 } label: {
-                    Image(systemName: "person.badge.plus")
+                    Image(systemName: isShowingAddPerson ? "xmark.circle.fill" : "person.badge.plus")
+                        .font(.callout)
                 }
                 .buttonStyle(.plain)
+                .foregroundStyle(.secondary)
                 .help("Add a person")
             }
 
@@ -144,21 +185,37 @@ struct DocumentShareSheet: View {
             }
 
             if isLoadingMembers {
-                ProgressView().controlSize(.small)
+                ProgressView()
+                    .controlSize(.small)
+                    .frame(maxWidth: .infinity, alignment: .center)
             } else if members.isEmpty {
                 Text("No one else has explicit access yet.")
                     .font(.callout)
                     .foregroundStyle(.secondary)
             } else {
-                ForEach(members) { member in
+                VStack(spacing: 2) {
-                    memberRow(member)
+                    ForEach(members) { member in
+                        memberRow(member)
+                    }
                 }
             }
         }
     }
 
+    private func sectionHeader(icon: String, title: String) -> some View {
+        HStack(spacing: 6) {
+            Image(systemName: icon)
+                .font(.caption)
+                .foregroundStyle(.secondary)
+            Text(title)
+                .font(.caption.weight(.semibold))
+                .foregroundStyle(.secondary)
+                .textCase(.uppercase)
+        }
+    }
+
     private var addPersonSection: some View {
-        VStack(alignment: .leading, spacing: 6) {
+        VStack(alignment: .leading, spacing: 8) {
             TextField("Search people by name or email", text: $userSearchQuery)
                 .textFieldStyle(.roundedBorder)
 
@@ -170,44 +227,55 @@ struct DocumentShareSheet: View {
             .labelsHidden()
 
             if isSearchingUsers {
-                ProgressView().controlSize(.small)
+                ProgressView()
+                    .controlSize(.small)
+                    .frame(maxWidth: .infinity, alignment: .center)
             } else if !userSearchQuery.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                 if userSearchResults.isEmpty {
                     Text("No matches.")
                         .font(.callout)
                         .foregroundStyle(.secondary)
                 } else {
-                    ForEach(userSearchResults) { user in
+                    VStack(spacing: 2) {
-                        Button {
+                        ForEach(userSearchResults) { user in
-                            Task { await addUser(user) }
+                            Button {
-                        } label: {
+                                Task { await addUser(user) }
-                            HStack {
+                            } label: {
-                                Text(user.name)
+                                HStack(spacing: 8) {
-                                    .font(.callout)
+                                    avatar(for: user.name)
-                                Spacer()
+                                    Text(user.name)
-                                Image(systemName: "plus.circle")
+                                        .font(.callout)
+                                    Spacer(minLength: 0)
+                                    Image(systemName: "plus.circle")
+                                        .foregroundStyle(.secondary)
+                                }
+                                .contentShape(Rectangle())
+                                .padding(.vertical, 4)
                             }
-                            .contentShape(Rectangle())
+                            .buttonStyle(.plain)
+                            .disabled(isAddingUser)
                         }
-                        .buttonStyle(.plain)
-                        .disabled(isAddingUser)
                     }
                 }
             }
         }
-        .padding(8)
+        .padding(10)
-        .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 6))
+        .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 8))
     }
 
     private func memberRow(_ member: OutlineDocumentMember) -> some View {
-        HStack {
+        HStack(spacing: 8) {
+            avatar(for: member.name)
             Text(member.name)
                 .font(.callout)
-            Spacer()
+            Spacer(minLength: 0)
             if let permission = member.permission {
                 Text(permission == "read_write" ? "Can edit" : "Can view")
                     .font(.caption)
                     .foregroundStyle(.secondary)
+                    .padding(.horizontal, 6)
+                    .padding(.vertical, 2)
+                    .background(.fill.tertiary, in: Capsule())
             }
             Button {
                 Task { await removeUser(member) }
@@ -217,6 +285,24 @@ struct DocumentShareSheet: View {
             }
             .buttonStyle(.plain)
         }
+        .padding(.vertical, 4)
+    }
+
+    private func avatar(for name: String) -> some View {
+        Circle()
+            .fill(.fill.secondary)
+            .frame(width: 22, height: 22)
+            .overlay {
+                Text(initials(for: name))
+                    .font(.system(size: 10, weight: .semibold))
+                    .foregroundStyle(.secondary)
+            }
+    }
+
+    private func initials(for name: String) -> String {
+        let parts = name.split(separator: " ").prefix(2)
+        let letters = parts.compactMap { $0.first }
+        return letters.isEmpty ? "?" : String(letters).uppercased()
     }
 
     private func copyLink(_ url: String) {
@@ -275,6 +361,7 @@ struct DocumentShareSheet: View {
             try await apiClient.revokeShare(id: share.id)
             self.share = nil
             titleOverride = ""
+            isShowingTitleField = false
         } catch {
             actionErrorMessage = outlineErrorMessage(error, fallback: "Couldn't revoke this share link.")
         }