UI Adjustments

2025-03-13 21:52:41 +00:00 · 2023-12-18 18:08:32 +01:00 · 2023-12-18 18:08:32 +01:00 · 1c9cf4077d
commit 1c9cf4077d
parent fdf15e60f6
7 changed files with 249 additions and 180 deletions
--- a/Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift
+++ b/Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift
@ -96,7 +96,12 @@ public struct AppAccountsSelectorView: View {
            AppAccountView(viewModel: viewModel)
          }
        }
-        .listRowBackground(theme.primaryBackgroundColor)
+        #if os(visionOS)
+        .listRowBackground(RoundedRectangle(cornerRadius: 8)
+          .foregroundStyle(Material.regular))
+        #else
+         .listRowBackground(theme.primaryBackgroundColor)
+        #endif

        if accountCreationEnabled {
          Section {
@ -111,7 +116,12 @@ public struct AppAccountsSelectorView: View {
            }
            settingsButton
          }
-          .listRowBackground(theme.primaryBackgroundColor)
+          #if os(visionOS)
+          .listRowBackground(Rectangle()
+            .foregroundStyle(Material.regular))
+          #else
+           .listRowBackground(theme.primaryBackgroundColor)
+          #endif
        }
      }
      .listStyle(.insetGrouped)
--- a/Packages/Notifications/Sources/Notifications/NotificationsListView.swift
+++ b/Packages/Notifications/Sources/Notifications/NotificationsListView.swift
@ -132,8 +132,11 @@ public struct NotificationsListView: View {
                               leading: .layoutPadding + 4,
                               bottom: 12,
                               trailing: .layoutPadding))
-          #if !os(visionOS)
-          .listRowBackground(theme.primaryBackgroundColor)
+          #if os(visionOS)
+          .listRowBackground(RoundedRectangle(cornerRadius: 8)
+            .foregroundStyle(Material.regular))
+          #else
+           .listRowBackground(theme.primaryBackgroundColor)
          #endif
          .redacted(reason: .placeholder)
          .allowsHitTesting(false)
@ -158,7 +161,10 @@ public struct NotificationsListView: View {
                                 leading: .layoutPadding + 4,
                                 bottom: 12,
                                 trailing: .layoutPadding))
-            #if !os(visionOS)
+            #if os(visionOS)
+            .listRowBackground(RoundedRectangle(cornerRadius: 8)
+              .foregroundStyle(notification.type == .mention && lockedType != .mention ? Material.thick : Material.regular))
+            #else
            .listRowBackground(notification.type == .mention && lockedType != .mention ?
              theme.secondaryBackgroundColor : theme.primaryBackgroundColor)
            #endif
