Merge 2.1

app/assets/templates/directives/account-menu.html.haml

@@ -0,0 +1,189 @@
+.sn-component
+  .panel#account-panel
+    .header
+      %h1.title Account
+      %a.close-button{"ng-click" => "close()"} Close
+    .content
+
+      .panel-section.hero{"ng-if" => "!user && !formData.showLogin && !formData.showRegister && !formData.mfa"}
+        %h1.title Sign in or register to enable sync and end-to-end encryption.
+        .panel-row
+        .panel-row
+          .button-group.stretch
+            .button.info.featured{"ng-click" => "formData.showLogin = true"}
+              .label Sign In
+            .button.info.featured{"ng-click" => "formData.showRegister = true"}
+              .label Register
+        %p
+          Standard Notes is free on every platform, and comes standard with sync and encryption.
+
+      .panel-section{"ng-if" => "formData.showLogin || formData.showRegister"}
+        %h3.title.panel-row
+          {{formData.showLogin ? "Sign In" : "Register"}}
+
+        %form.panel-form{"ng-submit" => "submitAuthForm()"}
+          %input{:placeholder => 'Email', "sn-autofocus" => 'true', "should-focus" => "true", :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'}
+          %input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'}
+          %input{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'}
+
+          %a.panel-row{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"}
+            Advanced Options
+          .notification.info{"ng-if" => "formData.showRegister"}
+            %h2.title No Password Reset.
+            .text Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.
+          .advanced-options.panel-row{"ng-if" => "formData.showAdvanced"}
+            .panel-column.stretch
+              %label Sync Server Domain
+              %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
+
+          .button-group.stretch.panel-row.form-submit
+            %button.button.info.featured{"type" => "submit"}
+              .label {{formData.showLogin ? "Sign In" : "Register"}}
+
+          %label
+            %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"}
+            Stay signed in
+          %label{"ng-if" => "notesAndTagsCount() > 0"}
+            %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
+            Merge local data ({{notesAndTagsCount()}} notes and tags)
+
+        %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"}
+        {{formData.status}}
+
+      .panel-section{"ng-if" => "formData.mfa"}
+        %form{"ng-submit" => "submitMfaForm()"}
+          %p {{formData.mfa.message}}
+          %input.form-control.mt-10{:placeholder => "Enter Code", "sn-autofocus" => "true", "should-focus" => "true", :autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
+          .button-group.stretch.panel-row.form-submit
+            %button.button.info.featured{"type" => "submit"}
+              .label Sign In
+
+      %div{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"}
+        .panel-section{"ng-if" => "user"}
+          .panel-row
+            %h2.title.wrap {{user.email}}
+            .horizontal-group{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
+              .spinner.small.info
+              .sublabel
+                {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
+                %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}}
+
+          .subtitle.danger.panel-row{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}
+
+          .subtitle.subtle.normal {{server}}
+
+          .panel-row
+
+          %a.panel-row.condensed{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
+          .notification.warning{"ng-if" => "newPasswordData.changePassword"}
+            %h1.title Change Password
+            .text
+              %p Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
+              %p If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
+              %p After changing your password, you must log out of all other applications currently signed in to your account.
+              %p.bold It is highly recommended you download a backup of your data before proceeding.
+            .panel-row{"ng-if" => "!newPasswordData.status"}
+              .horizontal-group{"ng-if" => "!newPasswordData.showForm"}
+                %a.red{"ng-click" => "showPasswordChangeForm()"} Continue
+                %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
+              .panel-row{"ng-if" => "newPasswordData.showForm"}
+                %form.panel-form.stretch
+                  %input{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
+                  %input{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
+                  .button-group.stretch.panel-row.form-submit
+                    .button.info{"type" => "submit", "ng-click" => "submitPasswordChange()"}
+                      .label Submit
+                  %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
+
+            %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}
+
+
+
+          %a.panel-row.condensed{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
+          %div{"ng-if" => "showAdvanced"}
+            %a.panel-row{"ng-click" => "reencryptPressed()"} Resync All Items
+
+
+          %a.panel-row.condensed{"ng-if" => "securityUpdateAvailable()", "ng-click" => "clickedSecurityUpdate()"} Security Update Available
+          .notification.default{"ng-if" => "securityUpdateData.showForm"}
+            %p
+              %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more.
+            %form.panel-form.stretch{"ng-if" => "!securityUpdateData.processing", "ng-submit" => "submitSecurityUpdateForm()"}
+              %p Enter your password to update:
+              %input.panel-row{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
+              .button-group.stretch.panel-row.form-submit
+                %button.button.info{"ng-type" => "submit"}
+                  .label Update
+            .panel-row{"ng-if" => "securityUpdateData.processing"}
+              %p.info Processing...
+
+
+        .panel-section
+          %h3.title.panel-row Encryption
+          %h5.subtitle.info.panel-row{"ng-if" => "encryptionEnabled()"}
+            {{encryptionStatusForNotes()}}
+          %p
+            {{encryptionStatusString()}}
+
+        .panel-section
+          %h3.title.panel-row Passcode Lock
+          %div{"ng-if" => "!hasPasscode()"}
+            .panel-row{"ng-if" => "!formData.showPasscodeForm"}
+              .button.info{"ng-click" => "addPasscodeClicked(); $event.stopPropagation();"}
+                .label Add Passcode
+
+            %p Add an app passcode to lock the app and encrypt on-device key storage.
+
+          %form{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"}
+            %input.form-control{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "sn-autofocus" => "true", "should-focus" => "true"}
+            %input.form-control{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
+            .button-group.stretch.panel-row.form-submit
+              %button.button.info{"type" => "submit"}
+                .label Set Passcode
+            %a.panel-row{"ng-click" => "formData.showPasscodeForm = false"} Cancel
+
+          %div{"ng-if" => "hasPasscode() && !formData.showPasscodeForm"}
+            .panel-row
+              %p
+                Passcode lock is enabled.
+                %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit.
+            .panel-row.justify-left
+              .horizontal-group
+                %a.info{"ng-click" => "changePasscodePressed()"} Change Passcode
+                %a.danger{"ng-click" => "removePasscodePressed()"} Remove Passcode
+
+
+
+        .panel-section{"ng-if" => "!importData.loading"}
+          %h3.title Data Backups
+          %form.panel-form{"ng-if" => "encryptedBackupsAvailable()"}
+            .input-group
+              %label
+                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
+                Encrypted
+              %label
+                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
+                Decrypted
+
+          .button-group
+            .button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"}
+              .label Download Backup
+
+            %label.button.info
+              %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
+              .label Import From Backup
+
+          %div{"ng-if" => "importData.requestPassword"}
+            %form.panel-form.stretch{"ng-submit" => "submitImportPassword()"}
+              %p Enter the account password associated with the import file.
+              %input.form-control.mt-5{:type => 'password', "placeholder" => "Enter File Account Password", "ng-model" => "importData.password", "autofocus" => "true"}
+              .button-group.stretch.panel-row.form-submit
+                %button.button.info{"type" => "submit"}
+                  .label Decrypt & Import
+          .panel-row
+            .spinner.small.info{"ng-if" => "importData.loading"}
+    .footer
+      %a.right{"ng-if" => "formData.showLogin || formData.showRegister", "ng-click" => "formData.showLogin = false; formData.showRegister = false;"}
+        Cancel
+      %a.right{"ng-if" => "!formData.showLogin && !formData.showRegister", "ng-click" => "destroyLocalData()"}
+        {{ user ? "Sign out and clear local data" : "Clear all local data" }}

app/assets/templates/directives/actions-menu.html.haml

@@ -0,0 +1,32 @@
+.sn-component
+  .menu-panel.dropdown-menu
+
+    %a.no-decoration{"ng-if" => "extensions.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
+      %menu-row{"title" => "'Download Actions'"}
+
+    %div{"ng-repeat" => "extension in extensions"}
+      .header{"ng-click" => "extension.hide = !extension.hide; $event.stopPropagation();"}
+        .column
+          %h4.title {{extension.name}}
+          .spinner.small.loading{"ng-if" => "extension.loading"}
+          %div{"ng-if" => "extension.hide"} …
+
+      %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)",
+      "ng-click" => "executeAction(action, extension); $event.stopPropagation();", "title" => "action.label", "subtitle" => "action.desc",
+      "spinner-class" => "action.running ? 'info' : null", "sub-rows" => "action.subrows"}
+        .sublabel{"ng-if" => "action.access_type"}
+          Uses
+          %strong {{action.access_type}}
+          access to this note.
+
+
+.modal.medium{"ng-if" => "renderData.showRenderModal", "ng-click" => "$event.stopPropagation();"}
+  .content
+    .sn-component
+      .panel
+        .header
+          %h1.title Preview
+          %a.close-button.info{"ng-click" => "renderData.showRenderModal = false; $event.stopPropagation();"} Close
+        .content.selectable
+          %h2 {{renderData.title}}
+          %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}

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

@@ -0,0 +1,10 @@
+.background{"ng-click" => "dismiss()"}
+
+.content
+  .sn-component
+    .panel{"ng-attr-id" => "component-{{component.uuid}}"}
+      .header
+        %h1.title
+          {{component.name}}
+        %a.close-button.info{"ng-click" => "dismiss()"} Close
+      %component-view.component-view{"component" => "component"}

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

@@ -0,0 +1,70 @@
+.sn-component{"ng-if" => "error == 'expired'"}
+  .panel.static
+    .content
+      .panel-section.stretch
+        %h2.title Unable to load Standard Notes Extended
+        %p Your Extended subscription expired on {{component.dateToLocalizedString(component.valid_until)}}.
+        %p
+          Please visit
+          %a{"href" => "https://dashboard.standardnotes.org", "target" => "_blank"} dashboard.standardnotes.org
+          to renew your subscription, then open the "Extensions" menu via the bottom menu of the app to refresh your account data.
+          Afterwards, press the button below to attempt to reload this component.
+        .panel-row
+          .button.info{"ng-if" => "!reloading", "ng-click" => "reloadStatus()"}
+            .label Reload
+          .spinner.info.small{"ng-if" => "reloading"}
+
+        .panel-row
+        .panel-row
+          .panel-column
+            %p <strong>Otherwise</strong>, please follow the steps below to disable any external editors, so you can edit your note using the plain text editor instead.
+
+            %p
+              %ol
+                %li Click the "Editor" menu item above (under the note title).
+                %li Select "Plain Editor".
+                %li Repeat this for every note you'd like to access. You can also delete the editor completely to disable it for all notes. To do so, click "Extensions" in the lower left corner of the app, then, for every editor, click "Uninstall".
+
+            %p
+              Need help? Please email us at
+              %a{"href" => "mailto:hello@standardnotes.org", "target" => "_blank"} hello@standardnotes.org
+              or check out the
+              %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
+              page.
+
+.sn-component{"ng-if" => "error == 'offline-restricted'"}
+  .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"}
+
+.sn-component{"ng-if" => "error == 'url-missing'"}
+  .panel.static
+    .content
+      .panel-section.stretch
+        %h2.title This extension is not installed correctly.
+        %p Please uninstall {{component.name}}, then re-install it.
+
+        %p
+          This issue can occur if you access Standard Notes using an older version of the app.
+          Ensure you are running at least version 2.1 on all platforms.
+
+
+%iframe{"ng-if" => "component && componentValid",
+  "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",
+  "data-component-id" => "{{component.uuid}}"}
+  Loading

app/assets/templates/directives/editor-menu.html.haml

@@ -0,0 +1,26 @@
+.sn-component
+  .menu-panel.dropdown-menu
+    .section
+      .header
+        %h4.title Note Editor
+      %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectComponent($event, null)"}
+
+      %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectComponent($event, editor)", "title" => "editor.name",
+      "circle" => "selectedEditor === editor && 'success'",
+       "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'",
+       "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"}
+        .column{"ng-if" => "component.conflict_of || shouldDisplayRunningLocallyLabel(editor)"}
+          %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
+          .sublabel{"ng-if" => "shouldDisplayRunningLocallyLabel(editor)"} Running Locally
+
+      %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
+        %menu-row{"title" => "'Download More Editors'"}
+
+    .section{"ng-if" => "stack.length > 0"}
+      .header
+        %h4.title Editor Stack
+      %menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "title" => "component.name",
+      "circle" => "stackComponentEnabled(component) ? 'success' : 'danger'"}
+        .column{"ng-if" => "component.conflict_of || shouldDisplayRunningLocallyLabel(component)"}
+          %strong.red.medium{"ng-if" => "component.conflict_of"} Conflicted copy
+          .sublabel{"ng-if" => "shouldDisplayRunningLocallyLabel(component)"} Running Locally

app/assets/templates/directives/menu-row.html.haml

@@ -0,0 +1,21 @@
+.row
+  .column
+    .left
+      .column{"ng-if" => "circle"}
+        .circle.small{"ng-class" => "circle"}
+      .column{"ng-class" => "{'faded' : faded}"}
+        .label
+          {{title}}
+        .sublabel{"ng-if" => "subtitle"}
+          {{subtitle}}
+        %ng-transclude
+    .subrows{"ng-if" => "subRows && subRows.length > 0"}
+      %menu-row{"ng-repeat" => "row in subRows", "ng-click" => "row.onClick($event); $event.stopPropagation();",
+      "title" => "row.title", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"}
+
+  .column{"ng-if" => "hasButton"}
+    .button.info{"ng-click" => "clickButton($event)", "ng-class" => "buttonClass"}
+      {{buttonText}}
+
+  .column{"ng-if" => "spinnerClass"}
+    .spinner.small{"ng-class" => "spinnerClass"}

app/assets/templates/directives/panel-resizer.html.haml

@@ -0,0 +1 @@
+.panel-resizer-column

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

@@ -0,0 +1,22 @@
+.background{"ng-click" => "deny()"}
+
+.content#permissions-modal
+  .sn-component
+    .panel
+      .header
+        %h1.title Activate Extension
+        %a.close-button.info{"ng-click" => "deny()"} Cancel
+      .content
+        .panel-section
+          .panel-row
+            %h3
+              %strong {{component.name}}
+              would like to interact with your
+              {{permissionsString()}}
+
+          .panel-row
+            %p
+              Extensions use an offline messaging system to communicate. Learn more at
+              %a{"href" => "https://standardnotes.org/permissions", "target" => "_blank"} https://standardnotes.org/permissions.
+      .footer
+        .button.info.big.block.bold{"ng-click" => "accept()"} Continue

app/assets/templates/editor.html.haml

@@ -0,0 +1,59 @@
+.section.editor#editor-column
+  #editor-title-bar.section-title-bar{"ng-show" => "ctrl.note && !ctrl.note.errorDecrypting"}
+    .title
+      %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)",
+                "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
+                "select-on-click" => "true"}
+
+    #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
+
+    .editor-tags
+      #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}
+        %component-view.component-view{ "component" => "ctrl.tagsComponent"}
+      %input.tags-input{"ng-if" => "!(ctrl.tagsComponent && ctrl.tagsComponent.active)", "type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();",
+      "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)",
+       "spellcheck" => "false"}
+
+  .sn-component{"ng-if" => "ctrl.note"}
+    .app-bar.no-edges
+      .left
+        .item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
+          .label Menu
+          .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+            .section
+              .header
+                %h4.title Note Options
+              %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.togglePin()"}
+              %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleArchiveNote()"}
+              %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
+
+            .section{"ng-if" => "!ctrl.selectedEditor"}
+              .header
+                %h4.title Global Display
+              %menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleKey('monospaceFont')"}
+              %menu-row{"title" => "'Spellcheck'", "circle" => "ctrl.spellcheck ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleKey('spellcheck')"}
+
+        .item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
+          .label Editor
+          %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.editorMenuOnSelect", "selected-editor" => "ctrl.selectedEditor", "current-item" => "ctrl.note"}
+
+        .item{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showExtensions}", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
+          .label Actions
+          %actions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
+
+  .editor-content#editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting"}
+    %panel-resizer.left{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"}
+    %component-view.component-view{"ng-if" => "ctrl.selectedEditor", "component" => "ctrl.selectedEditor"}
+    %textarea.editable#note-text-editor{"ng-if" => "!ctrl.selectedEditor", "ng-model" => "ctrl.note.text",
+     "ng-change" => "ctrl.contentChanged()", "ng-trim" => "false", "ng-click" => "ctrl.clickedTextArea()",
+     "ng-focus" => "ctrl.onContentFocus()", "dir" => "auto", "ng-attr-spellcheck" => "{{ctrl.spellcheck}}"}
+      {{ctrl.onSystemEditorLoad()}}
+    %panel-resizer{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "hoverable" => "true", "property" => "'right'"}
+
+  %section.section{"ng-if" => "ctrl.note.errorDecrypting"}
+    %p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
+
+  #editor-pane-component-stack
+    .sn-component
+      %component-view.component-view.component-stack-item.border-color{"ng-repeat" => "component in ctrl.componentStack",
+       "ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"}

app/assets/templates/footer.html.haml

@@ -0,0 +1,41 @@
+.sn-component
+  #footer-bar.app-bar.no-edges
+    .left
+      .item{"ng-click" => "ctrl.accountMenuPressed()", "click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
+        .column
+          .circle.small{"ng-class" => "ctrl.error ? 'danger' : (ctrl.getUser() ? 'info' : 'default')"}
+        .column
+          .label.title{"ng-class" => "{red: ctrl.error}"} Account
+        %account-menu{"ng-click" => "$event.stopPropagation()", "ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess", "close-function" => "ctrl.closeAccountMenu"}
+
+      .item
+        %a.no-decoration.label.title{"href" => "https://standardnotes.org/help", "target" => "_blank"}
+          Help
+
+      .item.border
+
+      .item{"ng-repeat" => "room in ctrl.rooms track by room.uuid"}
+        .column{"ng-click" => "ctrl.selectRoom(room)"}
+          .label {{room.name}}
+        %component-modal{"ng-if" => "room.showRoom", "component" => "room", "on-dismiss" => "ctrl.onRoomDismiss"}
+
+
+    .right
+
+      .item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
+        %span.info.label New update downloaded. Installs on app restart.
+
+      .item.no-pointer{"ng-if" => "ctrl.lastSyncDate && !ctrl.isRefreshing"}
+        .label.subtle
+          Last refreshed {{ctrl.lastSyncDate | appDateTime}}
+      .item{"ng-if" => "ctrl.lastSyncDate && ctrl.isRefreshing"}
+        .spinner.small
+
+      .item{"ng-if" => "ctrl.offline"}
+        .label Offline
+      .item{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"}
+        .label Refresh
+
+      .item#lock-item{"ng-if" => "ctrl.hasPasscode()"}
+        .label
+          %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}

app/assets/templates/frontend/directives/contextual-menu.html.haml

@@ -1,33 +0,0 @@
-%ul.dropdown-menu.sectioned-menu
-  .extension{"ng-repeat" => "extension in extensions"}
-    .header{"ng-click" => "extension.hide = !extension.hide"}
-      .title {{extension.name}}
-      .subtitle
-        Will submit your note
-        %strong {{accessTypeForExtension(extension)}}
-      .spinner.loading{"ng-if" => "extension.loading"}
-      %div{"ng-if" => "extension.hide"} …
-    %ul{"ng-if" => "!extension.hide"}
-      %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
-      "ng-class" => "{'faded' : !isActionEnabled(action, extension)}"}
-        %label.menu-item-title {{action.label}}
-        .menu-item-subtitle {{action.desc}}
-
-        .small.normal{"ng-if" => "!isActionEnabled(action, extension)"}
-          Requires {{action.access_type}} access to this note.
-
-        %div{"ng-if" => "action.showNestedActions"}
-          %ul.mt-10
-            %li.menu-item.white-bg.nested-hover{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension, action); $event.stopPropagation();", "style" => "margin-top: -1px;"}
-              %label.menu-item-title {{subaction.label}}
-              .menu-item-subtitle {{subaction.desc}}
-              %span{"ng-if" => "subaction.running"}
-                .spinner{"style" => "margin-top: 3px;"}
-
-        %span{"ng-if" => "action.running"}
-          .spinner{"style" => "margin-top: 3px;"}
-
-.extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
-  .content
-    %h2 {{renderData.title}}
-    %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}

app/assets/templates/frontend/directives/editor-menu.html.haml

@@ -1,18 +0,0 @@
-%ul.dropdown-menu.sectioned-menu
-  .header
-    .title System Editor
-  %ul
-    %li.menu-item{"ng-click" => "selectEditor($event, null)"}
-      %span.pull-left.mr-10{"ng-if" => "selectedEditor == null"} ✓
-      %label.menu-item-title.pull-left Plain
-
-  %div{"ng-if" => "editors.length > 0"}
-    .header
-      .title External Editors
-      .subtitle Can access your current note decrypted.
-    %ul
-      %li.menu-item{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)"}
-        %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
-        %label.menu-item-title
-          %span.inline.tinted.mr-10{"ng-if" => "selectedEditor === editor"} ✓
-          {{editor.name}}

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

@@ -1,138 +0,0 @@
-.panel.panel-default.account-panel.panel-right#global-ext-menu
-  .panel-body
-    .container
-      .float-group.h20
-        %h1.tinted.pull-left Extensions
-        %a.block.pull-right.dashboard-link{"href" => "https://dashboard.standardnotes.org", "target" => "_blank"} Open Dashboard
-      %div.clear{"ng-if" => "!extensionManager.extensions.length && !themeManager.themes.length && !componentManager.components.length"}
-        %p Customize your experience with editors, themes, and actions.
-        .tinted-box.mt-10
-          %h3 Available as part of the Extended subscription.
-          %p.mt-5 Note history
-          %p.mt-5 Automated backups
-          %p.mt-5 Editors, themes, and actions
-          %a{"href" => "https://standardnotes.org/extensions", "target" => "_blank"}
-            %button.mt-10
-              %h3 Learn More
-
-    %div{"ng-if" => "themeManager.themes.length > 0"}
-      .header.container.section-margin
-        %h2 Themes
-      %ul
-        %li{"ng-repeat" => "theme in themeManager.themes | orderBy: 'name'", "ng-click" => "clickedExtension(theme)"}
-          .container
-            %h3
-              %input.bold{"ng-if" => "theme.rename", "ng-model" => "theme.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(theme);", "mb-autofocus" => "true", "should-focus" => "true"}
-              %span{"ng-if" => "!theme.rename"} {{theme.name}}
-            %a{"ng-if" => "!themeManager.isThemeActive(theme)", "ng-click" => "themeManager.activateTheme(theme); $event.stopPropagation();"} Activate
-            %a{"ng-if" => "themeManager.isThemeActive(theme)", "ng-click" => "themeManager.deactivateTheme(theme); $event.stopPropagation();"} Deactivate
-            .mt-3{"ng-if" => "theme.showDetails"}
-              .link-group
-                %a{"ng-click" => "renameExtension(theme); $event.stopPropagation();"} Rename
-                %a{"ng-click" => "theme.showLink = !theme.showLink; $event.stopPropagation();"} Show Link
-                %a.red{"ng-click" => "deleteTheme(theme); $event.stopPropagation();"} Delete
-                %p.small.selectable.wrap{"ng-if" => "theme.showLink"}
-                  {{theme.url}}
-
-
-    %div{"ng-if" => "extensionManager.extensions.length"}
-      .header.container.section-margin
-        %h2 Actions
-        %p{"style" => "margin-top: 3px;"} Choose "Actions" in the note editor to use installed actions.
-
-      %ul
-        %li{"ng-repeat" => "extension in extensionManager.extensions | orderBy: 'name'", "ng-init" => "extension.formData = {}", "ng-click" => "clickedExtension(extension)"}
-          .container
-            %h3
-              %input.bold{"ng-if" => "extension.rename", "ng-model" => "extension.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(extension);", "mb-autofocus" => "true", "should-focus" => "true"}
-              %span{"ng-if" => "!extension.rename"} {{extension.name}}
-            %p.small{"ng-if" => "extension.description"} {{extension.description}}
-            %div{"ng-if" => "extension.showDetails"}
-              .mt-10
-                %label.block Access Type
-                %label.normal.block{"ng-click" => " $event.stopPropagation();"}
-                  %input{"type" => "radio", "ng-model" => "extension.encrypted", "ng-value" => "true", "ng-change" => "changeExtensionEncryptionFormat(true, extension);"}
-                  Encrypted
-                %label.normal.block{"ng-click" => " $event.stopPropagation();"}
-                  %input{"type" => "radio", "ng-model" => "extension.encrypted", "ng-value" => "false", "ng-change" => "changeExtensionEncryptionFormat(false, extension);"}
-                  Decrypted
-
-              .small-v-space
-
-              %ul{"ng-repeat" => "action in extension.actionsInGlobalContext()"}
-                %li
-                  %label.block {{action.label}}
-                  %em{"style" => "font-style: italic;"} {{action.desc}}
-                  %em{"ng-if" => "action.repeat_mode == 'watch'"}
-                    Repeats when a change is made to your items.
-                  %em{"ng-if" => "action.repeat_mode == 'loop'"}
-                    Repeats at most once every {{action.repeat_timeout}} seconds
-                  %div
-                    %a{"ng-click" => "action.showPermissions = !action.showPermissions"} {{action.showPermissions ? "Hide permissions" : "Show permissions"}}
-                    %div{"ng-if" => "action.showPermissions"}
-                      {{action.permissionsString()}}
-                      %label.block.normal {{action.encryptionModeString()}}
-
-                  %div
-                    .mt-5{"ng-if" => "action.repeat_mode"}
-                      %button.light.tinted{"ng-if" => "extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.disableRepeatAction(action, extension); $event.stopPropagation();"} Disable
-                      %button.light.tinted{"ng-if" => "!extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.enableRepeatAction(action, extension); $event.stopPropagation();"} Enable
-                    %button.light.mt-10{"ng-if" => "!action.running && !action.repeat_mode", "ng-click" => "selectedAction(action, extension); $event.stopPropagation();"}
-                      Perform Action
-                    .spinner.mb-5.block{"ng-if" => "action.running"}
-                  %p.mb-5.mt-5.small{"ng-if" => "!action.error && action.lastExecuted && !action.running"}
-                    Last run {{action.lastExecuted | appDateTime}}
-                  %label.red{"ng-if" => "action.error"}
-                    Error performing action.
-
-              %a.block.mt-5{"ng-click" => "renameExtension(extension); $event.stopPropagation();"} Rename
-              %a.block.mt-5{"ng-click" => "extension.showURL = !extension.showURL; $event.stopPropagation();"} Show Link
-              %p.wrap.selectable.small{"ng-if" => "extension.showURL"} {{extension.url}}
-              %a.block.mt-5{"ng-click" => "deleteActionExtension(extension); $event.stopPropagation();"} Delete
-
-    %div{"ng-if" => "componentManager.components.length > 0"}
-      .header.container.section-margin
-        %h2 Components
-      %ul
-        %li{"ng-repeat" => "component in componentManager.components | orderBy: 'name'", "ng-click" => "clickedExtension(component)"}
-          .container
-            %h3
-              %input.bold{"ng-if" => "component.rename", "ng-model" => "component.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(component);", "mb-autofocus" => "true", "should-focus" => "true"}
-              %span{"ng-if" => "!component.rename"} {{component.name}}
-
-            %div{"ng-if" => "component.isEditor()"}
-              %a{"ng-if" => "!component.isDefaultEditor()", "ng-click" => "makeEditorDefault(component); $event.stopPropagation();"} Make Default
-              %a{"ng-if" => "component.isDefaultEditor()", "ng-click" => "removeEditorDefault(component); $event.stopPropagation();"} Remove Default
-            %div{"ng-if" => "!component.isEditor()"}
-              %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
-            .mt-3{"ng-if" => "component.showDetails"}
-              .link-group
-                %a{"ng-click" => "renameExtension(component); $event.stopPropagation();"} Rename
-                %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
-                %a.red{"ng-click" => "deleteComponent(component); $event.stopPropagation();"} Delete
-                %p.small.selectable.wrap{"ng-if" => "component.showLink"}
-                  {{component.url}}
-
-    %div{"ng-if" => "serverExtensions.length > 0"}
-      .header.container.section-margin
-        %h2 Server Extensions
-      %ul
-        %li{"ng-repeat" => "ext in serverExtensions", "ng-click" => "ext.showDetails = !ext.showDetails"}
-          .container
-            %strong.red.medium{"ng-if" => "ext.conflict_of"} Conflicted copy
-            %h3 {{nameForServerExtension(ext)}}
-            %div.mt-3{"ng-if" => "ext.showDetails"}
-              .link-group
-                %a{"ng-click" => "ext.showUrl = !ext.showUrl; $event.stopPropagation();"} Show Link
-                %a.red{ "ng-click" => "deleteServerExt(ext); $event.stopPropagation();"} Delete
-              .wrap.mt-5.selectable{"ng-if" => "ext.showUrl"} {{ext.url}}
-
-    .container.section-margin
-      %h2.tinted Install
-      %p.faded Enter an install link
-      %form.mt-10.mb-10
-        %input.form-control{:autofocus => 'autofocus', :name => 'url', :required => true, :autocomplete => "off",
-        :type => 'url', 'ng-model' => 'formData.installLink', "ng-keyup" => "$event.keyCode == 13 && submitInstallLink();"}
-      %p.tinted{"ng-if" => "formData.successfullyInstalled"} Successfully installed extension.

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

@@ -1,25 +0,0 @@
-.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 tinted' : 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.tinted{"ng-click" => "accept()"} Accept

app/assets/templates/frontend/editor.html.haml

@@ -1,62 +0,0 @@
-.section.editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen}"}
-  #editor-title-bar.section-title-bar{"ng-show" => "ctrl.note && !ctrl.note.errorDecrypting", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
-    .title
-      %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)",
-                "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()",
-                "select-on-click" => "true"}
-
-    #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'orange bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
-
-    .editor-tags
-      #note-tags-component-container{"ng-if" => "ctrl.tagsComponent && ctrl.tagsComponent.active"}
-        %iframe#note-tags-iframe{"ng-src" => "{{ctrl.tagsComponent.url | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts", "data-component-id" => "{{ctrl.tagsComponent.uuid}}"}
-      %input.tags-input{"ng-if" => "!(ctrl.tagsComponent && ctrl.tagsComponent.active)", "type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();",
-      "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
-  %ul.section-menu-bar{"ng-if" => "ctrl.note"}
-    %li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
-      %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
-
-      %ul.dropdown-menu.sectioned-menu{"ng-if" => "ctrl.showMenu"}
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
-            %i.icon.ion-ios-flag
-            {{ctrl.note.pinned ? "Unpin" : "Pin"}}
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
-            %i.icon.ion-ios-box
-            {{ctrl.note.archived ? "Unarchive" : "Archive"}}
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
-            %i.icon.ion-trash-b
-            Delete
-        %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()"}
-            %i.icon.ion-arrow-expand
-            Toggle Fullscreen
-
-        %li{"ng-if" => "ctrl.hasDisabledStackComponents()"}
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledStackComponents()"} Restore Disabled Components
-
-    %li{"ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
-      %label{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} Editor
-      %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editorComponent"}
-
-    %li{"ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
-      %label{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} Actions
-      %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
-
-  .editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
-    %iframe#editor-iframe{"ng-if" => "ctrl.editorComponent && ctrl.editorComponent.active", "ng-src" => "{{ctrl.editorComponent.url | trusted}}", "data-component-id" => "{{ctrl.editorComponent.uuid}}", "frameBorder" => "0", "style" => "width: 100%;"}
-      Loading
-    %textarea.editable#note-text-editor{"ng-if" => "!ctrl.editorComponent", "ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-model" => "ctrl.note.text",
-     "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()", "dir" => "auto"}
-      {{ctrl.onSystemEditorLoad()}}
-
-
-  %section.section{"ng-if" => "ctrl.note.errorDecrypting"}
-    %p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
-
-  #editor-pane-component-stack
-    .component.component-stack-border{"ng-repeat" => "component in ctrl.componentStack", "ng-if" => "component.active", "ng-show" => "!component.ignoreEvents", "id" => "{{'component-' + component.uuid}}", "ng-mouseover" => "component.showExit = true", "ng-mouseleave" => "component.showExit = false"}
-      .exit-button.body-text-color{"ng-if" => "component.showExit", "ng-click" => "ctrl.disableComponentForCurrentItem(component, true)"} ×
-      %iframe{"ng-src" => "{{component.url | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-modals", "data-component-id" => "{{component.uuid}}"}

app/assets/templates/frontend/footer.html.haml

@@ -1,31 +0,0 @@
-#footer-bar
-  .pull-left
-    .footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
-      %a{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
-      %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
-
-    .footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
-      %a{"ng-click" => "ctrl.toggleExtensions()"} Extensions
-      %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
-
-    .footer-bar-link
-      %a{"href" => "https://standardnotes.org/help", "target" => "_blank"}
-        Help
-
-  .pull-right
-
-    .footer-bar-link{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
-      %span.tinted.normal New update downloaded. Installs on app restart.
-
-    .footer-bar-link{"style" => "margin-right: 5px;"}
-      %span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
-        %span{"ng-if" => "!ctrl.isRefreshing"}
-          Last refreshed {{ctrl.lastSyncDate | appDateTime}}
-        %span{"ng-if" => "ctrl.isRefreshing"}
-          .spinner{"style" => "margin-top: 2px;"}
-
-      %strong{"ng-if" => "ctrl.offline"} Offline
-      %a{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
-
-      %span{"ng-if" => "ctrl.hasPasscode()"}
-        %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}

app/assets/templates/frontend/lock-screen.html.haml

@@ -1,9 +0,0 @@
-#lock-screen
-  .content
-    %h3.center-align Passcode Required
-
-    %form.mt-20{"ng-submit" => "submitPasscodeForm()"}
-      %input.form-control.mt-10{:type => 'password',
-      "ng-model" => "formData.passcode", "autofocus" => "true",
-      "placeholder" => "Enter Passcode", "autocomplete" => "new-password"}
-      %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Unlock

app/assets/templates/frontend/notes.html.haml

@@ -1,64 +0,0 @@
-.section.notes
-  .content
-    .section-title-bar#notes-title-bar
-      .title {{ctrl.tag.title}} notes
-      .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()"} +
-      %br
-      .filter-section
-        %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
-          #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
-      %ul.section-menu-bar#notes-menu-bar
-        %li.item-with-subtitle{"ng-class" => "{'selected' : ctrl.showMenu}"}
-          .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
-            %label Options
-            .subtitle {{ctrl.optionsSubtitle()}}
-
-          .sectioned-menu.dropdown-menu{"ng-if" => "ctrl.showMenu"}
-            %ul
-              .header
-                .title Sort by
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
-                  By date added
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
-                  By date modified
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓
-                  By title
-            %ul{"ng-if" => "!ctrl.tag.archiveTag"}
-              .header
-                .title Archives
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleShowArchived()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓
-                  Show archived notes
-
-    .scrollable
-      .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
-        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | sortBy: ctrl.sortBy| limitTo:ctrl.notesToDisplay)) track by note.uuid",
-            "ng-click" => "ctrl.selectNote(note)", "ng-class" => "{'selected' : ctrl.selectedNote == note}"}
-          %strong.red.medium{"ng-if" => "note.conflict_of"} Conflicted copy
-          %strong.red.medium{"ng-if" => "note.errorDecrypting"} Error decrypting
-
-          .pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
-            %i.icon.ion-ios-flag
-            %strong.medium Pinned
-
-          .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
-            %i.icon.ion-ios-box
-            %strong.medium Archived
-
-          .tags-string{"ng-if" => "ctrl.tag.all"}
-            .faded {{note.tagsString()}}
-
-          .name{"ng-if" => "note.title"}
-            {{note.title}}
-          .note-preview
-            {{note.text}}
-          .date.faded
-            %span{"ng-if" => "ctrl.sortBy == 'updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
-            %span{"ng-if" => "ctrl.sortBy != 'updated_at'"} {{note.createdAtString() || 'Now'}}

app/assets/templates/home.html.haml

@@ -1,6 +1,6 @@
 .main-ui-view
   %lock-screen{"ng-if" => "needsUnlock", "on-success" => "onSuccessfulUnlock"}
-  .app{"ng-if" => "!needsUnlock"}
+  .app#app{"ng-if" => "!needsUnlock"}
     %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade",
     "all-tag" => "allTag", "archive-tag" => "archiveTag", "tags" => "tags", "remove-tag" => "removeTag"}
 

app/assets/templates/lock-screen.html.haml

@@ -0,0 +1,14 @@
+#lock-screen.sn-component
+  .panel
+    .header
+      %h1.title Passcode Required
+    .content
+      .panel-section
+        %form.panel-form.panel-row{"ng-submit" => "submitPasscodeForm()"}
+          .panel-column.stretch
+            %input.panel-row{:type => 'password',
+            "ng-model" => "formData.passcode", "autofocus" => "true", "sn-autofocus" => "true", "should-focus" => "true",
+            "placeholder" => "Enter Passcode", "autocomplete" => "new-password"}
+            .button-group.stretch.panel-row.form-submit
+              %button.button.info{"type" => "submit"}
+                .label Unlock

app/assets/templates/notes.html.haml

@@ -0,0 +1,68 @@
+.section.notes#notes-column
+  .content
+    .section-title-bar#notes-title-bar
+      .padded
+        .section-title-bar-header
+          .title {{ctrl.panelTitle()}}
+          .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()"} +
+        .filter-section
+          %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
+            #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
+      .sn-component#notes-menu-bar
+        .app-bar.no-edges
+          .left
+            .item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu", "ng-class" => "{'selected' : ctrl.showMenu}"}
+              .column
+                .label
+                  Options
+              .column
+                .sublabel {{ctrl.optionsSubtitle()}}
+
+          .sn-component{"ng-if" => "ctrl.showMenu"}
+            .menu-panel.dropdown-menu
+              .section
+                .header
+                  %h4.title Sort By
+
+                %menu-row{"title" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
+                %menu-row{"title" => "'Date Modified'", "circle" => "ctrl.sortBy == 'updated_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
+                %menu-row{"title" => "'Title'", "circle" => "ctrl.sortBy == 'title' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
+
+              .section{"ng-if" => "!ctrl.tag.archiveTag"}
+                .header
+                  %h4.title Display
+
+                %menu-row{"title" => "'Archived Notes'", "circle" => "ctrl.showArchived ? 'success' : 'danger'", "faded" => "!ctrl.showArchived", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
+                %menu-row{"title" => "'Pinned Notes'", "circle" => "ctrl.hidePinned ? 'danger' : 'success'", "faded" => "ctrl.hidePinned", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
+                %menu-row{"title" => "'Note Preview'", "circle" => "ctrl.hideNotePreview ? 'danger' : 'success'", "faded" => "ctrl.hideNotePreview", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
+                %menu-row{"title" => "'Date'", "circle" => "ctrl.hideDate ? 'danger' : 'success'","faded" => "ctrl.hideDate", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
+                %menu-row{"title" => "'Tags'", "circle" => "ctrl.hideTags ? 'danger' : 'success'","faded" => "ctrl.hideTags", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
+
+
+    .scrollable
+      .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
+        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | sortBy: ctrl.sortBy | limitTo:ctrl.notesToDisplay)) track by note.uuid",
+            "ng-click" => "ctrl.selectNote(note)", "ng-class" => "{'selected' : ctrl.selectedNote == note}"}
+          %strong.red.medium{"ng-if" => "note.conflict_of"} Conflicted copy
+          %strong.red.medium{"ng-if" => "note.errorDecrypting"} Error decrypting
+
+          .pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
+            %i.icon.ion-bookmark
+            %strong.medium Pinned
+
+          .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
+            %i.icon.ion-ios-box
+            %strong.medium Archived
+
+          .tags-string{"ng-if" => "ctrl.shouldShowTags(note)"}
+            .faded {{note.tagsString()}}
+
+          .name{"ng-if" => "note.title"}
+            {{note.title}}
+          .note-preview{"ng-if" => "!ctrl.hideNotePreview"}
+            {{note.text}}
+          .date.faded{"ng-if" => "!ctrl.hideDate"}
+            %span{"ng-if" => "ctrl.sortBy == 'updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
+            %span{"ng-if" => "ctrl.sortBy != 'updated_at'"} {{note.createdAtString() || 'Now'}}
+
+  %panel-resizer{"panel-id" => "'notes-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}

app/assets/templates/tags.html.haml

@@ -1,9 +1,13 @@
 .section.tags#tags-column
-  %iframe#tags-list-iframe{"ng-if" => "ctrl.component && ctrl.component.active", "ng-src" => "{{ctrl.component.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%; height: 100%;", "sandbox" => "allow-scripts"}
+
+  .component-view-container{"ng-if" => "ctrl.component.active"}
+    %component-view.component-view{"component" => "ctrl.component"}
+
   #tags-content.content{"ng-if" => "!(ctrl.component && ctrl.component.active)"}
     #tags-title-bar.section-title-bar
-      .title Tags
-      .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
+      .section-title-bar-header
+        .title Tags
+        .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
 
     .scrollable
       .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}"}
@@ -13,7 +17,7 @@
       .tag{"ng-repeat" => "tag in ctrl.tags track by tag.uuid", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}"}
         .info
           %input.title{"ng-attr-id" => "tag-{{tag.uuid}}", "ng-click" => "ctrl.selectTag(tag)", "ng-model" => "tag.title",
-          "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "mb-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
+          "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "sn-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
           "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-blur" => "ctrl.saveTag($event, tag)", "spellcheck" => "false"}
           .count {{ctrl.noteCount(tag)}}
 
@@ -27,3 +31,5 @@
       .tag.faded{"ng-if" => "ctrl.archiveTag", "ng-click" => "ctrl.selectTag(ctrl.archiveTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.archiveTag}"}
         .info
           %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.archiveTag.title"}
+
+  %panel-resizer{"panel-id" => "'tags-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}