From 7dd4bc00283adbebbc7e1ac9381d178c9ab1bda8 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 17 May 2021 13:17:11 +0300
Subject: [PATCH] Adding a extensions placeholder

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+extensions/extensions.scss       |  4 ++++
 .../components/+extensions/extensions.tsx        |  6 ++++--
 .../+extensions/installed-extensions.module.css  |  5 +++++
 .../+extensions/installed-extensions.tsx         | 16 +++++++++++-----
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 19d6c7bd83..0369eb4798 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -26,6 +26,10 @@
   .contentRegion {
     .content {
       max-width: 740px;
+
+      > section {
+        height: 100%;
+      }
     }
   }
 }
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index a281d47148..267728d435 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -589,6 +589,8 @@ export class Extensions extends React.Component {
   }
 
   render() {
+    const extensions = Array.from(ExtensionLoader.getInstance().userExtensions.values());
+
     return (
       <DropFileInput onDropFiles={installOnDrop}>
         <PageLayout showOnTop className="Extensions" contentGaps={false}>
@@ -605,10 +607,10 @@ export class Extensions extends React.Component {
               installPath={this.installPath}
             />
 
-            <hr/>
+            {extensions.length && <hr/>}
 
             <InstalledExtensions
-              extensions={Array.from(ExtensionLoader.getInstance().userExtensions.values())}
+              extensions={extensions}
               uninstall={confirmUninstallExtension}
             />
           </section>
diff --git a/src/renderer/components/+extensions/installed-extensions.module.css b/src/renderer/components/+extensions/installed-extensions.module.css
index 15624e4a08..4b0357a062 100644
--- a/src/renderer/components/+extensions/installed-extensions.module.css
+++ b/src/renderer/components/+extensions/installed-extensions.module.css
@@ -13,4 +13,9 @@
 
 .title {
   margin-bottom: 0!important;
+}
+
+.noItemsIcon {
+  @apply opacity-10;
+  --size: 180px;
 }
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx
index fc427051b7..62858653c6 100644
--- a/src/renderer/components/+extensions/installed-extensions.tsx
+++ b/src/renderer/components/+extensions/installed-extensions.tsx
@@ -1,7 +1,6 @@
 import styles from "./installed-extensions.module.css";
 import React, { useMemo } from "react";
 import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
-import { ExtensionLoader } from "../../../extensions/extension-loader";
 import { Icon } from "../icon";
 import { List } from "../list/list";
 import { MenuActions, MenuItem } from "../menu";
@@ -20,12 +19,19 @@ function getStatus(isEnabled: boolean) {
 
 export function InstalledExtensions({ extensions, uninstall }: Props) {
   if (!ExtensionDiscovery.getInstance().isLoaded) {
-    return <div><Spinner /></div>;
+    return <div><Spinner center /></div>;
   }
 
-  if (ExtensionLoader.getInstance().userExtensions.size == 0) {
-    // TODO: Add placeholder
-    return <div>No extensions</div>;
+  if (extensions.length != 0) {
+    return (
+      <div className="flex column h-full items-center justify-center">
+        <Icon material="extension" className={styles.noItemsIcon}/>
+        <h3 className="font-medium text-3xl mt-5 mb-2">
+          There are no extensions installed.
+        </h3>
+        <p>Please use the form above to install or drag tarbar-file here.</p>
+      </div>
+    );
   }
 
   const filters = [