--- a/Packages/Status/Sources/Status/Detail/StatusDetailView.swift
+++ b/Packages/Status/Sources/Status/Detail/StatusDetailView.swift
@ -59,7 +59,9 @@ public struct StatusDetailView: View {
              .foregroundColor(theme.secondaryBackgroundColor)
              .frame(minHeight: reader.frame(in: .local).size.height - statusHeight)
              .listRowSeparator(.hidden)
+              #if !os(visionOS)
              .listRowBackground(theme.secondaryBackgroundColor)
+              #endif
              .listRowInsets(.init())
              .accessibilityHidden(true)

@ -69,8 +71,10 @@ public struct StatusDetailView: View {
        }
        .environment(\.defaultMinListRowHeight, 1)
        .listStyle(.plain)
+        #if !os(visionOS)
        .scrollContentBackground(.hidden)
        .background(theme.primaryBackgroundColor)
+        #endif
        .onChange(of: viewModel.scrollToId) { _, newValue in
          if let newValue {
            viewModel.scrollToId = nil
@ -132,7 +136,9 @@ public struct StatusDetailView: View {
          }
        }
        .id(status.id)
+        #if !os(visionOS)
        .listRowBackground(viewModel.highlightRowColor)
+        #endif
        .listRowInsets(.init(top: 12,
                             leading: .layoutPadding,
                             bottom: 12,
@ -149,7 +155,9 @@ public struct StatusDetailView: View {
        await viewModel.fetch()
      }
    }
+    #if !os(visionOS)
    .listRowBackground(theme.primaryBackgroundColor)
+    #endif
    .listRowSeparator(.hidden)
  }

@ -169,13 +177,17 @@ public struct StatusDetailView: View {
    }
    .frame(height: 50)
    .listRowSeparator(.hidden)
+    #if !os(visionOS)
    .listRowBackground(theme.secondaryBackgroundColor)
+    #endif
    .listRowInsets(.init())
  }

  private var topPaddingView: some View {
    HStack { EmptyView() }
+      #if !os(visionOS)
      .listRowBackground(theme.primaryBackgroundColor)
+      #endif
      .listRowSeparator(.hidden)
      .listRowInsets(.init())
      .frame(height: .layoutPadding)
--- a/Packages/Status/Sources/Status/Editor/Components/StatusEditorAccessoryView.swift
+++ b/Packages/Status/Sources/Status/Editor/Components/StatusEditorAccessoryView.swift
@ -31,192 +31,220 @@ struct StatusEditorAccessoryView: View {

  var body: some View {
    @Bindable var viewModel = focusedSEVM
-
    VStack(spacing: 0) {
+      #if os(visionOS)
+      HStack {
+        contentView
+      }
+      .frame(height: 24)
+      .padding(16)
+      .background(.ultraThinMaterial)
+      .cornerRadius(8)
+      #else
      Divider()
      HStack {
-        ScrollView(.horizontal) {
-          HStack(alignment: .center, spacing: 16) {
-            Menu {
-              Button {
-                isPhotosPickerPresented = true
-              } label: {
-                Label("status.editor.photo-library", systemImage: "photo")
-              }
-              #if !targetEnvironment(macCatalyst)
-                Button {
-                  isCameraPickerPresented = true
-                } label: {
-                  Label("status.editor.camera-picker", systemImage: "camera")
-                }
-              #endif
-              Button {
-                isFileImporterPresented = true
-              } label: {
-                Label("status.editor.browse-file", systemImage: "folder")
-              }
-
-              #if !os(visionOS)
-              Button {
-                isGIFPickerPresented = true
-              } label: {
-                Label("GIPHY", systemImage: "party.popper")
-              }
-              #endif
-            } label: {
-              if viewModel.isMediasLoading {
-                ProgressView()
-              } else {
-                Image(systemName: "photo.on.rectangle.angled")
-              }
-            }
-            .photosPicker(isPresented: $isPhotosPickerPresented,
-                          selection: $viewModel.mediaPickers,
-                          maxSelectionCount: 4,
-                          matching: .any(of: [.images, .videos]),
-                          photoLibrary: .shared())
-            .fileImporter(isPresented: $isFileImporterPresented,
-                          allowedContentTypes: [.image, .video],
-                          allowsMultipleSelection: true)
-            { result in
-              if let urls = try? result.get() {
-                viewModel.processURLs(urls: urls)
-              }
-            }
-            .fullScreenCover(isPresented: $isCameraPickerPresented, content: {
-              StatusEditorCameraPickerView(selectedImage: .init(get: {
-                nil
-              }, set: { image in
-                if let image {
-                  viewModel.processCameraPhoto(image: image)
-                }
-              }))
-              .background(.black)
-            })
-            .sheet(isPresented: $isGIFPickerPresented, content: {
-              #if !os(visionOS)
-              GifPickerView { url in
-                GPHCache.shared.downloadAssetData(url) { data, _ in
-                  guard let data else { return }
-                  viewModel.processGIFData(data: data)
-                }
-                isGIFPickerPresented = false
-              } onShouldDismissGifPicker: {
-                isGIFPickerPresented = false
-              }
-              .presentationDetents([.medium, .large])
-              #else
-              EmptyView()
-              #endif
-            })
-            .accessibilityLabel("accessibility.editor.button.attach-photo")
-            .disabled(viewModel.showPoll)
-
-            Button {
-              // all SEVM have the same visibility value
-              followUpSEVMs.append(StatusEditorViewModel(mode: .new(visibility: focusedSEVM.visibility)))
-            } label: {
-              Image(systemName: "arrowshape.turn.up.left.circle.fill")
-            }
-            .disabled(!canAddNewSEVM)
-
-            Button {
-              withAnimation {
-                viewModel.showPoll.toggle()
-                viewModel.resetPollDefaults()
-              }
-            } label: {
-              Image(systemName: "chart.bar")
-            }
-            .accessibilityLabel("accessibility.editor.button.poll")
-            .disabled(viewModel.shouldDisablePollButton)
-
-            Button {
-              withAnimation {
-                viewModel.spoilerOn.toggle()
-              }
-              isSpoilerTextFocused = viewModel.id
-            } label: {
-              Image(systemName: viewModel.spoilerOn ? "exclamationmark.triangle.fill" : "exclamationmark.triangle")
-            }
-            .accessibilityLabel("accessibility.editor.button.spoiler")
-
-            if !viewModel.mode.isInShareExtension {
-              Button {
-                isDraftsSheetDisplayed = true
-              } label: {
-                Image(systemName: "archivebox")
-              }
-              .accessibilityLabel("accessibility.editor.button.drafts")
-              .popover(isPresented: $isDraftsSheetDisplayed) {
-                if UIDevice.current.userInterfaceIdiom == .phone {
-                  draftsListView
-                    .presentationDetents([.medium])
-                } else {
-                  draftsListView
-                    .frame(width: 400, height: 500)
-                }
-              }
-            }
-
-            if !viewModel.customEmojiContainer.isEmpty {
-              Button {
-                isCustomEmojisSheetDisplay = true
-              } label: {
-                // This is a workaround for an apparent bug in the `face.smiling` SF Symbol.
-                // See https://github.com/Dimillian/IceCubesApp/issues/1193
-                let customEmojiSheetIconName = colorScheme == .light ? "face.smiling" : "face.smiling.inverse"
-                Image(systemName: customEmojiSheetIconName)
-              }
-              .accessibilityLabel("accessibility.editor.button.custom-emojis")
-              .popover(isPresented: $isCustomEmojisSheetDisplay) {
-                if UIDevice.current.userInterfaceIdiom == .phone {
-                  customEmojisSheet
-                } else {
-                  customEmojisSheet
-                    .frame(width: 400, height: 500)
-                }
-              }
-            }
-
-            Button {
-              isLanguageSheetDisplayed.toggle()
-            } label: {
-              if let language = viewModel.selectedLanguage {
-                Text(language.uppercased())
-              } else {
-                Image(systemName: "globe")
-              }
-            }
-            .accessibilityLabel("accessibility.editor.button.language")
-            .popover(isPresented: $isLanguageSheetDisplayed) {
-              if UIDevice.current.userInterfaceIdiom == .phone {
-                languageSheetView
-              } else {
-                languageSheetView
-                  .frame(width: 400, height: 500)
-              }
-            }
-
-            if preferences.isOpenAIEnabled {
-              AIMenu.disabled(!viewModel.canPost)
-            }
-          }
-          .padding(.horizontal, .layoutPadding)
-        }
-        Spacer()
-        characterCountView
-          .padding(.trailing, .layoutPadding)
+        contentView
      }
      .frame(height: 20)
      .padding(.vertical, 12)
      .background(.ultraThinMaterial)
+      #endif
    }
    .onAppear {
      viewModel.setInitialLanguageSelection(preference: preferences.recentlyUsedLanguages.first ?? preferences.serverPreferences?.postLanguage)
    }
  }

+  @ViewBuilder
+  private var contentView: some View {
+    #if os(visionOS)
+    HStack(spacing: 8) {
+      actionsView
+      characterCountView
+        .padding(.leading, 16)
+    }
+    #else
+    ScrollView(.horizontal) {
+      HStack(alignment: .center, spacing: 16) {
+        actionsView
+      }
+      .padding(.horizontal, .layoutPadding)
+    }
+    Spacer()
+    characterCountView
+      .padding(.trailing, .layoutPadding)
+    #endif
+  }
+  
+  @ViewBuilder
+  private var actionsView: some View {
+    @Bindable var viewModel = focusedSEVM
+    Menu {
+      Button {
+        isPhotosPickerPresented = true
+      } label: {
+        Label("status.editor.photo-library", systemImage: "photo")
+      }
+      #if !targetEnvironment(macCatalyst)
+        Button {
+          isCameraPickerPresented = true
+        } label: {
+          Label("status.editor.camera-picker", systemImage: "camera")
+        }
+      #endif
+      Button {
+        isFileImporterPresented = true
+      } label: {
+        Label("status.editor.browse-file", systemImage: "folder")
+      }
+
+      #if !os(visionOS)
+      Button {
+        isGIFPickerPresented = true
+      } label: {
+        Label("GIPHY", systemImage: "party.popper")
+      }
+      #endif
+    } label: {
+      if viewModel.isMediasLoading {
+        ProgressView()
+      } else {
+        Image(systemName: "photo.on.rectangle.angled")
+      }
+    }
+    .photosPicker(isPresented: $isPhotosPickerPresented,
+                  selection: $viewModel.mediaPickers,
+                  maxSelectionCount: 4,
+                  matching: .any(of: [.images, .videos]),
+                  photoLibrary: .shared())
+    .fileImporter(isPresented: $isFileImporterPresented,
+                  allowedContentTypes: [.image, .video],
+                  allowsMultipleSelection: true)
+    { result in
+      if let urls = try? result.get() {
+        viewModel.processURLs(urls: urls)
+      }
+    }
+    .fullScreenCover(isPresented: $isCameraPickerPresented, content: {
+      StatusEditorCameraPickerView(selectedImage: .init(get: {
+        nil
+      }, set: { image in
+        if let image {
+          viewModel.processCameraPhoto(image: image)
+        }
+      }))
+      .background(.black)
+    })
+    .sheet(isPresented: $isGIFPickerPresented, content: {
+      #if !os(visionOS)
+      GifPickerView { url in
+        GPHCache.shared.downloadAssetData(url) { data, _ in
+          guard let data else { return }
+          viewModel.processGIFData(data: data)
+        }
+        isGIFPickerPresented = false
+      } onShouldDismissGifPicker: {
+        isGIFPickerPresented = false
+      }
+      .presentationDetents([.medium, .large])
+      #else
+      EmptyView()
+      #endif
+    })
+    .accessibilityLabel("accessibility.editor.button.attach-photo")
+    .disabled(viewModel.showPoll)
+
+    Button {
+      // all SEVM have the same visibility value
+      followUpSEVMs.append(StatusEditorViewModel(mode: .new(visibility: focusedSEVM.visibility)))
+    } label: {
+      Image(systemName: "arrowshape.turn.up.left.circle.fill")
+    }
+    .disabled(!canAddNewSEVM)
+
+    Button {
+      withAnimation {
+        viewModel.showPoll.toggle()
+        viewModel.resetPollDefaults()
+      }
+    } label: {
+      Image(systemName: "chart.bar")
+    }
+    .accessibilityLabel("accessibility.editor.button.poll")
+    .disabled(viewModel.shouldDisablePollButton)
+
+    Button {
+      withAnimation {
+        viewModel.spoilerOn.toggle()
+      }
+      isSpoilerTextFocused = viewModel.id
+    } label: {
+      Image(systemName: viewModel.spoilerOn ? "exclamationmark.triangle.fill" : "exclamationmark.triangle")
+    }
+    .accessibilityLabel("accessibility.editor.button.spoiler")
+
+    if !viewModel.mode.isInShareExtension {
+      Button {
+        isDraftsSheetDisplayed = true
+      } label: {
+        Image(systemName: "archivebox")
+      }
+      .accessibilityLabel("accessibility.editor.button.drafts")
+      .popover(isPresented: $isDraftsSheetDisplayed) {
+        if UIDevice.current.userInterfaceIdiom == .phone {
+          draftsListView
+            .presentationDetents([.medium])
+        } else {
+          draftsListView
+            .frame(width: 400, height: 500)
+        }
+      }
+    }
+
+    if !viewModel.customEmojiContainer.isEmpty {
+      Button {
+        isCustomEmojisSheetDisplay = true
+      } label: {
+        // This is a workaround for an apparent bug in the `face.smiling` SF Symbol.
+        // See https://github.com/Dimillian/IceCubesApp/issues/1193
+        let customEmojiSheetIconName = colorScheme == .light ? "face.smiling" : "face.smiling.inverse"
+        Image(systemName: customEmojiSheetIconName)
+      }
+      .accessibilityLabel("accessibility.editor.button.custom-emojis")
+      .popover(isPresented: $isCustomEmojisSheetDisplay) {
+        if UIDevice.current.userInterfaceIdiom == .phone {
+          customEmojisSheet
+        } else {
+          customEmojisSheet
+            .frame(width: 400, height: 500)
+        }
+      }
+    }
+
+    Button {
+      isLanguageSheetDisplayed.toggle()
+    } label: {
+      if let language = viewModel.selectedLanguage {
+        Text(language.uppercased())
+      } else {
+        Image(systemName: "globe")
+      }
+    }
+    .accessibilityLabel("accessibility.editor.button.language")
+    .popover(isPresented: $isLanguageSheetDisplayed) {
+      if UIDevice.current.userInterfaceIdiom == .phone {
+        languageSheetView
+      } else {
+        languageSheetView
+          .frame(width: 400, height: 500)
+      }
+    }
+
+    if preferences.isOpenAIEnabled {
+      AIMenu.disabled(!viewModel.canPost)
+    }
+  }
+
  private var canAddNewSEVM: Bool {
    guard followUpSEVMs.count < 5 else { return false }

--- a/Packages/Status/Sources/Status/Editor/StatusEditorCoreView.swift
+++ b/Packages/Status/Sources/Status/Editor/StatusEditorCoreView.swift
@ -52,7 +52,9 @@ struct StatusEditorCoreView: View {
      }
      .opacity(editorFocusState == assignedFocusState ? 1 : 0.6)
    }
+    #if !os(visionOS)
    .background(theme.primaryBackgroundColor)
+    #endif
    .focused($editorFocusState, equals: assignedFocusState)
    .onAppear { setupViewModel() }
  }
--- a/Packages/Status/Sources/Status/Editor/StatusEditorView.swift
+++ b/Packages/Status/Sources/Status/Editor/StatusEditorView.swift
@ -73,13 +73,21 @@ public struct StatusEditorView: View {
      .scrollPosition(id: $scrollID, anchor: .top)
      .animation(.bouncy(duration: 0.3), value: editorFocusState)
      .animation(.bouncy(duration: 0.3), value: followUpSEVMs)
+      #if !os(visionOS)
      .background(theme.primaryBackgroundColor)
+      #endif
      .safeAreaInset(edge: .bottom) {
        StatusEditorAutoCompleteView(viewModel: focusedSEVM)
      }
+      #if os(visionOS)
+      .ornament(attachmentAnchor: .scene(.bottom)) {
+        StatusEditorAccessoryView(isSpoilerTextFocused: $isSpoilerTextFocused, focusedSEVM: focusedSEVM, followUpSEVMs: $followUpSEVMs)
+          }
+      #else
      .safeAreaInset(edge: .bottom) {
        StatusEditorAccessoryView(isSpoilerTextFocused: $isSpoilerTextFocused, focusedSEVM: focusedSEVM, followUpSEVMs: $followUpSEVMs)
      }
+      #endif
      .accessibilitySortPriority(1) // Ensure that all elements inside the `ScrollView` occur earlier than the accessory views
      .navigationTitle(focusedSEVM.mode.title)
      .navigationBarTitleDisplayMode(.inline)
--- a/Packages/Status/Sources/Status/Row/StatusRowView.swift
+++ b/Packages/Status/Sources/Status/Row/StatusRowView.swift
@ -149,8 +149,11 @@ public struct StatusRowView: View {
        StatusRowSwipeView(viewModel: viewModel, mode: .leading)
      }
    }
-    #if !os(visionOS)
-    .listRowBackground(viewModel.highlightRowColor)
+    #if os(visionOS)
+    .listRowBackground(RoundedRectangle(cornerRadius: 8)
+      .foregroundStyle(Material.regular))
+    #else
+     .listRowBackground(viewModel.highlightRowColor)
    #endif
    .listRowInsets(.init(top: 12,
                         leading: .layoutPadding,