added linting for lit and removed unused vars

.eslintignore

@@ -0,0 +1 @@
+/node_modules

.eslintrc.json

@@ -3,6 +3,7 @@
         "browser": true,
         "es2021": true
     },
+    "plugins": ["lit", "wc"],
     "extends": ["eslint:recommended", "plugin:lit/recommended", "plugin:wc/recommended"],
     "parserOptions": {
         "ecmaVersion": 12,

package.json

@@ -27,18 +27,30 @@
 		"build-electron": "electron-builder build  --publish never",
 		"deploy-electron": "electron-builder build --win --publish never",
 		"release": "NODE_ENV=production electron-builder build --publish never",
-		"publish": "electron-builder -p always"
+		"publish": "electron-builder -p always",
+		"lint": "eslint './**/*.{js,mjs}'"
 	},
 	"dependencies": {
+		"@hapi/hapi": "21.3.2",
+		"@hapi/inert": "7.1.0",
+		"@lit-labs/motion": "1.0.4",
+		"@tiptap/core": "2.0.4",
+		"@tiptap/extension-highlight": "2.0.4",
+		"@tiptap/extension-image": "2.0.4",
+		"@tiptap/extension-placeholder": "2.0.4",
+		"@tiptap/extension-underline": "2.0.4",
+		"@tiptap/html": "2.0.4",
+		"@tiptap/pm": "2.0.4",
+		"@tiptap/starter-kit": "2.0.4",
 		"asmcrypto.js": "2.3.2",
 		"bcryptjs": "2.4.3",
 		"buffer": "6.0.3",
 		"compressorjs": "1.2.1",
 		"crypto-js": "4.1.1",
-		"electron-log": "4.4.8",
-		"electron-updater": "6.1.4",
 		"electron-dl": "3.5.0",
+		"electron-log": "4.4.8",
 		"electron-store": "8.1.0",
+		"electron-updater": "6.1.4",
 		"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js",
 		"extract-zip": "2.0.1",
 		"jssha": "3.3.1",
@@ -57,40 +69,9 @@
 		"prosemirror-transform": "1.7.5",
 		"prosemirror-view": "1.31.7",
 		"sass": "1.66.1",
-		"short-unique-id": "5.0.2",
+		"short-unique-id": "5.0.2"
-		"@hapi/hapi": "21.3.2",
-		"@hapi/inert": "7.1.0",
-		"@lit-labs/motion": "1.0.4",
-		"@tiptap/pm": "2.0.4",
-		"@tiptap/core": "2.0.4",
-		"@tiptap/extension-highlight": "2.0.4",
-		"@tiptap/extension-image": "2.0.4",
-		"@tiptap/extension-placeholder": "2.0.4",
-		"@tiptap/extension-underline": "2.0.4",
-		"@tiptap/html": "2.0.4",
-		"@tiptap/starter-kit": "2.0.4"
 	},
 	"devDependencies": {
-		"axios": "1.5.0",
-		"electron": "26.2.0",
-		"electron-builder": "24.6.4",
-		"electron-packager": "17.1.2",
-		"epml": "0.3.3",
-		"file-saver": "2.0.5",
-		"highcharts": "11.1.0",
-		"html-escaper": "3.0.3",
-		"is-electron": "2.2.2",
-		"lit": "2.8.0",
-		"lit-translate": "2.0.1",
-		"pwa-helpers": "0.9.1",
-		"passive-events-support": "1.1.0",
-		"redux": "4.2.1",
-		"redux-thunk": "2.4.2",
-		"rollup": "3.29.0",
-		"rollup-plugin-node-globals": "1.4.0",
-		"rollup-plugin-progress": "1.1.2",
-		"rollup-plugin-scss": "3.0.0",
-		"shelljs": "0.8.5",
 		"@babel/core": "7.22.17",
 		"@material/mwc-button": "0.27.0",
 		"@material/mwc-checkbox": "0.27.0",
@@ -140,7 +121,30 @@
 		"@vaadin/icons": "24.1.7",
 		"@vaadin/password-field": "24.1.7",
 		"@vaadin/tooltip": "24.1.7",
-		"@zip.js/zip.js": "2.7.29"
+		"@zip.js/zip.js": "2.7.29",
+		"axios": "1.5.0",
+		"electron": "26.2.0",
+		"electron-builder": "24.6.4",
+		"electron-packager": "17.1.2",
+		"epml": "0.3.3",
+		"eslint": "^8.50.0",
+		"eslint-plugin-lit": "^1.9.1",
+		"eslint-plugin-wc": "^2.0.3",
+		"file-saver": "2.0.5",
+		"highcharts": "11.1.0",
+		"html-escaper": "3.0.3",
+		"is-electron": "2.2.2",
+		"lit": "2.8.0",
+		"lit-translate": "2.0.1",
+		"passive-events-support": "1.1.0",
+		"pwa-helpers": "0.9.1",
+		"redux": "4.2.1",
+		"redux-thunk": "2.4.2",
+		"rollup": "3.29.0",
+		"rollup-plugin-node-globals": "1.4.0",
+		"rollup-plugin-progress": "1.1.2",
+		"rollup-plugin-scss": "3.0.0",
+		"shelljs": "0.8.5"
 	},
 	"engines": {
 		"node": ">=18.16.1"

plugins/plugins/core/components/ChatImage.js

@@ -1,11 +1,7 @@
 import { LitElement, html, css } from 'lit';
-import { render } from 'lit/html.js';
 import {
-  use,
   get,
   translate,
-  translateUnsafeHTML,
-  registerTranslateConfig,
 } from 'lit-translate';
 import axios from 'axios'
 import { RequestQueueWithPromise } from '../../utils/queue';
@@ -228,9 +224,7 @@ getMyNode(){
        identifier: this.resource.identifier
       })
       this.fetchStatus()
