avatar (#14440)

* avatar

* refactor avatar display: unify rendering and resolve at use time

  - Extract buildAvatarWidget() in common.dart to share avatar rendering
    logic across desktop settings, desktop CM and mobile CM
  - Add resolve_avatar_url() in Rust, exposed via FFI (SyncReturn),
    to resolve relative avatar paths (e.g. "/avatar/xxx") to absolute URLs
  - Store avatar as-is in local config, only resolve when displaying
    (settings page) or sending (LoginRequest)
  - Resolve avatar in LoginRequest before sending to remote peer
  - Add error handling for network image load failures
  - Guard against empty client.name[0] crash
  - Show avatar in mobile settings page account tile

Signed-off-by: 21pages <sunboeasy@gmail.com>

* web: implement mainResolveAvatarUrl via js getByName

Signed-off-by: 21pages <sunboeasy@gmail.com>

* increase ipc Data enum size limit to 120 bytes

Signed-off-by: 21pages <sunboeasy@gmail.com>

---------

Signed-off-by: 21pages <sunboeasy@gmail.com>
Co-authored-by: 21pages <sunboeasy@gmail.com>

src/ui/cm.css

@@ -57,6 +57,11 @@ div.icon {
     font-weight: bold;
 }
 
+img.icon {
+    size: 96px;
+    border-radius: 8px;
+}
+
 div.id {
     @ELLIPSIS;
     color: color(green-blue);

src/ui/cm.rs

@@ -28,6 +28,7 @@ impl InvokeUiCM for SciterHandler {
                 client.port_forward.clone(),
                 client.peer_id.clone(),
                 client.name.clone(),
+                client.avatar.clone(),
                 client.authorized,
                 client.keyboard,
                 client.clipboard,

src/ui/cm.tis

@@ -42,9 +42,11 @@ class Body: Reactor.Component
         return <div .content style="size:*">
             <div .left-panel>
                 <div .icon-and-id>
+                    {c.avatar ?
+                    <img .icon src={c.avatar} /> :
                     <div .icon style={"background: " + string2RGB(c.name, 1)}>
                     {c.name[0].toUpperCase()}
-                    </div>
+                    </div>}
                     <div>
                         <div .id style="font-weight: bold; font-size: 1.2em;">{c.name}</div>
                         <div .id>({c.peer_id})</div>
@@ -366,7 +368,7 @@ function bring_to_top(idx=-1) {
     }
 }
 
-handler.addConnection = function(id, is_file_transfer, is_view_camera, is_terminal, port_forward, peer_id, name, authorized, keyboard, clipboard, audio, file, restart, recording, block_input) {
+handler.addConnection = function(id, is_file_transfer, is_view_camera, is_terminal, port_forward, peer_id, name, avatar, authorized, keyboard, clipboard, audio, file, restart, recording, block_input) {
     stdout.println("new connection #" + id + ": " + peer_id);
     var conn;
     connections.map(function(c) {
@@ -385,6 +387,7 @@ handler.addConnection = function(id, is_file_transfer, is_view_camera, is_termin
     conn = {
         id: id, is_file_transfer: is_file_transfer, is_view_camera: is_view_camera, is_terminal: is_terminal, peer_id: peer_id,
         port_forward: port_forward,
+        avatar: avatar,
         name: name, authorized: authorized, time: new Date(), now: new Date(),
         keyboard: keyboard, clipboard: clipboard, msgs: [], unreaded: 0,
         audio: audio, file: file, restart: restart, recording: recording,

src/ui/index.tis

@@ -1451,6 +1451,9 @@ function set_local_user_info(user) {
     if (user.display_name) {
         user_info.display_name = user.display_name;
     }
+    if (user.avatar) {
+        user_info.avatar = user.avatar;
+    }
     if (user.status) {
         user_info.status = user.status;
     }