sync status widget WIP

src/public/app/layouts/desktop_main_window_layout.js

@@ -33,6 +33,7 @@ import ImagePropertiesWidget from "../widgets/type_property_widgets/image_proper
 import NotePropertiesWidget from "../widgets/type_property_widgets/note_properties.js";
 import NoteIconWidget from "../widgets/note_icon.js";
 import SearchResultWidget from "../widgets/search_result.js";
+import SyncStatusWidget from "../widgets/sync_status.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -141,6 +142,7 @@ export default class DesktopMainWindowLayout {
             .child(new FlexContainer('row').overflowing()
                 .css('height', '36px')
                 .child(new GlobalMenuWidget())
+                .child(new SyncStatusWidget())
                 .child(new TabRowWidget())
                 .child(new TitleBarButtonsWidget()))
             .child(new StandardTopWidget()

src/public/app/widgets/note_actions.js

@@ -63,7 +63,7 @@ const TPL = `
         <span class="caret"></span>
     </button>
     <div class="dropdown-menu dropdown-menu-right">
-        <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button">Re-render note</a>
+        <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
         <div class="dropdown-item protect-button">
             Protect the note
         

src/public/app/widgets/sync_status.js

@@ -0,0 +1,58 @@
+import BasicWidget from "./basic_widget.js";
+import utils from "../services/utils.js";
+import syncService from "../services/sync.js";
+
+const TPL = `
+<div class="sync-status-wrapper">
+    <style>
+    .sync-status-wrapper {
+        height: 35px;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--main-border-color);
+    }
+    
+    .sync-status {
+        height: 34px;
+        box-sizing: border-box;
+    }
+    
+    .sync-status button {
+        margin-right: 5px;
+        margin-left: 5px;
+        height: 34px;
+        border: none;
+        font-size: 180%;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    
+    .sync-status button span {
+        position: relative;
+        top: -5px;
+    }
+    
+    .sync-status button:hover {
+        background-color: var(--hover-item-background-color);
+    }
+    
+    .sync-status .dropdown-menu {
+        width: 20em;
+    }
+    </style>
+
+    <div class="sync-status">
+        <button type="button" class="btn btn-sm" title="Sync status">
+            <span class="bx bx-badge-check"></span>
+<!--            <span class="bx bx-cloud-upload"></span>-->
+<!--            <span class="bx bx-sync bx-spin bx-flip-horizontal"></span>-->
+        </button>
+    </div>
+</div>
+`;
+
+export default class SyncStatusWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+    }
+}