-    } catch (error) {
+    } catch (error) { /* empty */ }
-      
-    }
   }
 
   firstUpdated(){

plugins/plugins/core/components/ChatRightPanelResources.js

@@ -1,8 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import { render } from 'lit/html.js';
 import { Epml } from '../../../epml';
-import { getUserNameFromAddress } from '../../utils/getUserNameFromAddress';
-import snackbar from './snackbar.js';
 import '@material/mwc-button';
 import '@material/mwc-dialog';
 import '@polymer/paper-spinner/paper-spinner-lite.js';
@@ -15,11 +12,8 @@ import './UserInfo/UserInfo';
 import './ChatImage';
 import './ReusableImage';
 import {
-	use,
 	get,
 	translate,
-	translateUnsafeHTML,
-	registerTranslateConfig,
 } from 'lit-translate';
 import { generateIdFromAddresses } from '../../utils/id-generation';
 

plugins/plugins/core/components/ChatScroller.js

@@ -1,22 +1,16 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, } from 'lit';
-import { render } from 'lit/html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import {
-	use,
 	get,
 	translate,
-	translateUnsafeHTML,
-	registerTranslateConfig,
 } from 'lit-translate';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { chatStyles } from './ChatScroller-css.js';
 import { Epml } from '../../../epml';
 import { cropAddress } from '../../utils/cropAddress';
 import { roundToNearestDecimal } from '../../utils/roundToNearestDecimal.js';
-import { EmojiPicker } from 'emoji-picker-js';
 import { generateHTML } from '@tiptap/core';
 import isElectron from 'is-electron';
-import localForage from 'localforage';
 
 import axios from 'axios';
 import Highlight from '@tiptap/extension-highlight';
@@ -40,9 +34,6 @@ import '@vaadin/tooltip';
 import { chatLimit, totalMsgCount } from './ChatPage.js';
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
-const chatLastSeen = localForage.createInstance({
-	name: 'chat-last-seen',
-});
 let toggledMessage = {};
 
 const uid = new ShortUniqueId();
@@ -61,7 +52,7 @@ const extractComponents = async (url) => {
 		return null;
 	}
 
