Merge branch 'staging' of https://github.com/saitotech/saito-lite-rust …

…into staging

.github/workflows/linting.yml

@@ -0,0 +1,29 @@
+name: Lint
+
+on:
+  push:
+    branches: [ "staging","master" ]
+  pull_request:
+    branches: [ staging ,"master"]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '20'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run ESLint
+      run: npx eslint . --config .eslintrc.js

lib/saito/browser.ts

@@ -255,7 +255,8 @@ class Browser {
       (e) => {
         if (
           e.target?.classList?.contains("saito-identicon") ||
-          e.target?.classList?.contains("saito-address")
+          e.target?.classList?.contains("saito-address") ||
+          e.target?.classList?.contains("saito-add-user-menu")
         ) {
           let disable_click = e.target.getAttribute("data-disable");
           let publicKey = e.target.getAttribute("data-id");

lib/saito/wallet.ts

@@ -22,7 +22,7 @@ export default class Wallet extends SaitoWallet {
 
   default_fee = 0;
 
-  version = 5.582;
+  version = 5.583;
 
   cryptos = new Map<string, any>();
   public saitoCrypto: any;

mods/chat/chat.js

@@ -102,7 +102,7 @@ class Chat extends ModTemplate {
     if (app.BROWSER == 0) {
       this.communityGroup = this.returnOrCreateChatGroupFromMembers(
         [this.publicKey],
-        "Saito Community Chat"
+        this.communityGroupName
       );
       this.communityGroup.members = [this.publicKey];
 
@@ -349,7 +349,7 @@ class Chat extends ModTemplate {
     let services = [];
     // servers with chat service run plaintext community chat groups
     if (this.app.BROWSER == 0) {
-      services.push(new PeerService(null, "chat", "Saito Community Chat"));
+      services.push(new PeerService(null, "chat", this.communityGroupName));
     }
     return services;
   }
@@ -446,24 +446,19 @@ class Chat extends ModTemplate {
         }
         return null;
       case "user-menu":
-        if (obj?.publicKey) {
-          if (
-            chat_self.app.keychain.hasSharedSecret(obj.publicKey) &&
-            obj.publicKey !== this.publicKey
-          ) {
-            return {
-              text: "Chat",
-              icon: "far fa-comment-dots",
-              callback: function (app, publicKey) {
-                if (chat_self.chat_manager == null) {
-                  chat_self.chat_manager = new ChatManager(chat_self.app, chat_self);
-                }
+        if (obj?.publicKey!== this.publicKey) {
+          return {
+            text: "Chat",
+            icon: "far fa-comment-dots",
+            callback: function (app, publicKey) {
+              if (chat_self.chat_manager == null) {
+                chat_self.chat_manager = new ChatManager(chat_self.app, chat_self);
+              }
 
-                chat_self.chat_manager.render_popups_to_screen = 1;
-                chat_self.app.connection.emit("open-chat-with", { key: publicKey });
-              },
-            };
-          }
+              chat_self.chat_manager.render_popups_to_screen = 1;
+              chat_self.app.connection.emit("open-chat-with", { key: publicKey });
+            },
+          };
         }
 
         return null;

mods/chat/lib/chat-manager/popup.js

@@ -23,6 +23,8 @@ class ChatPopup {
 
     this.events_attached = false;
 
+    this.callbacks = {};
+
     app.connection.on("chat-remove-fetch-button-request", (group_id) => {
       if (this.group?.id === group_id) {
         this.no_older_messages = true;
@@ -51,6 +53,7 @@ class ChatPopup {
   }
 
   render() {
+    let this_self = this;
     //
     // exit if group unset
     //
@@ -171,6 +174,29 @@ class ChatPopup {
       }
     }
 
+    // add call icon, ignore if community chat
+    let mods = this.app.modules.mods;
+    if (this.group.name != this.mod.communityGroupName) {
+      let index = 0;
+      for (const mod of mods) {
+
+        let item = mod.respondTo("chat-actions", { publicKey: this.group.name });
+        if (item instanceof Array) {
+          item.forEach((j) => {
+            let id = `chat_action_item_${index}`;
+            this_self.callbacks[id] = j.callback;
+            this_self.addChatActionItem(j, id);
+            index++;
+          });
+        } else if (item != null) {
+          let id = `chat_action_item_${index}`;
+          this_self.callbacks[id] = item.callback;
+          this_self.addChatActionItem(item, id);
+        }
+        index++;
+      }
+    }
+
     //
     // re-render typed text
     //
@@ -210,7 +236,18 @@ class ChatPopup {
       return;
     }
 
-
+    if (this.group.name != this.mod.communityGroupName) {
+      document.querySelectorAll(".chat-action-item").forEach((menu) => {
+        let id = menu.getAttribute("id");
+        let callback = this_self.callbacks[id];
+        menu.addEventListener("click", (e) => {
+          let pk = e.currentTarget.getAttribute("data-id");
+          console.log("clicked on chat-action-item ///");
+          console.log(pk);
+          callback(app, pk);
+        });
+      });
+    }
 
     // add reply functionality
     document.querySelectorAll(`${popup_qs} .saito-userline-reply .chat-reply`).forEach((el) => {
@@ -371,6 +408,7 @@ class ChatPopup {
         if (chatPopup.classList.contains("minimized")) {
           this.restorePopup(chatPopup);
         } else {
+
           if (chatPopup.classList.contains("maximized")) {
             chatPopup.classList.remove("maximized");
           } else {
@@ -495,8 +533,13 @@ class ChatPopup {
 
     app.browser.addDragAndDropFileUploadToElement(popup_id, this.input.callbackOnUpload, false); // false = no drag-and-drop image click
 
+  }
 
-
+  addChatActionItem(item, id) {
+    let popup_qs = "#chat-popup-" + this.group.id;    
+    document.querySelector(`${popup_qs} .chat-actions`).innerHTML = `
+      <i id="${id}" class="chat-action-item ${item.icon}" data-id="${this.group.name}" title="${item.text}"></i>
+      `;
   }
 
   restorePopup(chatPopup) {

mods/chat/lib/chat-manager/popup.template.js

@@ -28,13 +28,33 @@ module.exports = (app, mod, group, isStatic = false) => {
        <div class="${class_name} chat-popup ${(group.members.length == 2 ? "saito-dm-chat" : "")}" id="chat-popup-${group.id}">
 
           <div class="chat-header" id="chat-header-${group.id}">
-            ${is_encrypted}
-            <div id="chat-group-${group.id}" class="chat-group active-chat-tab saito-address" data-id="${group.name}" data-disable="true">${
-      group.name
-    }</div>
+            <div class="chat-header-nav">
+            
+            <div class="chat-details hide">
+              ${is_encrypted}
+              <div id="chat-group-${group.id}" class="chat-group active-chat-tab saito-address" data-id="${group.name}" 
+              data-disable="true">${group.name}</div>
+            </div>
+
             <i class="fa-solid fa-window-minimize chat-sizing-icon chat-minimizer-icon"></i>
             <i class="fa-regular fa-square chat-sizing-icon chat-maximizer-icon"></i>
             <i id="chat-container-close" class="chat-container-close fas fa-times"></i>
+            </div>
+            <div class="chat-header-info">
+              <div class="chat-details">
+              ${is_encrypted}
+              <div id="chat-group-${group.id}" class="chat-group active-chat-tab saito-address" data-id="${group.name}" 
+              data-disable="true">${group.name}</div>
+              </div>
+
+              ${(group.name != mod.communityGroupName && group.members.length == 2) ? `
+              <div class="chat-action-icons">
+                <div class="chat-actions">
+                </div>
+                <i class="fa-solid fa-ellipsis-vertical saito-add-user-menu" data-id="${group.name}"></i>
+              </div>
+              ` : ``}
+            </div>
           </div>
 
           <div class="chat-body">

mods/settings/lib/appspace/main.js

@@ -99,15 +99,15 @@ class SettingsAppspace {
           let currentTarget = e.currentTarget;
 
           if (currentTarget.checked == true) {
-            let sc = await sconfirm("Reactivate this module?");
+            let sc = await sconfirm("Reactivate this module? (Will take effect on refresh)");
             if (sc) {
               app.options.modules[thisid].active = 1;
               app.storage.saveOptions();
             }else{
               currentTarget.checked = false;
             } 
           } else {
-            let sc = await sconfirm("Remove this module?");
+            let sc = await sconfirm("Remove this module? (Will take effect on refresh)");
             if (sc) {
               app.options.modules[thisid].active = 0;
               app.storage.saveOptions();

mods/settings/lib/appspace/main.template.js

@@ -24,23 +24,24 @@ module.exports = SettingsAppspaceTemplate = (app, mod, main) => {
 
     for (let i = 0; i < app.options.modules.length; i++){
       let mod = app.modules.returnModule(app.options.modules[i].name);
+      let shortName = app.options.modules[i].name;
+      let fullName = mod ? mod.returnName() : shortName;
+
+
       let CHECKED = app.options.modules[i].active ? 'CHECKED' : '';
       modules_html += `
       <div class="settings-appspace-app">
           <div class="saito-switch">
             <input type="checkbox"  id="${i}" class="modules_mods_checkbox" name="modules_mods_${i}" ${CHECKED}>
           </div>
-          <div id="${mod.name}" class="settings-appspace-module settings-appspace-link">${mod.returnName()}</div>
+          <div id="${shortName}" class="settings-appspace-module settings-appspace-link">${fullName}</div>
          </div>
       `;  
+
     }
 
   } catch (err) {
-    if (err.message.startsWith("Cannot read property 'map'")) {
-      modules_html = "Initialization error. Refresh page should fix this.";
-    } else {
-      modules_html = `Unknown error<br/>${err}`;
-    }
+    console.error(err);
   }
 
   let html = `

mods/settings/web/css/settings-base.css

@@ -16,9 +16,10 @@
 
 .settings-appspace-link {
   cursor: pointer;
+  width: 15rem;
 }
 
-.settings-appspace-link:hover{
+.settings-appspace-link:hover {
   text-decoration: underline;
 }
 
@@ -37,7 +38,6 @@
   justify-content: center;
 }
 
-
 .settings-appspace-user-details {
   display: grid;
   grid-template-columns: 8rem min-content;
@@ -49,36 +49,41 @@
   overflow: auto;
 }
 
-.settings-appspace-user-details > div {
+.settings-appspace-user-details>div {
   width: 100%;
   min-width: 0;
 }
 
-.settings-appspace-user-details > div.register-identifier-btn {
+.settings-appspace-user-details>div.register-identifier-btn {
   width: fit-content;
 }
 
-.settings-appspace-user-details .pubkey-containter{
+.settings-appspace-user-details .pubkey-containter {
   justify-content: initial;
   gap: 1rem;
 }
 
-.settings-appspace-user-details .profile-public-key{
+.settings-appspace-user-details .profile-public-key {
   width: 38rem;
 }
 
-
 .settings-appspace-modules {
   display: grid;
   grid-gap: 1.5rem;
   grid-template-columns: repeat(5, 1fr);
   margin: 1rem;
 }
 
-
 .settings-appspace-app {
   display: flex;
   align-items: center;
+  padding: 0.6rem 0.5rem 0.2rem 0.5rem;
+  border: 1px solid var(--saito-border-color);
+  border-radius: 0.5rem;
+}
+
+.settings-appspace-app:hover {
+  border-color: var(--saito-primary);
 }
 
 .settings-appspace-app div {
@@ -102,40 +107,30 @@ label.treated {
   list-style: none;
 }
 
-
 @media only screen and (max-width: 900px) {
   .settings-appspace {
     padding: 1.5rem;
   }
   .settings-appspace-modules {
     grid-template-columns: repeat(4, 1fr);
   }
-
 }
 
-
 @media only screen and (max-width: 600px) {
   .settings-appspace {
     padding: 1rem;
   }
-
   .settings-appspace-modules {
     grid-template-columns: repeat(3, 1fr);
   }
-
   .settings-appspace-user-details {
-   grid-template-columns: 8rem 1fr;
+    grid-template-columns: 8rem 1fr;
   }
-
-.settings-actions-container {
-  gap: 0.6rem;
-  margin-right: 0.5rem;
-}
-.settings-actions-container .saito-button-secondary {
-  padding: 0.4rem 0.3rem;
-}
-
-}
-
-
-
+  .settings-actions-container {
+    gap: 0.6rem;
+    margin-right: 0.5rem;
+  }
+  .settings-actions-container .saito-button-secondary {
+    padding: 0.4rem 0.3rem;
+  }
+}