fix bugs

core/language/us.json

@@ -1175,7 +1175,10 @@
 	"notifications": {
 		"notify1": "Confirming transaction",
 		"notify2": "Transaction confirmed",
-		"explanation": "Your transaction is getting confirmed. To track its progress, click on the bell icon."
+		"explanation": "Your transaction is getting confirmed. To track its progress, click on the bell icon.",
+		"status1": "Fully synced",
+		"status2": "Not synced",
+		"notify3": "No notifications"
 	},
 	"friends": {
 		"friend1": "Add name",

core/src/components/app-view.js

@@ -45,7 +45,7 @@ import './notification-view/notification-bell.js'
 import './notification-view/notification-bell-general.js'
 import './friends-view/friends-side-panel-parent.js'
 import './friends-view/save-settings-qdn.js'
-
+import './friends-view/core-sync-status.js'
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 class AppView extends connect(store)(LitElement) {
@@ -564,7 +564,7 @@ class AppView extends connect(store)(LitElement) {
                             <friends-side-panel-parent></friends-side-panel-parent>
                             <notification-bell></notification-bell>
                             <notification-bell-general></notification-bell-general>
-                            
+                            <core-sync-status></core-sync-status>
                             </div>
                             <div style="display: inline;">
                                 <span>

core/src/components/friends-view/ChatSideNavHeads.js

@@ -16,7 +16,8 @@ class ChatSideNavHeads extends LitElement {
             activeChatHeadUrl: { type: String },
             isImageLoaded: { type: Boolean },
             setActiveChatHeadUrl: {attribute: false},
-            openEditFriend: {attribute: false}
+            openEditFriend: {attribute: false},
+            closeSidePanel: {attribute: false, type: Object}
         }
     }
 
@@ -192,6 +193,7 @@ class ChatSideNavHeads extends LitElement {
                         this.openEditFriend(this.chatInfo)
                     }}
                     name=${this.chatInfo.name}
+                    .closeSidePanel=${this.closeSidePanel}
 				></friend-item-actions>
     `
     }

core/src/components/friends-view/add-friends-modal.js

@@ -268,6 +268,8 @@ class AddFriendsModal extends connect(store)(LitElement) {
 			this.notes = this.editContent.notes ?? '';
 			this.willFollow = this.editContent.willFollow ?? true;
 			this.alias = this.editContent.alias ?? '';
+			this.requestUpdate()
+			console.log('this.editContent', this.editContent )
 		}
 		if (
 			changedProperties &&
@@ -300,6 +302,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
 	}
 
 	render() {
+		console.log('update2')
 		return html`
 			<div class="modal-overlay ${this.isOpen ? '' : 'hidden'}">
 				
@@ -362,16 +365,20 @@ class AddFriendsModal extends connect(store)(LitElement) {
 							id="alias"
 							placeholder=${translate('friends.friend7')}
 							class="input"
-							value=${this.alias}
-							@change=${(e) => (this.alias = e.target.value)}
+							.value=${this.alias}
+							@change=${(e) => {
+								this.alias = e.target.value
+							}}
 						/>
 					</div>
 					<div style="height:15px"></div>
 					<div style="margin-bottom:0;">
 						<textarea
 							class="input"
-							@change=${(e) => (this.notes = e.target.value)}
-							value=${this.notes}
+							@change=${(e) => {
+								this.notes = e.target.value
+							}}
+							.value=${this.notes}
 							?disabled=${this.isLoading}
 							id="messageBoxAddFriend"
 							placeholder="${translate('friends.friend4')}"

core/src/components/friends-view/core-sync-status.js

@@ -0,0 +1,79 @@
+import { LitElement, html, css } from 'lit';
+import '@material/mwc-icon';
+import { store } from '../../store';
+import { connect } from 'pwa-helpers';
+import '@vaadin/tooltip';
+import { get } from 'lit-translate';
+class CoreSyncStatus extends connect(store)(LitElement) {
+	static get properties() {
+		return {
+			nodeStatus: {type: Object}
+		};
+	}
+	
+
+	constructor() {
+		super();
+		this.nodeStatus = {
+			isMintingPossible:false,
+isSynchronizing:true,
+syncPercent:undefined,
+numberOfConnections:undefined,
+height:undefined,
+		}
+	}
+	static styles = css`
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 16px;
+			border-bottom: 1px solid #e0e0e0;
+		}
+
+		.content {
+			padding: 16px;
+		}
+		.close {
+			visibility: hidden;
+			position: fixed;
+			z-index: -100;
+			right: -1000px;
+		}
+
+		.parent-side-panel {
+			transform: translateX(100%); /* start from outside the right edge */
+    		transition: transform 0.3s ease-in-out;
+		}
+		.parent-side-panel.open {
+			transform: translateX(0); /* slide in to its original position */
+
+		}
+	`;
+
+stateChanged(state) {
+	console.log({state})
+	this.nodeStatus = state.app.nodeStatus
+}
+
+	render() {
+		return html`
+			<mwc-icon id="icon"  style="color: ${this.nodeStatus.syncPercent === 100 ? 'green': 'red'};user-select:none;margin-right:20px"
+				>wifi</mwc-icon
+			>
+			<vaadin-tooltip
+			  for="icon"
+			  position="bottom"
+			  hover-delay=${400}
+			  hide-delay=${1}
+			  text=${this.nodeStatus.syncPercent === 100 ? get('notifications.status1'): get('notifications.status2')}>
+		  </vaadin-tooltip>
+			
+			
+		`;
+	}
+
+
+}
+
+customElements.define('core-sync-status', CoreSyncStatus);

core/src/components/friends-view/friend-item-actions.js

@@ -64,6 +64,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 			message: { type: String },
 			openEditFriend: { attribute: false },
 			name: { type: String },
+			closeSidePanel: {attribute: false, type: Object}
 		};
 	}
 
