layout: add dummy profile pic to recommend server

Recommend server events looked broken and still showed the old
bubble. Fixed layout and also use dummy pic for recommend server
events.

esbuildconf.js

@@ -9,7 +9,6 @@ export const options = {
     'src/main.js',
     'src/main.css',
     'src/index.html',
-    'src/assets/bubble.svg',
     'src/assets/comment.svg',
     'src/assets/heart-fill.svg',
     'src/assets/star.svg',

src/assets/bubble.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 1000 1000" version="1.1" viewBox="0 0 1e3 1e3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<path fill="#7f7f7f" d="m240.4 673.3c-67.5 0-122.5 44.8-122.5 100 0 55.1 55 100 122.5 100s122.5-44.8 122.5-100c0-55.1-54.9-100-122.5-100zm0 160.3c-45.7 0-82.8-27-82.8-60.3 0-33.2 37.1-60.3 82.8-60.3s82.8 27 82.8 60.3c0 33.2-37.1 60.3-82.8 60.3z"/>
-<path fill="#7f7f7f" d="m108.5 865.9c-37.1 0-67.3 25.5-67.3 56.9s30.2 56.9 67.3 56.9 67.3-25.5 67.3-56.9-30.2-56.9-67.3-56.9zm0 74c-15.8 0-27.6-9.1-27.6-17.2s11.3-17.2 27.6-17.2c15.8 0 27.6 9.1 27.6 17.2s-11.8 17.2-27.6 17.2z"/>
-<path fill="#7f7f7f" d="m989.1 391c-5.4-48.7-35.5-92-83-120.4 0-5.9-0.3-11.5-0.9-16.8-10.2-91.8-93.6-161.2-194.7-162.8-38.1-50-102.5-77.1-171.9-69.3-35.3 4-68 16.6-95.5 36.8-28.5-25-67.5-37.4-108.8-32.8-58.6 6.5-106.6 47.2-119.1 99.1-130.6 36.7-217.5 153.8-203.8 277.4 13.7 122.4 120.2 216.1 254.6 225.3 28.3 24.1 69.3 35.8 112.4 31.1 19-2.1 37.5-7.5 54.1-15.7 31.8 22.3 72.4 34.4 115.8 34.4 8.6 0 17.2-0.5 25.8-1.4 62.8-7 117.7-38.7 147-84.1 12 1.6 24.1 2.4 36.2 2.4 10.1 0 20.3-0.6 30.4-1.7 122-13.6 212.3-104 201.4-201.5zm-205.6 162c-8.7 1-17.4 1.4-26 1.4-14.4 0-28.8-1.3-42.8-4l-14.5-2.7-6.8 13.2c-20.8 40.4-68.1 69.3-123.5 75.5-47 5.2-92.4-7.1-122.8-32.4l-10.9-9.1-12.1 7.4c-14.6 9-31.9 14.8-49.9 16.8-34 3.8-66.1-6-86-25.3l-5.4-5.3-7.5-0.3c-118.2-5.4-212.5-85.4-224.2-190.5-12-107.6 68-209.7 186.1-237.6l13.6-3.2 1.6-13.8c4.7-40.1 41.1-72.9 86.6-78 34.5-3.8 67.7 9 87.7 32.8l13.2 15.8 15.3-13.8c24.1-21.7 54.6-35.2 88.2-38.9 57.5-6.4 112.3 18.1 140.8 60.8l6.1 9.2 17.1-0.5c82.3 0 150.6 54.8 158.7 127.5 0.8 6.8 0.9 14.2 0.4 22.6l-0.8 12.9 11.5 6c42 21.9 68.6 56.7 72.9 95.8 8 75.9-66.6 146.5-166.6 157.7z"/>
-</svg>

src/cards.css

@@ -29,7 +29,7 @@
   height: var(--profileimg-size);
   margin-right: 1rem;
   /* padding-top: .5ch; */
-  max-width: var(--profileimg-size);
+  max-height: var(--profileimg-size);
   max-width: var(--profileimg-size);
   outline: .5rem solid var(--bgcolor);
   overflow: hidden;
@@ -37,11 +37,15 @@
   z-index: 2;
 }
 
+.mbox-img canvas,
+.mbox-img img {
+  display: block;
+}
+
 .mbox-updated-contact .mbox-img,
 .mbox-recommend-server .mbox-img {
-  --profileimg-size: 4.5ch;
-  margin-left: 3ch;
-  margin-right: 3.5ch;
+  --profileimg-size: 2rem;
+  margin-left: 2rem;
 }
 
 .mbox-body {
@@ -58,9 +62,7 @@
   margin-top: 0;
 }
 .mbox-header time,
-.mbox-username,
-.mbox-updated-contact,
-.mbox mbox-recommend-server {
+.mbox-username {
   color: var(--color-accent);
 }
 
@@ -71,7 +73,6 @@
 .mbox-updated-contact .mbox-body,
 .mbox-recommend-server .mbox-body {
   display: block;
-  flex-basis: 100%;
   font-size: var(--font-small);
   overflow: scroll;
 }

src/main.js

@@ -301,7 +301,7 @@ function renderUpdateContact(evt, relay) {
 }
 
 function renderRecommendServer(evt, relay) {
-  const {img, time, userName} = getMetadata(evt, relay);
+  const {img, name, time, userName} = getMetadata(evt, relay);
   const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
     elem('header', {className: 'mbox-header'}, [
       elem('small', {}, [
@@ -310,7 +310,9 @@ function renderRecommendServer(evt, relay) {
     ]),
     ` recommends server: ${evt.content}`,
   ]);
-  return rendernArticle([elem('div', {className: 'mbox-img'}, [img]), body], {className: 'mbox-recommend-server', data: {relay: evt.content}});
+  return rendernArticle([elem('div', {className: 'mbox-img'}, [
+    (name && img) ? img : elemCanvas(userName)]), body
+  ], {className: 'mbox-recommend-server', data: {relay: evt.content}});
 }
 
 function rendernArticle(content, props = {}) {
@@ -388,7 +390,7 @@ const getHost = (url) => {
 function getMetadata(evt, relay) {
   const host = getHost(relay);
   const user = userList.find(user => user.pubkey === evt.pubkey);
-  const userImg = user?.picture || 'assets/bubble.svg';
+  const userImg = user?.picture;
   const name = user?.metadata[relay]?.name;
   const userName = name || evt.pubkey.slice(0, 8);
   const userAbout = user?.metadata[relay]?.about || '';