Add colors for trust levels

Green for highest trust
Orange for middle trust
Red for lowest trust

Author: adgohar

android/tinySSB/app/src/main/assets/web/prod/contacts.js

@@ -153,21 +153,20 @@ function show_contact_details(id) {
     }
     var c = tremola.contacts[id];
     console.log(id);
-    backend("contacts:getTrust " +  decodeScuttlebuttId(id));
+    backend("contacts:getTrust " + decodeScuttlebuttId(id));
 
     new_contact_id = id;
     document.getElementById('old_contact_alias').value = c.alias ? c['alias'] : "";
     var details = '';
-    var details = '';
     details += '<br><div>IAM-Alias: &nbsp;' + (c.iam != "" ? c.iam : "&mdash;") + '</div>\n';
     details += '<br><div>Shortname: &nbsp;' + id2b32(id) + '</div>\n';
     details += '<br><div style="word-break: break-all;">SSB identity: &nbsp;<tt>' + id + '</tt></div>\n';
     details += '<br><div class=settings style="padding: 0px;"><div class=settingsText>Forget this contact</div><div style="float: right;"><label class="switch"><input id="hide_contact" type="checkbox" onchange="toggle_forget_contact(this);"><span class="slider round"></span></label></div></div>'
 
-    // Add slider, values below it, and the set button next to the slider
+    // Add slider with colored gradient
     details += '<br><div>Trust Level:</div>\n';
     details += '<div style="display: flex; align-items: center;">';
-    details += '<input type="range" id="slider" min="0" max="2" step="1" value="' + c['trusted'] + '" style="flex: 1; margin-right: 10px;">\n';
+    details += '<input type="range" id="slider" min="0" max="2" step="1" value="' + c['trusted'] + '" style="flex: 1; margin-right: 10px; appearance: none; -webkit-appearance: none; background: linear-gradient(to right, red 0%, orange 50%, green 100%); height: 8px; border-radius: 5px;">';
     details += '<button id="setButton" style="flex: 0;">Set</button>\n';
     details += '</div>';
 
@@ -200,7 +199,6 @@ function show_contact_details(id) {
             errorMessage.textContent = ''; // Clear any previous errors
             handleSetValue(sliderValue); // Call the function with slider value
             closeOverlay();
-
         }
     }
 
@@ -217,6 +215,7 @@ function show_contact_details(id) {
     overlayIsActive = true;
 }
 
+
 function changeTrustLevel(contactID, value) {
     console.log("Supposed to set contact " + contactID + "'s Trust Level to " + value);
     let ch = tremola.chats[recps2nm([myId])];

android/tinySSB/app/src/main/assets/web/tremola.css

@@ -589,5 +589,26 @@ input:checked + .slider:before {
     filter: invert(62%) sepia(8%) saturate(116%) hue-rotate(145deg) brightness(89%) contrast(89%);
 }
 
+.circle {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.green {
+  background-color: green;
+}
+
+.orange {
+  background-color: orange;
+}
+
+.red {
+  background-color: red;
+}
+
+
 
 /* eof */

android/tinySSB/app/src/main/assets/web/tremola.html

@@ -86,16 +86,16 @@
     <div id='lst:games'    class='w100 coreScroll' style='display: none;'></div>
     <div id='lst:contacts' class='w100 coreScroll' style="display: none;">
       <div id='lst:contacts-trustLevelTwo-overview'>
-        <h3>Verified Contacts</h3>
+        <h3><span class="circle green"></span> Verified Contacts</h3>
         <div id='lst:contacts-trustLevelTwo' class='w100 contactScroll'></div>
       </div>
       <div id='lst:contacts-trustLevelOne-overview'>
-        <h3>Trusted Contacts</h3>
+        <h3><span class="circle orange"></span> Trusted Contacts</h3>
         <div id='lst:contacts-trustLevelOne' class='w100 contactScroll'></div>
       </div>
 
       <div id='lst:contacts-trustLevelZero-overview'>
-        <h3>Other Contacts</h3>
+        <h3><span class="circle red"></span> Other Contacts</h3>
         <div id='lst:contacts-trustLevelZero' class='w100 contactScroll'></div>
       </div>
     </div>

android/tinySSB/app/src/main/assets/web/tremola_ui.js

@@ -443,7 +443,10 @@ function qr_scan_success(s) {
                 if (tremola.contacts[new_contact_id].trusted < 2) {
                     //do this in the backend as well
                     let ch = tremola.chats[recps2nm([myId])];
-                    let tips = JSON.stringify(ch.timeline.get_tips())
+                    let tips = JSON.stringify([])
+                    if (typeof ch.timeline.get_tips === 'function') {
+                        tips = JSON.stringify(ch.timeline.get_tips())
+                    }
                     backend("contacts:setTrust " + decodeScuttlebuttId(new_contact_id) + " 2" + " " + tips);
                 } else {
                     launch_snackbar("This contact already exists");