Redesign link previews (#33061)

* Commit design update

* Add figma links

* Check in other changes

* revert accidental change

* Iterative update

* linting n test fiddles

* linting

* Cleanup

* update snaps

* Move URL previews to new home

* Fix paths

* compress img

* Add back all the stories

* Improved rendering

* Fixup

* Update previews again

* lint

* update stories

* Update snaps again

* More screenshots

* Also these

* Update snaps

* include site name

* Update snaps again

* Use a scale so the images don't go blur

* update snaps again

* Update snaps

* remove mistaken playwright cfg

* update pw snaps

* update snap

* update previews

* Update with new designs

* Update screenshots

apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap

@@ -2,61 +2,73 @@
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:description': 'A description',\\n  'og:title': ''\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
   "title": "A description",
 }
 `;
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:site_name': 'Site name',\\n  'og:title': ''\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "Site name",
   "title": "Site name",
 }
 `;
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Basic title'\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
   "title": "Basic title",
 }
 `;
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Cool blog',\\n  'og:site_name': 'Cool site'\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
   "siteName": "Cool site",
   "title": "Cool blog",
 }
 `;
 
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 1024,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
+exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 10000,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": {
-    "fileSize": 1024,
-    "height": 100,
+    "alt": undefined,
+    "fileSize": 10000,
+    "height": 478,
     "imageFull": "https://example.org/image/src",
     "imageThumb": "https://example.org/image/thumb",
-    "width": 100,
+    "playable": false,
+    "width": 478,
   },
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
   "title": "Media test",
 }
 `;
@@ -67,10 +79,12 @@ exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the sa
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
       "siteName": "Example.org",
       "title": "This is an example!",
     },
@@ -96,10 +110,12 @@ exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the us
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
       "siteName": "Example.org",
       "title": "This is an example!",
     },
@@ -135,11 +151,13 @@ exports[`UrlPreviewGroupViewModel should ignore media when mediaVisible is false
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": undefined,
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
-      "siteName": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
+      "siteName": "example.org",
       "title": "This is an example!",
     },
   ],
@@ -154,17 +172,21 @@ exports[`UrlPreviewGroupViewModel should preview a URL with media 1`] = `
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": undefined,
       "image": {
+        "alt": undefined,
         "fileSize": 10000,
-        "height": 100,
+        "height": 128,
         "imageFull": "https://example.org/image/src",
         "imageThumb": "https://example.org/image/thumb",
-        "width": 100,
+        "playable": false,
+        "width": 128,
       },
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
-      "siteName": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
+      "siteName": "example.org",
       "title": "This is an example!",
     },
   ],
@@ -179,10 +201,12 @@ exports[`UrlPreviewGroupViewModel should preview a single valid URL 1`] = `
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
       "siteName": "Example.org",
       "title": "This is an example!",
     },