Components system

app/assets/templates/frontend/directives/global-extensions-menu.html.haml

@@ -100,6 +100,23 @@
               %p.wrap.selectable.small{"ng-if" => "extension.showURL"} {{extension.url}}
               %a.block.mt-5{"ng-click" => "deleteActionExtension(extension); $event.stopPropagation();"} Remove extension
 
+    %div{"ng-if" => "componentManager.components.length > 0"}
+      .container.no-bottom.section-margin
+        %h2 Components
+      %ul
+        %li{"ng-repeat" => "component in componentManager.components", "ng-click" => "component.showDetails = !component.showDetails"}
+          .container
+            %h3 {{component.name}}
+            %a{"ng-if" => "!componentManager.isComponentActive(component)", "ng-click" => "componentManager.activateComponent(component); $event.stopPropagation();"} Activate
+            %a{"ng-if" => "componentManager.isComponentActive(component)", "ng-click" => "componentManager.deactivateComponent(component); $event.stopPropagation();"} Deactivate
+            %div{"ng-if" => "component.showDetails"}
+              .link-group
+                %a.red{"ng-click" => "deleteComponent(component); $event.stopPropagation();"} Delete
+                %a{"ng-click" => "component.showLink = !component.showLink; $event.stopPropagation();"} Show Link
+                %a{"ng-if" => "component.permissions.length", "ng-click" => "revokePermissions(component); $event.stopPropagation();"} Revoke Permissions
+                %p.small.selectable.wrap{"ng-if" => "component.showLink"}
+                  {{component.url}}
+
     .container.section-margin
       %h2.blue Install
       %p.faded Enter an install link

app/assets/templates/frontend/directives/permissions-modal.html.haml

@@ -0,0 +1,25 @@
+.background{"ng-click" => "dismiss()"}
+
+.content
+  %h3 The following extension has requested these permissions:
+
+  %h4 Extension
+  %p Name: {{component.name}}
+  %p.wrap URL: {{component.url}}
+
+  %h4 Permissions
+  .permission{"ng-repeat" => "permission in formattedPermissions"}
+    %p {{permission}}
+
+  %h4 Status
+  %p.status{"ng-class" => "{'trusted' : component.trusted}"} {{component.trusted ? 'Trusted' : 'Untrusted'}}
+
+  .learn-more
+    %h4 Details
+    %p
+      Extensions use an offline messaging system to communicate. With <i>Trusted</i> extensions, data is never sent remotely without your consent. Learn more about extension permissions at
+      %a{"href" => "https://standardnotes.org/permissions", "target" => "_blank"} https://standardnotes.org/permissions.
+
+  .buttons
+    %button.standard.white{"ng-click" => "deny()"} Deny
+    %button.standard.blue{"ng-click" => "accept()"} Accept