Add a preview toot to the top of the display settings page. (#716)

* Add a preview toot tot the top of the display settings page.

* DisplayModel doesn't need to be @State

* Disable hitTest

* Example Post

---------

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift

@@ -6,15 +6,22 @@ import SwiftUI
 
 struct DisplaySettingsView: View {
   typealias FontState = Theme.FontState
-
+  
   @Environment(\.colorScheme) private var colorScheme
   @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var userPreferences: UserPreferences
-
+  
   @State private var isFontSelectorPresented = false
-
+  
+  private var previewStatusViewModel = StatusRowViewModel(status: Status.placeholder(parseMarkdown: true))
+  
   var body: some View {
     Form {
+      Section("settings.display.example-toot") {
+        StatusRowView(viewModel: previewStatusViewModel)
+          .allowsHitTesting(false)
+      }
+      
       Section {
         Toggle("settings.display.theme.systemColor", isOn: $theme.followSystemColorScheme)
         themeSelectorButton
@@ -33,7 +40,7 @@ struct DisplaySettingsView: View {
         }
       }
       .listRowBackground(theme.primaryBackgroundColor)
-
+      
       Section("settings.display.section.display") {
         Picker("settings.display.font", selection: .init(get: { () -> FontState in
           if userPreferences.chosenFont?.fontName == "OpenDyslexic-Regular" {
@@ -74,7 +81,7 @@ struct DisplaySettingsView: View {
             Text(buttonStyle.description).tag(buttonStyle)
           }
         }
-
+        
         Picker("settings.display.status.media-style", selection: $theme.statusDisplayStyle) {
           ForEach(Theme.StatusDisplayStyle.allCases, id: \.rawValue) { buttonStyle in
             Text(buttonStyle.description).tag(buttonStyle)
@@ -97,7 +104,7 @@ struct DisplaySettingsView: View {
           Toggle("settings.display.show-ipad-column", isOn: $userPreferences.showiPadSecondaryColumn)
         }
       }
-
+      
       Section {
         Button {
           theme.followSystemColorScheme = true
@@ -115,7 +122,7 @@ struct DisplaySettingsView: View {
     .scrollContentBackground(.hidden)
     .background(theme.secondaryBackgroundColor)
   }
-
+  
   private var themeSelectorButton: some View {
     NavigationLink(destination: ThemePreviewView()) {
       HStack {

IceCubesApp/Resources/Localization/ca.lproj/Localizable.strings

@@ -65,6 +65,7 @@
 "settings.app.source" = "Font (enllaç a GitHub)";
 "settings.app.support" = "Dona suport a l'aplicació";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Posició de les fotos de perfil";
 "settings.display.avatar.shape" = "Forma de les fotos de perfil";
 "settings.display.navigation-title" = "Configuració de l'aparença";

IceCubesApp/Resources/Localization/de.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Quellcode (auf GitHub)";
 "settings.app.support" = "Unterstütze die App";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Profilbild-Position";
 "settings.display.avatar.shape" = "Profilbild-Form";
 "settings.display.navigation-title" = "Anzeigeeinstellungen";

IceCubesApp/Resources/Localization/en-GB.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Source (GitHub link)";
 "settings.app.support" = "Support the app";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.font" = "Timeline Font";
 "settings.display.font.system" = "System";
 "settings.display.font.custom" = "Custom";

IceCubesApp/Resources/Localization/en.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Source (GitHub link)";
 "settings.app.support" = "Support the app";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.font" = "Timeline Font";
 "settings.display.font.system" = "System";
 "settings.display.font.custom" = "Custom";

IceCubesApp/Resources/Localization/es.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Código fuente (Enlace a GitHub)";
 "settings.app.support" = "Apoya a Ice Cubes";
 "settings.app.about" = "Acerca de";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Posición del avatar";
 "settings.display.avatar.shape" = "Forma del avatar";
 "settings.display.navigation-title" = "Ajustes de apariencia";

IceCubesApp/Resources/Localization/fr.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Source (lien GitHub)";
 "settings.app.support" = "Soutenir l'application";
 "settings.app.about" = "À propos";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Position de l'avatar";
 "settings.display.avatar.shape" = "Forme de l'avatar";
 "settings.display.navigation-title" = "Paramètres d'affichage";

IceCubesApp/Resources/Localization/it.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Sorgenti (link GitHub)";
 "settings.app.support" = "Supporta l'applicazione";
 "settings.app.about" = "Informazioni";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Posizione dell'avatar";
 "settings.display.avatar.shape" = "Forma dell'avatar";
 "settings.display.navigation-title" = "Impostazioni di visualizzazione";

IceCubesApp/Resources/Localization/ja.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "ソース (GitHub link)";
 "settings.app.support" = "アプリを支援する";
 "settings.app.about" = "アプリについて";
+"settings.display.example-toot" = "Example Post";
 "settings.display.font" = "タイムラインのフォント";
 "settings.display.font.system" = "システムフォント";
 "settings.display.font.custom" = "カスタム";

IceCubesApp/Resources/Localization/ko.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "소스 코드 (GitHub)";
 "settings.app.support" = "이 앱 지원하기";
 "settings.app.about" = "이 앱에 관해";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "프로필 사진 위치";
 "settings.display.avatar.shape" = "프로필 사진 모양";
 "settings.display.navigation-title" = "화면 설정";

IceCubesApp/Resources/Localization/nb.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Kilde (GitHub-lenke)";
 "settings.app.support" = "Støtt denne appen";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.font" = "Tidslinjefont";
 "settings.display.font.system" = "System";
 "settings.display.font.custom" = "Tilpasset";

IceCubesApp/Resources/Localization/nl.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Broncode (GitHub-link)";
 "settings.app.support" = "De app steunen";
 "settings.app.about" = "Info";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Avatarpositie";
 "settings.display.avatar.shape" = "Avatarvorm";
 "settings.display.navigation-title" = "Weergaveopties";

IceCubesApp/Resources/Localization/pl.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Źródło (link do GitHub)";
 "settings.app.support" = "Wspieraj aplikację";
 "settings.app.about" = "O aplikacji";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Położenie awatara";
 "settings.display.avatar.shape" = "Kształt awatara";
 "settings.display.navigation-title" = "Ustawienia ekranu";

IceCubesApp/Resources/Localization/pt-BR.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Código fonte (link GitHub)";
 "settings.app.support" = "Apoie o app";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Posição do avatar";
 "settings.display.avatar.shape" = "Formato do avatar";
 "settings.display.navigation-title" = "Ver Configurações";

IceCubesApp/Resources/Localization/tr.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "Kaynak Kodu (GitHub link)";
 "settings.app.support" = "Uygulamayı Destekleyin";
 "settings.app.about" = "About";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "Avatar Pozisyonu";
 "settings.display.avatar.shape" = "Avatar Şekli";
 "settings.display.navigation-title" = "Gösterim Ayarları";

IceCubesApp/Resources/Localization/zh-Hans.lproj/Localizable.strings

@@ -66,6 +66,7 @@
 "settings.app.source" = "源代码（GitHub 链接）";
 "settings.app.support" = "支持本应用";
 "settings.app.about" = "关于";
+"settings.display.example-toot" = "Example Post";
 "settings.display.avatar.position" = "头像位置";
 "settings.display.avatar.shape" = "头像边框";
 "settings.display.navigation-title" = "显示设置";

Packages/Models/Sources/Models/Account.swift

@@ -54,10 +54,10 @@ public struct Account: Codable, Identifiable, Equatable, Hashable {
   public static func placeholder() -> Account {
     .init(id: UUID().uuidString,
           username: "Username",
-          displayName: "Display Name",
+          displayName: "John Mastodon",
           avatar: URL(string: "https://files.mastodon.social/media_attachments/files/003/134/405/original/04060b07ddf7bb0b.png")!,
           header: URL(string: "https://files.mastodon.social/media_attachments/files/003/134/405/original/04060b07ddf7bb0b.png")!,
-          acct: "account@account.com",
+          acct: "johnm@example.com",
           note: .init(stringValue: "Some content"),
           createdAt: "2022-12-16T10:20:54.000Z",
           followersCount: 10,

Packages/Models/Sources/Models/Alias/HTMLString.swift

@@ -77,12 +77,24 @@ public struct HTMLString: Codable, Equatable, Hashable {
     }
   }
 
-  public init(stringValue: String) {
+  public init(stringValue: String, parseMarkdown:Bool = false) {
     htmlValue = stringValue
     asMarkdown = stringValue
     asRawText = stringValue
     statusesURLs = []
-    asSafeMarkdownAttributedString = AttributedString(stringLiteral: htmlValue)
+    
+    if parseMarkdown {
+      do {
+        let options = AttributedString.MarkdownParsingOptions(allowsExtendedAttributes: true,
+                                                              interpretedSyntax: .inlineOnlyPreservingWhitespace)
+        asSafeMarkdownAttributedString = try AttributedString(markdown: asMarkdown, options: options)
+      } catch {
+        asSafeMarkdownAttributedString = AttributedString(stringLiteral: htmlValue)
+      }
+    }
+    else {
+      asSafeMarkdownAttributedString = AttributedString(stringLiteral: htmlValue)
+    }
   }
 
   public func encode(to encoder: Encoder) throws {

Packages/Models/Sources/Models/Alias/ServerDate.swift

@@ -3,6 +3,11 @@ import Foundation
 public typealias ServerDate = String
 
 extension ServerDate {
+  
+  public static var sampleDate: ServerDate {
+    createdAtDateFormatter.string(from: Date()-100)
+  }
+  
   private static var createdAtDateFormatter: DateFormatter = {
     let dateFormatter = DateFormatter()
     dateFormatter.calendar = .init(identifier: .iso8601)

Packages/Models/Sources/Models/Status.swift

@@ -100,11 +100,12 @@ public struct Status: AnyStatus, Codable, Identifiable, Equatable, Hashable, Sta
   public let sensitive: Bool
   public let language: String?
 
-  public static func placeholder() -> Status {
+  public static func placeholder(parseMarkdown:Bool = false) -> Status {
     .init(id: UUID().uuidString,
-          content: .init(stringValue: "This is a #toot\nWith some @content\nAnd some more content for your #eyes @only"),
+          content: .init(stringValue: "Lorem ipsum [#dolor](#) sit amet\nconsectetur [@adipiscing](#) elit\nAsed do eiusmod tempor incididunt ut labore.", parseMarkdown: parseMarkdown),
+
           account: .placeholder(),
-          createdAt: "2022-12-16T10:20:54.000Z",
+          createdAt: ServerDate.sampleDate,
           editedAt: nil,
           reblog: nil,
           mediaAttachments: [],