Component offline only check

app/assets/javascripts/app/directives/views/componentView.js

@@ -58,15 +58,21 @@ class ComponentView {
     }
 
     $scope.reloadStatus = function() {
+      let component = $scope.component;
       $scope.reloading = true;
       let previouslyValid = $scope.componentValid;
-      $scope.componentValid = !$scope.component.valid_until || ($scope.component.valid_until && $scope.component.valid_until > new Date());
+
+      $scope.offlineRestricted = component.offlineOnly && !isDesktopApplication();
+
+      $scope.componentValid = !$scope.offlineRestricted && (!component.valid_until || (component.valid_until && component.valid_until > new Date()));
+
       if($scope.componentValid !== previouslyValid) {
         if($scope.componentValid) {
-          componentManager.activateComponent($scope.component);
+          componentManager.activateComponent(component);
         }
       }
 
+
       $timeout(() => {
         $scope.reloading = false;
       }, 500)

app/assets/javascripts/app/services/componentManager.js

@@ -197,7 +197,7 @@ class ComponentManager {
 
   urlForComponent(component) {
     if(component.offlineOnly || (isDesktopApplication() && component.local_url)) {
-      return component.local_url.replace("sn://", this.desktopManager.getApplicationDataPath() + "/");
+      return component.local_url && component.local_url.replace("sn://", this.desktopManager.getApplicationDataPath() + "/");
     } else {
       return component.url || component.hosted_url;
     }
@@ -402,6 +402,7 @@ class ComponentManager {
         // Allow handlers to be notified when a save begins and ends, to update the UI
         var saveMessage = Object.assign({}, message);
         saveMessage.action = response && response.error ? "save-error" : "save-success";
+        this.replyToMessage(component, message, {error: response.error})
         this.handleMessage(component, saveMessage);
       });
     });
@@ -599,7 +600,7 @@ class ComponentManager {
       }
       return;
     }
-    
+
     if(this.loggingEnabled) {
       console.log("Web|sendMessageToComponent", component, message);
     }

app/assets/stylesheets/app/_modals.scss

@@ -79,6 +79,11 @@
   flex-grow: 1;
   display: flex;
   overflow: auto;
+
+  .sn-component {
+    min-width: 100%;
+  }
+
   iframe {
     flex: 1;
     width: 100%;

app/assets/templates/directives/component-view.html.haml

@@ -1,7 +1,7 @@
-.sn-component{"ng-if" => "!componentValid"}
+.sn-component{"ng-if" => "!componentValid && !offlineRestricted"}
   .panel.static
     .content
-      .panel-section
+      .panel-section.stretch
         %h2.title Unable to load Standard Notes Extended
         %p Your Extended subscription expired on {{component.dateToLocalizedString(component.valid_until)}}.
         %p
@@ -32,7 +32,26 @@
               %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
               page.
 
-%iframe{"ng-if" => "component && componentValid",
+.sn-component{"ng-if" => "offlineRestricted"}
+  .panel.static
+    .content
+      .panel-section.stretch
+        %h2.title You have restricted this extension to be used offline only.
+        %p Offline extensions are not available in the Web app.
+        .panel-row
+          .panel-column
+            %p You can either:
+            %p
+              %ul
+                %li <strong>Enable the Hosted option</strong> for this extension by opening the 'Extensions' menu and toggling 'Use hosted when local is unavailable' under this extension's options. Then press Reload below.
+                %li <strong>Use the Desktop application.</strong>
+        .panel-row
+          .button.info{"ng-if" => "!reloading", "ng-click" => "reloadStatus()"}
+            .label Reload
+          .spinner.info.small{"ng-if" => "reloading"}
+
+
+%iframe{"ng-if" => "component && componentValid && !offlineRestricted",
   "ng-attr-id" => "component-{{component.uuid}}",
   "ng-src" => "{{getUrl() | trusted}}", "frameBorder" => "0",
   "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms",