Implement Modal Editor Sheet (#1141)

xcode/Subconscious/Shared/AppTheme.swift

@@ -32,6 +32,8 @@ extension AppTheme {
     static let lineHeight: CGFloat = 24
     static let fabSize: CGFloat = 56
     static let minTouchSize: CGFloat = 44
+    static let comfortableTouchSize: CGFloat = tightPadding + minTouchSize
+    static let minGradientMaskSize: CGFloat = 96
     static let cornerRadiusSm: Double = 4
     static let cornerRadius: Double = 8
     static let cornerRadiusLg: Double = 16

xcode/Subconscious/Shared/Components/AppView.swift

@@ -25,11 +25,13 @@ struct AppView: View {
         )
     )
     @Environment(\.scenePhase) private var scenePhase: ScenePhase
+    @Namespace var namespace
 
     var body: some View {
         ZStack {
             AppTabView(store: store)
                 .zIndex(0)
+                .disabled(store.state.editorSheet.presented)
 
             if !store.state.isAppUpgraded {
                 AppUpgradeView(
@@ -52,6 +54,18 @@ struct AppView: View {
                     )
                     .zIndex(1)
             }
+
+            if store.state.isModalEditorEnabled {
+                if let _ = store.state.editorSheet.item,
+                   let namespace = store.state.namespace {
+                    EditorModalSheetView(app: store, namespace: namespace)
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
+                        .padding(.top, AppTheme.comfortableTouchSize)
+                        .ignoresSafeArea(.all)
+                        .shadow(style: .editorSheet)
+                        .zIndex(3)
+                }
+            }
         }
         .sheet(
             isPresented: Binding(
@@ -78,7 +92,7 @@ struct AppView: View {
         }
         .onAppear {
             SentryIntegration.start()
-            store.send(.appear)
+            store.send(.appear(namespace: namespace))
         }
         // Track changes to scene phase so we know when app gets
         // foregrounded/backgrounded.
@@ -118,13 +132,14 @@ enum AppAction: Hashable {
     case gatewayURLField(GatewayUrlFormField.Action)
     case recoveryMode(RecoveryModeModel.Action)
     case toastStack(ToastStackAction)
+    case editorSheet(EditorModalSheetAction)
 
     /// Scene phase events
     /// See https://developer.apple.com/documentation/swiftui/scenephase
     case scenePhaseChange(ScenePhase)
 
     /// On view appear
-    case appear
+    case appear(namespace: Namespace.ID)
 
     case setAppUpgraded(_ isUpgraded: Bool)
 
@@ -168,6 +183,8 @@ enum AppAction: Hashable {
 
     /// Set and persist experimental block editor enabled
     case persistBlockEditorEnabled(Bool)
+    /// Set and persist experimental modal editor sheet enabled
+    case persistModalEditorEnabled(Bool)
     case persistNoosphereLogLevel(Noosphere.NoosphereLogLevel)
     case persistAiFeaturesEnabled(Bool)
     case persistPreferredLlm(String)
@@ -539,6 +556,28 @@ struct ToastStackCursor: CursorProtocol {
     }
 }
 
+struct EditorModalSheetCursor: CursorProtocol {
+    typealias Model = AppModel
+    typealias ViewModel = EditorModalSheetModel
+
+    static func get(state: Model) -> ViewModel {
+        state.editorSheet
+    }
+
+    static func set(state: Model, inner: ViewModel) -> Model {
+        var model = state
+        model.editorSheet = inner
+        return model
+    }
+
+    static func tag(_ action: ViewModel.Action) -> Model.Action {
+        switch action {
+        default:
+            return .editorSheet(action)
+        }
+    }
+}
+
 enum AppDatabaseState {
     case initial
     case migrating
@@ -574,7 +613,8 @@ struct AppModel: ModelProtocol {
     var isFirstRunComplete = false
     var firstRunPath: [FirstRunStep] = []
 
-    var toastStack: ToastStackModel = ToastStackModel()
+    var toastStack = ToastStackModel()
+    var editorSheet = EditorModalSheetModel()
 
     /// Should first run show?
     var shouldPresentFirstRun: Bool {
@@ -583,6 +623,7 @@ struct AppModel: ModelProtocol {
 
     /// Is experimental block editor enabled?
     var isBlockEditorEnabled = false
+    var isModalEditorEnabled = false
     var noosphereLogLevel: Noosphere.NoosphereLogLevel = .basic
     var areAiFeaturesEnabled = false
     var openAiApiKey = OpenAIKey(key: "sk-")
@@ -679,6 +720,7 @@ struct AppModel: ModelProtocol {
     }
 
     var selectedAppTab: AppTab = .notebook
+    var namespace: Namespace.ID? = nil
 
     // Logger for actions
     static let logger = Logger(
@@ -747,16 +789,23 @@ struct AppModel: ModelProtocol {
                 action: action,
                 environment: environment
             )
+        case .editorSheet(let action):
+            return EditorModalSheetCursor.update(
+                state: state,
+                action: action,
+                environment: environment
+            )
         case .scenePhaseChange(let scenePhase):
             return scenePhaseChange(
                 state: state,
                 environment: environment,
                 scenePhase: scenePhase
             )
-        case .appear:
+        case let .appear(namespace):
             return appear(
                 state: state,
-                environment: environment
+                environment: environment,
+                namespace: namespace
             )
         case let .setFirstRunPath(path):
             return setFirstRunPath(
@@ -942,6 +991,12 @@ struct AppModel: ModelProtocol {
                 environment: environment,
                 llm: llm
             )
+        case let .persistModalEditorEnabled(isModalEditorEnabled):
+            return persistModalEditorEnabled(
+                state: state,
+                environment: environment,
+                isModalEditorEnabled: isModalEditorEnabled
+            )
         case let .persistNoosphereLogLevel(level):
             return persistNoosphereLogLevel(
                 state: state,
@@ -1481,6 +1536,8 @@ struct AppModel: ModelProtocol {
             return .loadOpenAIKey(OpenAIKey(key: key))
         }.eraseToAnyPublisher()
 
+        model.isModalEditorEnabled = AppDefaults.standard.isModalEditorEnabled
+
         // Update model from app defaults
         return update(
             state: model,
@@ -1520,7 +1577,8 @@ struct AppModel: ModelProtocol {
 
     static func appear(
         state: AppModel,
-        environment: AppEnvironment
+        environment: AppEnvironment,
+        namespace: Namespace.ID
     ) -> Update<AppModel> {
         let sphereIdentity = state.sphereIdentity?.description ?? "nil"
         logger.debug(
@@ -1531,8 +1589,12 @@ struct AppModel: ModelProtocol {
                 "sphereIdentity": sphereIdentity
             ]
         )
+
+        var model = state
+        model.namespace = namespace
+
         return update(
-            state: state,
+            state: model,
             actions: [
                 .migrateDatabase,
                 .refreshSphereVersion,
@@ -1907,6 +1969,18 @@ struct AppModel: ModelProtocol {
         return Update(state: state).mergeFx(fx)
     }
 
+    static func persistModalEditorEnabled(
+        state: AppModel,
+        environment: AppEnvironment,
+        isModalEditorEnabled: Bool
+    ) -> Update<AppModel> {
+        // Persist value
+        AppDefaults.standard.isModalEditorEnabled = isModalEditorEnabled
+        var model = state
+        model.isModalEditorEnabled = isModalEditorEnabled
+        return Update(state: model)
+    }
+
     static func persistNoosphereLogLevel(
         state: AppModel,
         environment: AppEnvironment,
@@ -3082,6 +3156,9 @@ struct AppModel: ModelProtocol {
             }
             .eraseToAnyPublisher()
 
+            environment.feedback.prepare()
+            environment.feedback.impactOccurred()
+
             // MUST be dispatched as an fx so that it will appear on the `store.actions` stream
             // Which is consumed and replayed on the FeedStore and NotebookStore etc.
             return Update(state: state, fx: fx)
@@ -3090,6 +3167,8 @@ struct AppModel: ModelProtocol {
         var model = state
         model.selectedAppTab = tab
         AppDefaults.standard.selectedAppTab = tab.rawValue
+        environment.selectionFeedback.prepare()
+        environment.selectionFeedback.selectionChanged()
 
         return Update(state: model)
     }
@@ -3413,6 +3492,9 @@ struct AppEnvironment {
 
     /// Service for generating creative prompts and oblique strategies
     var prompt = PromptService.default
+
+    var feedback = UIImpactFeedbackGenerator()
+    var selectionFeedback = UISelectionFeedbackGenerator()
 
     /// Create a long polling publisher that never completes
     static func poll(every interval: Double) -> AnyPublisher<Date, Never> {

xcode/Subconscious/Shared/Components/Common/Audience/AudienceMenuButtonView.swift

@@ -9,7 +9,7 @@ import SwiftUI
 
 struct AudienceMenuButtonView: View {
     @ScaledMetric(relativeTo: .caption)
-    private var width: CGFloat = 140
+    private var width: CGFloat = 100
 
     @Binding var audience: Audience
 

xcode/Subconscious/Shared/Components/Common/Audience/MenuButtonView.swift

@@ -30,7 +30,6 @@ struct MenuButtonView<Icon: View>: View {
                 .font(.system(size: iconSize))
                 .foregroundColor(Color.secondary)
         }
-        .foregroundColor(Color.accentColor)
         .lineLimit(1)
         .frame(height: height)
         .padding(

xcode/Subconscious/Shared/Components/Common/Buttons/CloseButtonView.swift

@@ -11,17 +11,22 @@ import SwiftUI
 /// Sight-matched in Figma to close button from Apple Notes.
 struct CloseButtonView: View {
     var action: () -> Void
+
+    @Environment(\.colorScheme) var colorScheme
 
     var body: some View {
         Button(
             action: action,
             label: {
-                Image(systemName: "xmark")
-                    .font(.system(size: 16, weight: .semibold))
+                Circle()
+                    .foregroundStyle(Color.secondaryBackground.opacity(0.7))
                     .frame(width: 30, height: 30)
-                    .foregroundColor(.secondary)
-                    .background(Color.secondaryBackground)
-                    .clipShape(Circle())
+                    .overlay(
+                        Image(systemName: "xmark")
+                            .font(.system(size: 16, weight: .semibold))
+                            .foregroundColor(.secondary)
+                    )
+                    .blendMode(colorScheme == .light ? .plusDarker : .plusLighter)
                     .frame(
                         width: AppTheme.minTouchSize,
                         height: AppTheme.minTouchSize
@@ -30,6 +35,7 @@ struct CloseButtonView: View {
                     .accessibility(hint: Text("Tap to close"))
             }
         )
+        .frame(width: 30, height: 30)
     }
 }
 

xcode/Subconscious/Shared/Components/Common/EntryList/EntryListView.swift

@@ -23,6 +23,8 @@ struct EntryListView: View {
     var onRefresh: () -> Void
 
     var notify: (EntryNotification) -> Void
+    var namespace: Namespace.ID
+    var editingInSheet: Bool = false
 
     @Environment(\.colorScheme) var colorScheme
     static let resetScrollTargetId: Int = 0
@@ -58,6 +60,11 @@ struct EntryListView: View {
                                 color: entry.color
                             )
                         )
+                        .matchedGeometryEffect(
+                            id: entry.id,
+                            in: namespace,
+                            isSource: !editingInSheet
+                        )
                         .modifier(RowViewModifier())
                         .swipeActions(
                             edge: .trailing,
@@ -174,7 +181,8 @@ struct EntryListView_Previews: PreviewProvider {
                 )
             ],
             onRefresh: {},
-            notify: { _ in }
+            notify: { _ in },
+            namespace: Namespace().wrappedValue
         )
     }
 }

xcode/Subconscious/Shared/Components/Common/Forms/Search.swift

@@ -307,7 +307,7 @@ struct SearchModel: ModelProtocol {
 // MARK: View
 struct SearchView: View {
     var store: ViewStore<SearchModel>
-    var suggestionHeight: CGFloat = 56
+    var suggestionHeight: CGFloat = AppTheme.comfortableTouchSize
 
     var body: some View {
         VStack(alignment: .leading, spacing: 0) {

xcode/Subconscious/Shared/Components/Common/Suggestion/SuggestionViewModifier.swift

@@ -11,7 +11,7 @@ import SwiftUI
 /// It sets the basic list styles we use for suggestions.
 /// Apply it to the "row" view which is an immediate child of `List`.
 struct SuggestionViewModifier: ViewModifier {
-    var height: CGFloat = 56
+    var height: CGFloat = AppTheme.comfortableTouchSize
     var insets: EdgeInsets = EdgeInsets(
         top: 0,
         leading: AppTheme.tightPadding,

xcode/Subconscious/Shared/Components/Common/TruncateWithGradientViewModifier.swift

@@ -11,7 +11,7 @@ import SwiftUI
 struct TruncateWithGradientViewModifier: ViewModifier {
     var maxHeight: CGFloat
 
-    private static let maxGradientHeight: CGFloat = 80
+    private static let maxGradientHeight: CGFloat = AppTheme.minGradientMaskSize
 
     func body(content: Content) -> some View {
         content

xcode/Subconscious/Shared/Components/Deck/DeckTheme.swift

@@ -14,6 +14,11 @@ extension DeckTheme {
         dampingFraction: 0.5,
         blendDuration: 0
     )
+    static let friendlySpring: Animation = .spring(
+        response: 0.3,
+        dampingFraction: 0.85,
+        blendDuration: 0.1
+    )
 
     static let dragTargetSize = CGSize(width: 16, height: 380)
 
@@ -143,7 +148,8 @@ extension String {
 
 extension Slashlink {
     var themeColor: ThemeColor {
-        description.themeColor
+        // by using the slug we ensure colors match across namespaces (AKA users)
+        slug.description.themeColor
     }
 }