-	url = url.replace(/^(qortal\:\/\/)/, '');
+	url = url.replace(/^(qortal:\/\/)/, '');
 	if (url.includes('/')) {
 		let parts = url.split('/');
 		const service = parts[0].toUpperCase();
@@ -313,7 +304,7 @@ class ChatScroller extends LitElement {
 		this.requestUpdate();
 	}
 
-	async newListMessages(newMessages, message) {
+	async newListMessages(newMessages) {
 		let data = [];
 		const copy = [...newMessages];
 		copy.forEach((newMessage) => {
@@ -370,7 +361,7 @@ class ChatScroller extends LitElement {
 			}
 		}
 
-		copy.forEach((newMessage, groupIndex) => {
+		copy.forEach((newMessage) => {
 			const lastGroupedMessage = data[data.length - 1];
 
 			if (
@@ -399,13 +390,8 @@ class ChatScroller extends LitElement {
 
 	async addNewMessages(newMessages, type) {
 		if (this.disableAddingNewMessages && type === 'newComingInAuto') return;
-		let previousScrollTop;
-		let previousScrollHeight;
 
 		const viewElement = this.shadowRoot.querySelector('#viewElement');
-		previousScrollTop = viewElement.scrollTop;
-		previousScrollHeight = viewElement.scrollHeight;
-
 		const copy = type === 'initial' ? [] : [...this.messagesToRender];
 
 		for (const newMessage of newMessages) {
@@ -531,8 +517,6 @@ class ChatScroller extends LitElement {
 			viewElement.scrollTop + viewElement.clientHeight ===
 			viewElement.scrollHeight;
 
-		const previousScrollTop = viewElement.scrollTop;
-		const previousScrollHeight = viewElement.scrollHeight;
 
 		// Using map to return a new array, rather than mutating the old one
 		const newMessagesToRender = this.messagesToRender.map((group) => {
@@ -750,7 +734,7 @@ class ChatScroller extends LitElement {
 						this.chatId.includes(item._chatId)
 					),
 					(message) => message.messageText,
-					(message, indexMessage) => html`
+					(message) => html`
 						<message-template
 							.emojiPicker=${this.emojiPicker}
 							.escapeHTML=${this.escapeHTML}
@@ -885,8 +869,7 @@ class ChatScroller extends LitElement {
 	}
 
 	clearConsole() {
-		if (!isElectron()) {
+		if (!isElectron()) { /* empty */ } else {
-		} else {
 			console.clear();
 			window.parent.electronAPI.clearCache();
 		}
@@ -939,8 +922,7 @@ class ChatScroller extends LitElement {
 			!entries[0].isIntersecting ||
 			!entries[0].target ||
 			!entries[0].target.previousElementSibling
-		) {
+		) { /* empty */ } else {
-		} else {
 			this.disableFetching = true;
 			this.isLoadingAfter = true;
 			let _scrollElement = entries[0].target.previousElementSibling;
@@ -1191,8 +1173,7 @@ class MessageTemplate extends LitElement {
 	}
 
 	clearConsole() {
-		if (!isElectron()) {
+		if (!isElectron()) { /* empty */ } else {
-		} else {
 			console.clear();
 			window.parent.electronAPI.clearCache();
 		}
@@ -1258,7 +1239,6 @@ class MessageTemplate extends LitElement {
 		}
 		let avatarImg = '';
 		let imageHTML = '';
-		let imageHTMLDialog = '';
 		let imageUrl = '';
 		let gifHTML = '';
 		let gifHTMLDialog = '';
@@ -1393,7 +1373,7 @@ class MessageTemplate extends LitElement {
 			try {
 				const parsedMsg = JSON.parse(repliedToData.decodedMessage);
 				repliedToData.decodedMessage = parsedMsg;
-			} catch (error) {}
+			} catch (error) { /* empty */ }
 		}
 
 		let repliedToMessageText = '';
@@ -1412,7 +1392,7 @@ class MessageTemplate extends LitElement {
 						// other extensions …
 					]
 				);
-			} catch (error) {}
+			} catch (error) { /* empty */ }
 		}
 
 		let replacedMessage = '';
@@ -1420,6 +1400,7 @@ class MessageTemplate extends LitElement {
 			const escapedMessage = this.escapeHTML(message);
 			if (escapedMessage) {
 				replacedMessage = escapedMessage.replace(
+					// eslint-disable-next-line no-control-regex
 					new RegExp('\r?\n', 'g'),
 					'<br />'
 				);
@@ -2016,7 +1997,7 @@ class MessageTemplate extends LitElement {
 														this.messageObj,
 													reaction: reaction.type,
 												})}
-											id=${`reactions-${indexMessageTemplate}`}
+											id=${`reactions-${index}`}
 											class="reactions-bg"
 										>
 											${reaction.type} ${reaction.qty}
@@ -2359,7 +2340,7 @@ class ChatMenu extends LitElement {
 				publicKey.key = '';
 				publicKey.hasPubKey = false;
 			}
-		} catch (error) {}
+		} catch (error) { /* empty */ }
 
 		try {
 			const message = {
@@ -2368,29 +2349,11 @@ class ChatMenu extends LitElement {
 			};
 			const stringifyMessageObject = JSON.stringify(message);
 			this.setForwardProperties(stringifyMessageObject);
-		} catch (error) {}
+		} catch (error) { /* empty */ }
 	}
 	render() {
 		return html`
 			<div class="container">
-				<!-- <div 
-                class=${`menu-icon reaction ${
-					!this.firstMessageInChat ? 'tooltip' : ''
-				}`} 
-                data-text="${translate('blockpage.bcchange13')}" 
-                @click=${(e) => {
-					if (this.version === '0') {
-						this.versionErrorSnack();
-						return;
-					}
-					try {
-						this.setToggledMessage(this.originalMessage);
-						this.emojiPicker.togglePicker(e.target);
-					} catch (error) {}
-				}}
-               >
-                    <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
-                </div> -->
 				<div
 					class=${`menu-icon ${
 						!this.firstMessageInChat ? 'tooltip' : ''

plugins/plugins/core/components/ReusableImage.js

@@ -1,23 +1,16 @@
 import { LitElement, html, css } from 'lit';
-import { render } from 'lit/html.js';
 import {
-	use,
-	get,
 	translate,
-	translateUnsafeHTML,
-	registerTranslateConfig,
 } from 'lit-translate';
 import axios from 'axios';
 import { RequestQueueWithPromise } from '../../utils/queue';
 import '@material/mwc-menu';
 import '@material/mwc-list/mwc-list-item.js';
-import { Epml } from '../../../epml';
 import '@material/mwc-dialog'
 
 const requestQueue = new RequestQueueWithPromise(5);
 const requestQueue2 = new RequestQueueWithPromise(5);
 
-const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 
 export class ResuableImage extends LitElement {
 	static get properties() {
@@ -254,7 +247,7 @@ export class ResuableImage extends LitElement {
 				identifier: this.resource.identifier,
 			});
 			this.fetchStatus();
-		} catch (error) {}
+		} catch (error) { /* empty */ }
 	}
 
 	firstUpdated() {

plugins/plugins/core/messaging/q-chat/q-chat-css.src.js

@@ -157,6 +157,9 @@ export const qchatStyles = css`
       padding-top: 20px;
       padding-left: 20px;
       padding-right: 20px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
   }
 
   .center {
@@ -172,13 +175,13 @@ export const qchatStyles = css`
       border-radius: 5px;
       border: none;
       display: inline-block;
-      padding: 14px;
       color: #fff;
-      background: var(--tradehead);
       width: 100%;
       font-size: 15px;
       text-align: center;
       cursor: pointer;
+      display: flex;
+    flex: 0;
   }
 
   .people-list .create-chat:hover {

plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -1,10 +1,9 @@
-import { LitElement, html, css } from 'lit'
+import { LitElement, html } from 'lit'
 import { render } from 'lit/html.js'
 import { passiveSupport } from 'passive-events-support/src/utils'
 import { Epml } from '../../../../epml.js'
-import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+import { get, translate } from 'lit-translate'
 import { qchatStyles } from './q-chat-css.src.js'
-import { repeat } from 'lit/directives/repeat.js'
 import { Editor, Extension } from '@tiptap/core'
 import isElectron from 'is-electron'
 import WebWorker from 'web-worker:./computePowWorker.src.js'
@@ -59,7 +58,9 @@ class Chat extends LitElement {
         }
     }
 
-    static styles = [qchatStyles]
+    static get styles() {
+		return [qchatStyles];
+	}
 
     constructor() {
         super()
@@ -167,8 +168,7 @@ class Chat extends LitElement {
                 if(currentState.app.accountInfo && currentState.app.accountInfo.addressInfo && currentState.app.accountInfo.addressInfo.address && this.loggedInUserAddress !== currentState.app.accountInfo.addressInfo.address){
                     this.loggedInUserAddress = currentState.app.accountInfo.addressInfo.address
                 }
-            } catch (error) {
+            } catch (error) { /* empty */ }
-            }
           })
       }
 
@@ -194,31 +194,21 @@ class Chat extends LitElement {
                 <div class="people-list" id="people-list">
                     <div class="search">
                         <div class="create-chat" @click=${() => { this.openPrivateMessage = true }}>
-                            ${translate("chatpage.cchange1")}
+                        <mwc-icon style="color: var(--black);">edit_square</mwc-icon>
+                          ${translate("chatpage.cchange1")}
+                        </div>
+                        <div class="create-chat" @click=${() => { this.openPrivateMessage = true }}>
+                        <mwc-icon style="color: var(--black);">group_add</mwc-icon>
+                        </div>
+                        <div class="create-chat" @click=${() => { this.openPrivateMessage = true }}>
+                        <mwc-icon style="color: var(--black);">person_off</mwc-icon>
                         </div>
                     </div>
                     <ul class="list">
                         ${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
                     </ul>
                     <div class="blockedusers">
-                        <!-- <div class="groups-button-container">
+                   
-                                <button 
-                                    @click=${() => { this.redirectToGroups() }}
-                                    class="groups-button">
-                                    <mwc-icon>groups</mwc-icon>
-                                    ${translate("sidemenu.groupmanagement")}
-                                </button>
-                            ${this.groupInvites.length > 0 ? (
-                                html`                                
-                                <div class="groups-button-notif">
-                                   ${this.groupInvites.length} 
-                                </div>
-                                <div class="groups-button-notif-number">
-                                    ${this.groupInvites.length} ${translate("chatpage.cchange60")}
-                                </div>
-                                `
-                            ) : null} 
-                        </div> -->
                         <mwc-button 
                             raised 
                             label="${translate("chatpage.cchange3")}" 
@@ -442,8 +432,7 @@ class Chat extends LitElement {
             document.querySelector('html').setAttribute('theme', this.theme)
         })
 
-        if (!isElectron()) {
+        if (!isElectron()) { /* empty */ } else {
-        } else {
             window.addEventListener('contextmenu', (event) => {
                 // Check if the clicked element has the class
                 let target = event.target;
@@ -497,8 +486,7 @@ class Chat extends LitElement {
    
 
     clearConsole() {
-        if (!isElectron()) {
+        if (!isElectron()) { /* empty */ } else {
-        } else {
             console.clear()
             window.parent.electronAPI.clearCache()
         }
@@ -588,7 +576,7 @@ class Chat extends LitElement {
             recipient = _recipient
         } else {
             recipient = myNameRes.owner
-        };
+        }
       
         const getAddressPublicKey = async () => {
             let isEncrypted;
@@ -643,7 +631,7 @@ class Chat extends LitElement {
             const worker = new WebWorker()
             let nonce = null
             let chatBytesArray = null;
-              await new Promise((res, rej) => {
+              await new Promise((res) => {
                 worker.postMessage({chatBytes, path, difficulty})
                 worker.onmessage = e => {
                     worker.terminate()