From 9ca1c77bb9aa8eafb1c2a9bafcba5e7927b07843 Mon Sep 17 00:00:00 2001 From: psavarmattas Date: Fri, 14 Aug 2026 22:06:04 +0100 Subject: [PATCH] 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. --- .../Collections/DocumentReaderView.swift | 6 +- .../Collections/DocumentShareSheet.swift | 243 ++++++++++++------ 2 files changed, 168 insertions(+), 81 deletions(-) diff --git a/Outpost/Features/Collections/DocumentReaderView.swift b/Outpost/Features/Collections/DocumentReaderView.swift index e46b20c..d99df2d 100644 --- a/Outpost/Features/Collections/DocumentReaderView.swift +++ b/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() diff --git a/Outpost/Features/Collections/DocumentShareSheet.swift b/Outpost/Features/Collections/DocumentShareSheet.swift index 261184b..d259b34 100644 --- a/Outpost/Features/Collections/DocumentShareSheet.swift +++ b/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) { - HStack { - Text("Share") - .font(.headline) - Spacer() - Button("Done") { dismiss() } - } - - shareLinkSection + VStack(alignment: .leading, spacing: 0) { + Text("Share") + .font(.headline) + .padding(.horizontal, 16) + .padding(.top, 14) + .padding(.bottom, 10) Divider() - peopleSection + ScrollView { + VStack(alignment: .leading, spacing: 18) { + shareLinkSection + peopleSection + } + .padding(16) + } + .frame(minHeight: 150, maxHeight: 900) } - .padding(20) - .frame(width: 380) + .frame(width: 280) .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 { - ProgressView().frame(maxWidth: .infinity) - } else if let shareErrorMessage { - Text(shareErrorMessage) - .font(.callout) - .foregroundStyle(.red) - } else if let share { - if let url = share.url { - HStack { - Text(url) - .font(.callout) - .lineLimit(1) - .truncationMode(.middle) - Spacer() - Button { - copyLink(url) - } label: { - Image(systemName: didCopy ? "checkmark" : "doc.on.doc") + VStack(alignment: .leading, spacing: 8) { + sectionHeader(icon: "link", title: "Public Link") + + if isLoadingShare { + ProgressView() + .controlSize(.small) + .frame(maxWidth: .infinity, alignment: .center) + } else if let shareErrorMessage { + Text(shareErrorMessage) + .font(.callout) + .foregroundStyle(.red) + } else if let share { + VStack(alignment: .leading, spacing: 6) { + if let url = share.url { + HStack(spacing: 8) { + Image(systemName: "globe") + .foregroundStyle(.secondary) + .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) { - isShowingRevokeConfirmation = true - } - .disabled(isRevoking) - } else { - Button("Create Share Link") { - Task { await create() } + Spacer() + + Button("Revoke", role: .destructive) { + isShowingRevokeConfirmation = true + } + .buttonStyle(.plain) + .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") - .font(.caption) - .foregroundStyle(.secondary) + sectionHeader(icon: "person.2", title: "People with Access") 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 - memberRow(member) + VStack(spacing: 2) { + 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 - Button { - Task { await addUser(user) } - } label: { - HStack { - Text(user.name) - .font(.callout) - Spacer() - Image(systemName: "plus.circle") + VStack(spacing: 2) { + ForEach(userSearchResults) { user in + Button { + Task { await addUser(user) } + } label: { + HStack(spacing: 8) { + avatar(for: user.name) + Text(user.name) + .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) - .background(.fill.tertiary, in: RoundedRectangle(cornerRadius: 6)) + .padding(10) + .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.") }