From 8cb7f4cc726dd203c973bd84ac5ecf58b6bafb0a Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Thu, 12 Oct 2023 22:35:09 -0500
Subject: [PATCH] fix bugs

---
 core/language/us.json                         |  5 +-
 core/src/components/app-view.js               |  4 +-
 .../friends-view/ChatSideNavHeads.js          |  4 +-
 .../friends-view/add-friends-modal.js         | 15 +++-
 .../friends-view/core-sync-status.js          | 79 +++++++++++++++++++
 .../friends-view/friend-item-actions.js       |  3 +
 .../friends-view/friends-side-panel-parent.js |  2 +-
 .../friends-view/friends-side-panel.js        | 10 ++-
 .../components/friends-view/friends-view.js   |  8 +-
 .../notification-bell-general.js              |  5 +-
 10 files changed, 119 insertions(+), 16 deletions(-)
 create mode 100644 core/src/components/friends-view/core-sync-status.js

diff --git a/core/language/us.json b/core/language/us.json
index b61e21aa..c9ceae75 100644
--- a/core/language/us.json
+++ b/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",
diff --git a/core/src/components/app-view.js b/core/src/components/app-view.js
index 7be45ec4..55bcec24 100644
--- a/core/src/components/app-view.js
+++ b/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>
diff --git a/core/src/components/friends-view/ChatSideNavHeads.js b/core/src/components/friends-view/ChatSideNavHeads.js
index 534756ac..2bae1d7a 100644
--- a/core/src/components/friends-view/ChatSideNavHeads.js
+++ b/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>
     `
     }
diff --git a/core/src/components/friends-view/add-friends-modal.js b/core/src/components/friends-view/add-friends-modal.js
index 0f420d85..087d1786 100644
--- a/core/src/components/friends-view/add-friends-modal.js
+++ b/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')}"
diff --git a/core/src/components/friends-view/core-sync-status.js b/core/src/components/friends-view/core-sync-status.js
new file mode 100644
index 00000000..fb36af88
--- /dev/null
+++ b/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);
diff --git a/core/src/components/friends-view/friend-item-actions.js b/core/src/components/friends-view/friend-item-actions.js
index e7013e72..a5c59083 100644
--- a/core/src/components/friends-view/friend-item-actions.js
+++ b/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)"
diff --git a/core/src/components/friends-view/friends-side-panel-parent.js b/core/src/components/friends-view/friends-side-panel-parent.js
index eff202dc..f77bac91 100644
--- a/core/src/components/friends-view/friends-side-panel-parent.js
+++ b/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>
diff --git a/core/src/components/friends-view/friends-side-panel.js b/core/src/components/friends-view/friends-side-panel.js
index 812e8dda..ce47d9db 100644
--- a/core/src/components/friends-view/friends-side-panel.js
+++ b/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>
diff --git a/core/src/components/friends-view/friends-view.js b/core/src/components/friends-view/friends-view.js
index db7437a5..603e82f3 100644
--- a/core/src/components/friends-view/friends-view.js
+++ b/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>
diff --git a/core/src/components/notification-view/notification-bell-general.js b/core/src/components/notification-view/notification-bell-general.js
index 1a0a72fb..98288daa 100644
--- a/core/src/components/notification-view/notification-bell-general.js
+++ b/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 {