chore(settings): Add boilerplate for the new Privacy and security screen (#20668)

src/status_im/contexts/profile/settings/list_items.cljs

@@ -61,7 +61,14 @@
        :image       :icon
        :blur?       true
        :action      :arrow})]
-   [{:title       (i18n/label :t/syncing)
+   [(when config/show-not-implemented-features?
+      {:title       (i18n/label :t/privacy-and-security)
+       :on-press    #(rf/dispatch [:open-modal :screen/settings-privacy-and-security])
+       :image-props :i/privacy
+       :image       :icon
+       :blur?       true
+       :action      :arrow})
+    {:title       (i18n/label :t/syncing)
      :on-press    #(rf/dispatch [:open-modal :settings-syncing])
      :image-props :i/syncing
      :image       :icon

src/status_im/contexts/settings/privacy_and_security/style.cljs

@@ -0,0 +1,11 @@
+(ns status-im.contexts.settings.privacy-and-security.style)
+
+(def title-container
+  {:flex               0
+   :padding-horizontal 20
+   :margin-vertical    12})
+
+(defn page-wrapper
+  [top-inset]
+  {:padding-top top-inset
+   :flex        1})

src/status_im/contexts/settings/privacy_and_security/view.cljs

@@ -0,0 +1,42 @@
+(ns status-im.contexts.settings.privacy-and-security.view
+  (:require
+    [quo.core :as quo]
+    [quo.theme]
+    [react-native.safe-area :as safe-area]
+    [status-im.contexts.settings.privacy-and-security.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn navigate-back
+  []
+  (rf/dispatch [:navigate-back]))
+
+(defn view
+  []
+  (let [insets              (safe-area/get-insets)
+        customization-color (rf/sub [:profile/customization-color])]
+    [quo/overlay
+     {:type            :shell
+      :container-style (style/page-wrapper (:top insets))}
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/arrow-left
+       :on-press   navigate-back}]
+     [quo/standard-title
+      {:title               (i18n/label :t/privacy-and-security)
+       :container-style     style/title-container
+       :accessibility-label :privacy-and-security-header
+       :customization-color customization-color}]
+     [quo/category
+      {:key       :category
+       :data      [{:title        "Dummy"
+                    :image-props  :i/placeholder
+                    :image        :icon
+                    :blur?        true
+                    :action       :selector
+                    :action-props {:on-change identity
+                                   :checked?  false}
+                    :on-press     identity}]
+       :blur?     true
+       :list-type :settings}]]))

src/status_im/navigation/screens.cljs

@@ -57,6 +57,7 @@
     [status-im.contexts.profile.settings.screens.password.change-password.view :as change-password]
     [status-im.contexts.profile.settings.screens.password.view :as settings-password]
     [status-im.contexts.profile.settings.view :as settings]
+    [status-im.contexts.settings.privacy-and-security.view :as settings.privacy-and-security]
     [status-im.contexts.settings.wallet.keypairs-and-accounts.missing-keypairs.encrypted-qr.view
      :as encrypted-keypair-qr]
     [status-im.contexts.settings.wallet.keypairs-and-accounts.missing-keypairs.import-private-key.view
@@ -614,6 +615,10 @@
      :options   options/transparent-modal-screen-options
      :component settings.blocked-users/view}
 
+    {:name      :screen/settings-privacy-and-security
+     :options   options/transparent-modal-screen-options
+     :component settings.privacy-and-security/view}
+
     {:name      :screen/change-password
      :options   (assoc options/transparent-modal-screen-options :theme :dark)
      :component change-password/view}