Add extension controls

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/extension-card.module.scss

@@ -7,7 +7,7 @@
   margin-bottom: 16px;
   border-radius: 4px;
   border: 1px solid #181a1f;
-  background-color: #333842;
+  background-color: #343840;
   overflow: hidden;
   cursor: pointer;
   padding: 16px;
@@ -90,3 +90,50 @@
 .installButtonIco {
   margin-right: var(--margin);
 }
+
+.buttonGroup {
+  margin: 8px 0 0 8px;
+  display: flex;
+}
+
+@mixin stickedButton {
+  padding: 6px 8px;
+  color: var(--textColorTertiary);
+  background: #343840;
+  border: 1px solid #212121;
+
+  &:hover {
+    background-color: #3e434c;
+    color: rgb(230, 230, 230);
+  }
+}
+
+.leftButton {
+  @include stickedButton();
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.centerButton {
+  @include stickedButton();
+  border-radius: 0;
+  border-right: 0;
+}
+
+.rightButton {
+  @include stickedButton();
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-right: 14px;
+
+  &:after {
+    display: inline-block;
+    content: " ";
+    width: 4px;
+    background-color: #2ba143;
+    height: 100%;
+    position: absolute;
+    right: 0;
+  }
+}

src/renderer/components/+preferences/extension-card.tsx

@@ -40,11 +40,15 @@ function NonInjectedExtensionCard({
   extensionInstallationStateStore: store,
   installFromInput,
   onClick,
-  userExtensions,
+  confirmUninstallExtension,
+  enableExtension,
+  disableExtension,
+  // userExtensions,
 }: Props & Dependencies) {
   const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
-  const installedExtension = userExtensions.get().find(installed => installed.manifest.name == name);
+  // const installedExtension = userExtensions.get().find(installed => installed.manifest.name == name);
   const [waiting, setWaiting] = useState(false);
+  const installed = true;
 
   useEffect(() => {
     if (!store.anyPreInstallingOrInstalling) {
@@ -58,6 +62,21 @@ function NonInjectedExtensionCard({
     installFromInput(extension.binaryUrl);
   }
 
+  function onUninstall(evt: React.MouseEvent, extension: InstalledExtension) {
+    evt.stopPropagation();
+    confirmUninstallExtension(extension);
+  }
+
+  function onStatusToggle(evt: React.MouseEvent, extension: InstalledExtension) {
+    evt.stopPropagation();
+
+    if (extension.isEnabled) {
+      disableExtension(extension.id);
+    } else {
+      enableExtension(extension.id);
+    }
+  }
+
   return (
     <div className={styles.extensionCard} onClick={onClick}>
       <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
@@ -82,15 +101,43 @@ function NonInjectedExtensionCard({
             <a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
           </div>
           <div className={styles.install}>
-            <Button
-              primary
-              waiting={waiting}
-              disabled={store.anyPreInstallingOrInstalling}
-              onClick={onInstall}
-            >
-              <Icon className={styles.installButtonIco} material="cloud_download"/>
-              Install
-            </Button>
+            {installed ? (
+              <div className={styles.buttonGroup}>
+                <Button
+                  className={styles.leftButton}
+                  onClick={onClick}
+                >
+                  <Icon className="mr-4" material="settings"/>
+                  Settings
+                </Button>
+                <Button
+                  className={styles.centerButton}
+                  onClick={onClick}
+                >
+                  <Icon className="mr-4" material="delete"/>
+                  Uninstall
+                </Button>
+                <Button
+                  className={styles.rightButton}
+                  onClick={onClick}
+                >
+                  <Icon className="mr-4" material="pause"/>
+                  Disable
+                </Button>
+              </div>
+            ) : (
+              <div className={styles.buttonGroup}>
+                <Button
+                  primary
+                  waiting={waiting}
+                  disabled={store.anyPreInstallingOrInstalling}
+                  onClick={onInstall}
+                >
+                  <Icon className={styles.installButtonIco} material="cloud_download"/>
+                  Install
+                </Button>
+              </div>
+            )}
           </div>
         </div>
       </div>