update(Extensions): Empty state for no extensions (#1555)

Co-authored-by: sdwoodbury <stuartwoodbury@protonmail.ch>
Satellite-im · Nov 28, 2023 · 496f930 · 496f930
1 parent a300336
commit 496f930
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/common/locales/en-US/main.ftl b/common/locales/en-US/main.ftl
@@ -196,6 +196,7 @@ settings = Settings
     .licenses = Licenses
     .search-placeholder = Search Settings...
     .please-select-area-you-want-to-crop = Please select the area you want to crop
+    .no-extensions-installed = No extensions installed
 
 settings-profile = Profile Settings
     .failed = Failed to update profile

diff --git a/ui/src/extension_browser/extensions.scss b/ui/src/extension_browser/extensions.scss
@@ -72,4 +72,11 @@
         gap: var(--gap);
 
     }
+
+    .extensions-not-installed {
+        display: inline-flex;
+        flex-direction: column;
+        gap: var(--gap);
+        padding: var(--padding-less);
+    }
 }
diff --git a/ui/src/extension_browser/mod.rs b/ui/src/extension_browser/mod.rs
@@ -3,6 +3,7 @@
 use common::state::action::ConfigAction;
 use common::state::Action;
 use common::{icons::outline::Shape as Icon, language::get_local_text, state::State, STATIC_ARGS};
+use kit::elements::label::Label;
 
 use crate::components::settings::{ExtensionSetting, SettingSection};
 use common::sounds;
@@ -89,7 +90,19 @@ pub fn Installed(cx: Scope) -> Element {
         .collect();
 
     cx.render(rsx!(
-            metas.iter().cloned().map(|(enabled, meta)| {
+        if metas.is_empty() {
+            rsx!(
+                div {
+                    class: "extensions-not-installed",
+                    aria_label: "extensions-not-installed",
+                    Label {
+                        text: get_local_text("settings.no-extensions-installed"),
+                        aria_label: String::from("extensions-installed-label"),
+                    }
+                }
+            )
+        } else {
+            rsx!( metas.iter().cloned().map(|(enabled, meta)| {
                 rsx!(
                     ExtensionSetting {
                         title: meta.pretty_name.to_owned(),
@@ -107,7 +120,8 @@ pub fn Installed(cx: Scope) -> Element {
                         }
                     }
                 )
-            })
+            }))
+        }
         ))
 }