@@ -190,6 +191,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 								})
 							);
 							this.closePopover();
+							this.closeSidePanel()
 						}}"
 					>
 					<mwc-icon style="color: var(--black)"
@@ -219,6 +221,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 								})
 							);
 							this.closePopover();
+							this.closeSidePanel()
 						}}"
 					>
 					<mwc-icon style="color: var(--black)"

core/src/components/friends-view/friends-side-panel-parent.js

@@ -66,7 +66,7 @@ class FriendsSidePanelParent extends LitElement {
 			<vaadin-tooltip
 			  for="friends-icon"
 			  position="bottom"
-			  hover-delay=${200}
+			  hover-delay=${400}
 			  hide-delay=${1}
 			  text=${get('friends.friends17')}>
 		  </vaadin-tooltip>

core/src/components/friends-view/friends-side-panel.js

@@ -9,13 +9,15 @@ class FriendsSidePanel extends LitElement {
 			setIsOpen: { attribute: false},
 			isOpen: {type: Boolean},
 			selected: {type: String},
-			setHasNewFeed: {attribute: false}
+			setHasNewFeed: {attribute: false},
+			closeSidePanel: {attribute: false, type: Object}
 		};
 	}
 
 	constructor(){
 		super()
 		this.selected = 'friends'
+		this.closeSidePanel = this.closeSidePanel.bind(this)
 	}
 	
 	static styles = css`
@@ -106,6 +108,10 @@ class FriendsSidePanel extends LitElement {
 		
 	}
 
+	closeSidePanel(){
+		this.setIsOpen(false)
+	}
+
 	render() {
 		return html`
 			<div class="parent">
@@ -126,7 +132,7 @@ class FriendsSidePanel extends LitElement {
 			</div>
 			<div class="content">
 				<div class="${this.selected === 'friends' ? 'active-content' : 'default-content'}">
-				<friends-view .refreshFeed=${()=>this.refreshFeed()}></friends-view>
+				<friends-view .closeSidePanel=${this.closeSidePanel} .refreshFeed=${()=>this.refreshFeed()}></friends-view>
 				</div>
 				<div class="${this.selected === 'feed' ? 'active-content' : 'default-content'}">
 				<friends-feed .setHasNewFeed=${(val)=> this.setHasNewFeed(val)}></friends-feed>

core/src/components/friends-view/friends-view.js

@@ -42,7 +42,8 @@ class FriendsView extends connect(store)(LitElement) {
 			isOpenAddFriendsModal: {type: Boolean},
 			editContent: {type: Object},
 			mySelectedFeeds: {type: Array},
-			refreshFeed: {attribute: false}
+			refreshFeed: {attribute: false},
+			closeSidePanel: {attribute: false, type: Object}
 		};
 	}
 	static get styles() {
@@ -145,8 +146,7 @@ class FriendsView extends connect(store)(LitElement) {
 					this.userFound = []
 				} else {
 					this.userFound = [
-						...this.userFound, 
-						result,
+						result
 					  ];
 				}
 				this.userFoundModalOpen = true;
@@ -253,6 +253,7 @@ class FriendsView extends connect(store)(LitElement) {
 	}
 
 	render() {
+		console.log('this.friendList', this.friendList)
 		return html`
 			<div class="container">
 				<div id="viewElement" class="container-body" style=${"position: relative"}>
@@ -308,6 +309,7 @@ class FriendsView extends connect(store)(LitElement) {
 							}}
 							.chatInfo=${item}
 							.openEditFriend=${(val)=> this.openEditFriend(val)}
+							.closeSidePanel=${this.closeSidePanel}
 						></chat-side-nav-heads>`;
 					})}
 					<div id="downObserver"></div>

core/src/components/notification-view/notification-bell-general.js

@@ -147,6 +147,9 @@ class NotificationBellGeneral extends connect(store)(LitElement) {
 					@blur=${this.handleBlur}
 				>
 					<div class="notifications-list">
+						${this.notifications.length === 0 ? html`
+						<p style="font-size: 16px; width: 100%; text-align:center;margin-top:20px;">${translate('notifications.notify3')}</p>
+						` : ''}
 						${repeat(
 							this.notifications,
 							(notification) => notification.reference.signature, // key function
@@ -169,7 +172,6 @@ class NotificationBellGeneral extends connect(store)(LitElement) {
 	}
 
 	_toggleNotifications() {
-		if (this.notifications.length === 0) return;
 		this.showNotifications = !this.showNotifications;
 		if (this.showNotifications) {
 			requestAnimationFrame(() => {
@@ -184,7 +186,6 @@ class NotificationBellGeneral extends connect(store)(LitElement) {
 			flex-direction: column;
 			align-items: center;
 			position: relative;
-			margin-right: 20px;
 		}
 
 		.count {