psmattas/Outpost
1
0
Fork 0
Code Issues Pull Requests Actions Releases 4 Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Puranjay Savar Mattas
2026-08-14 22:06:04 +01:00
parent 7216633299
commit 9ca1c77bb9
2 changed files with 168 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Outpost/Features/Collections/DocumentReaderView.swift
+3 -3
View File
@@ -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
+165 -78
View File
@@ -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.")
}