From f9cf375ee557d096a1092a55e0f3b812b084f58f Mon Sep 17 00:00:00 2001
From: Siriusmart <sirius@siri.ws>
Date: Tue, 7 Jul 2026 12:26:40 +0100
Subject: [PATCH 1/5] Collpased URL previews in timeline

---
 .../LinkPreview/LinkPreview.module.css        |  2 +-
 .../LinkPreview/LinkPreview.tsx               | 42 +++++++++++++++++--
 .../UrlPreviewGroupView.tsx                   |  3 +-
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
index ee2b6671438..27221e79888 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@@ -38,7 +38,7 @@ button.preview {
     }
 }
 
-.container {
+.containerExpanded {
     max-width: 100%;
     width: 478px;
     display: flex;
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
index d8cfc6cec2b..fdd1f1df2d6 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
@@ -14,12 +14,13 @@ import { useI18n } from "../../../../../core/i18n/i18nContext";
 import type { UrlPreview } from "../types";
 import { LinkedText } from "../../../../../core/utils/LinkedText";
 import styles from "./LinkPreview.module.css";
+import { _t } from "../../../../../core/i18n/i18n";
 
 export interface LinkPreviewActions {
     onImageClick: () => void;
 }
 
-export type LinkPreviewProps = UrlPreview & LinkPreviewActions;
+export type LinkPreviewProps = UrlPreview & LinkPreviewActions & { collapsed: boolean };
 
 export function LinkTitle({
     title,
@@ -84,7 +85,42 @@ function LinkPreviewInline({
  * LinkPreview renders a single preview component for a single link on an event. It is usually rendered as part of
  * a `UrlPreviewGroupView`.
  */
-export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX.Element {
+export function LinkPreview(props: LinkPreviewProps): JSX.Element {
+    if (props.collapsed) {
+        return <LinkPreviewCollapsed {...props} />;
+    } else {
+        return <LinkPreviewExpanded {...props} />;
+    }
+}
+
+export function LinkPreviewCollapsed(preview: LinkPreviewProps): JSX.Element {
+    let img: JSX.Element | undefined;
+
+    if (preview.image && !preview.image.playable) {
+        img = (
+            <button
+                style={{
+                    backgroundImage: `url('${preview.image.imageThumb}')`,
+                }}
+                className={styles.preview}
+                aria-label={_t("timeline|url_preview|view_image")}
+            />
+        );
+    }
+
+    return (
+        // className to be changed after I get the CSS from design
+        <div className={styles.containerExpanded}>
+            {img}
+            <div className={styles.textContent}>
+                <LinkTitle title={preview.title} showTooltipOnLink={preview.showTooltipOnLink} link={preview.link} />
+                {preview.siteName && <LinkSiteName siteName={preview.siteName} siteIcon={preview.siteIcon} />}
+            </div>
+        </div>
+    );
+}
+
+export function LinkPreviewExpanded({ onImageClick, ...preview }: LinkPreviewProps): JSX.Element {
     const { translate: _t } = useI18n();
 
     const onImageClickHandler = useCallback<MouseEventHandler>(
@@ -147,7 +183,7 @@ export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX
     }
 
     return (
-        <div className={styles.container}>
+        <div className={styles.containerExpanded}>
             {img}
             <div className={styles.textContent}>
                 {preview.author && (
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
index 15699d1b063..12285921fae 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
@@ -99,12 +99,13 @@ export function UrlPreviewGroupView({ vm, className }: UrlPreviewGroupViewProps)
         <div className={classNames(className, styles.wrapper)} {...eventPresentationAttributes}>
             <HideButton onHideClick={vm.onHideClick} />
             <div className={styles.previewGroup}>
-                {previews.map((preview) => (
+                {previews.map((preview, i) => (
                     <LinkPreview
                         key={preview.link}
                         onImageClick={() => vm.onImageClick(preview)}
                         {...preview}
                         image={preview.image}
+                        collapsed={i !== 0}
                     />
                 ))}
                 {toggleButton}

From 671987f8fad8616a2e0aabc8c39ff45568edc116 Mon Sep 17 00:00:00 2001
From: Siriusmart <sirius@siri.ws>
Date: Wed, 8 Jul 2026 09:57:34 +0100
Subject: [PATCH 2/5] CSS for collapsed URL previews

---
 .../LinkPreview/LinkPreview.module.css        | 156 ++++++++++++++----
 .../LinkPreview/LinkPreview.tsx               |  39 +++--
 2 files changed, 145 insertions(+), 50 deletions(-)

diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
index 27221e79888..062f84a37c8 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@@ -9,32 +9,82 @@ button.preview {
     background-color: #fff;
 }
 
-.preview {
-    display: flex;
-    position: relative;
+.containerCollapsed {
     max-width: 100%;
-    width: 478px;
-    height: 200px;
-    background-size: cover;
-    background-position: center;
-    border: none;
-    padding: 0;
-    > img {
-        height: 200px;
-        width: 478px;
-        object-fit: cover;
+    width: calc(478px - 32px);
+    /* minus the padding */
+    display: flex;
+    border: 1px solid var(--cpd-color-border-interactive-primary);
+    border-radius: 12px;
+    /* Get radius from cpd */
+    flex-direction: row;
+    color: var(--cpd-color-gray-900);
+    overflow: clip;
+    gap: 8px;
+    padding: 12px 16px;
+
+    background: var(--cpd-color-bg-subtle-secondary);
+
+    &.inline {
+        flex-direction: row;
+        gap: var(--cpd-space-4x);
+        padding: var(--cpd-space-3x) var(--cpd-space-4x);
+
+        .title {
+            margin: 0;
+        }
+
+        .siteAvatar {
+            margin: auto 0;
+        }
+
+        .siteName {
+            margin: 0;
+        }
     }
-    .playButton[data-kind="primary"] {
-        padding: 0;
-        width: 50px;
-        height: 50px;
-        margin: auto;
-        background: var(--cpd-color-text-on-solid-primary);
-        > svg {
-            margin: auto;
-            border-radius: 50px;
-            color: var(--cpd-color-icon-primary);
+
+    .textContent {
+        &.inline {
+            padding: 0;
         }
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    .preview {
+        width: 40px;
+        height: 40px;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        border-radius: 8px;
+        border: none;
+        flex-shrink: 0;
+    }
+
+    .siteName {
+        line-height: 17.5px;
+    }
+
+    .title,
+    .siteName > span {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+        overflow: hidden;
+        min-width: 0;
+    }
+}
+
+.siteName {
+    vertical-align: middle;
+    display: flex;
+
+    > * {
+        /* Center everything */
+        margin: auto 0;
     }
 }
 
@@ -43,7 +93,8 @@ button.preview {
     width: 478px;
     display: flex;
     border: 1px solid var(--cpd-color-border-interactive-primary);
-    border-radius: 12px; /* Get radius from cpd */
+    border-radius: 12px;
+    /* Get radius from cpd */
     flex-direction: column;
     color: var(--cpd-color-gray-900);
     overflow: clip;
@@ -70,9 +121,11 @@ button.preview {
 
     .textContent {
         padding: var(--cpd-space-3x) var(--cpd-space-4x);
+
         &.inline {
             padding: 0;
         }
+
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-1x);
@@ -81,19 +134,64 @@ button.preview {
     .caption {
         display: inline-flex;
         flex-direction: column;
-        min-width: 0; /* Prevent blowout */
+        min-width: 0;
+        /* Prevent blowout */
     }
+
     .caption {
         flex: 1;
-        overflow: hidden; /* cause it to wrap rather than clip */
+        overflow: hidden;
+        /* cause it to wrap rather than clip */
+    }
+
+    .preview {
+        display: flex;
+        position: relative;
+        max-width: 100%;
+        width: 478px;
+        height: 200px;
+        background-size: cover;
+        background-position: center;
+        border: none;
+        padding: 0;
+
+        > img {
+            height: 200px;
+            width: 478px;
+            object-fit: cover;
+        }
+
+        .playButton[data-kind="primary"] {
+            padding: 0;
+            width: 50px;
+            height: 50px;
+            margin: auto;
+            background: var(--cpd-color-text-on-solid-primary);
+
+            > svg {
+                margin: auto;
+                border-radius: 50px;
+                color: var(--cpd-color-icon-primary);
+            }
+        }
+    }
+
+    .siteName {
+        margin-top: var(--cpd-space-1x);
+    }
+
+    .title,
+    .description {
+        line-clamp: 2;
+        -webkit-line-clamp: 2;
     }
 }
 
 .siteName {
-    margin-top: var(--cpd-space-1x);
     vertical-align: middle;
     display: flex;
     gap: var(--cpd-space-1-5x);
+
     > * {
         /* Center everything */
         margin: auto 0;
@@ -101,13 +199,11 @@ button.preview {
 }
 
 .title,
-.description {
+.siteName > Text {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     white-space: normal;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
     margin: 0;
 }
 
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
index fdd1f1df2d6..b032d1afa95 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type MouseEventHandler, type JSX, useCallback } from "react";
+import React, { type JSX } from "react";
 import { Tooltip, Text, Avatar, Button } from "@vector-im/compound-web";
 import PlaySolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/play-solid";
 import classNames from "classnames";
@@ -14,7 +14,6 @@ import { useI18n } from "../../../../../core/i18n/i18nContext";
 import type { UrlPreview } from "../types";
 import { LinkedText } from "../../../../../core/utils/LinkedText";
 import styles from "./LinkPreview.module.css";
-import { _t } from "../../../../../core/i18n/i18n";
 
 export interface LinkPreviewActions {
     onImageClick: () => void;
@@ -93,7 +92,20 @@ export function LinkPreview(props: LinkPreviewProps): JSX.Element {
     }
 }
 
+function createImageClickHandler({ onImageClick, ...preview }: LinkPreviewProps): React.MouseEventHandler {
+    return (ev) => {
+        if (ev.button != 0 || ev.metaKey) return;
+        ev.preventDefault();
+
+        if (!preview.image?.imageFull) {
+            return;
+        }
+        onImageClick();
+    };
+}
+
 export function LinkPreviewCollapsed(preview: LinkPreviewProps): JSX.Element {
+    const { translate: _t } = useI18n();
     let img: JSX.Element | undefined;
 
     if (preview.image && !preview.image.playable) {
@@ -103,39 +115,26 @@ export function LinkPreviewCollapsed(preview: LinkPreviewProps): JSX.Element {
                     backgroundImage: `url('${preview.image.imageThumb}')`,
                 }}
                 className={styles.preview}
+                onClick={createImageClickHandler(preview)}
                 aria-label={_t("timeline|url_preview|view_image")}
             />
         );
     }
 
     return (
-        // className to be changed after I get the CSS from design
-        <div className={styles.containerExpanded}>
+        <div className={styles.containerCollapsed}>
             {img}
             <div className={styles.textContent}>
                 <LinkTitle title={preview.title} showTooltipOnLink={preview.showTooltipOnLink} link={preview.link} />
-                {preview.siteName && <LinkSiteName siteName={preview.siteName} siteIcon={preview.siteIcon} />}
+                {preview.siteName && <LinkSiteName siteName={preview.siteName} />}
             </div>
         </div>
     );
 }
 
-export function LinkPreviewExpanded({ onImageClick, ...preview }: LinkPreviewProps): JSX.Element {
+export function LinkPreviewExpanded(preview: LinkPreviewProps): JSX.Element {
     const { translate: _t } = useI18n();
 
-    const onImageClickHandler = useCallback<MouseEventHandler>(
-        (ev) => {
-            if (ev.button != 0 || ev.metaKey) return;
-            ev.preventDefault();
-
-            if (!preview.image?.imageFull) {
-                return;
-            }
-            onImageClick();
-        },
-        [preview.image?.imageFull, onImageClick],
-    );
-
     if (!preview.image && !preview.author && !preview.description) {
         return <LinkPreviewInline {...preview} />;
     }
@@ -175,7 +174,7 @@ export function LinkPreviewExpanded({ onImageClick, ...preview }: LinkPreviewPro
                         backgroundImage: `url('${preview.image.imageThumb}')`,
                     }}
                     className={styles.preview}
-                    onClick={onImageClickHandler}
+                    onClick={createImageClickHandler(preview)}
                     aria-label={_t("timeline|url_preview|view_image")}
                 />
             );

From 09b6c3e093601a33dc8d9959c28e4bfb96a04447 Mon Sep 17 00:00:00 2001
From: Siriusmart <sirius@siri.ws>
Date: Wed, 8 Jul 2026 10:07:06 +0100
Subject: [PATCH 3/5] fixed typo thing?

---
 .../UrlPreviewGroupView/LinkPreview/LinkPreview.module.css      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
index 062f84a37c8..eef8946de3e 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@@ -199,7 +199,7 @@ button.preview {
 }
 
 .title,
-.siteName > Text {
+.description {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;

From 46c92ad744a7a517c01d1d9d50a464ac8aec3bce Mon Sep 17 00:00:00 2001
From: Siriusmart <sirius@siri.ws>
Date: Wed, 8 Jul 2026 10:13:06 +0100
Subject: [PATCH 4/5] update class for this component

---
 .../event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
index b032d1afa95..a20f020f1a6 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
@@ -66,7 +66,7 @@ function LinkPreviewInline({
     link,
 }: Omit<LinkPreviewProps, "image" | "description" | "author" | "onImageClick">): JSX.Element {
     return (
-        <div className={classNames(styles.container, styles.inline)}>
+        <div className={classNames(styles.containerExpanded, styles.inline)}>
             {siteIcon && (
                 <div className={styles.siteAvatar}>
                     <Avatar type="square" size="48px" name={title} id={title} src={siteIcon} />

From 9637868ff06e1afb3d3c5fbba91485ebeb22c4db Mon Sep 17 00:00:00 2001
From: Siriusmart <sirius@siri.ws>
Date: Wed, 8 Jul 2026 10:17:21 +0100
Subject: [PATCH 5/5] remove dead code from css

---
 .../LinkPreview/LinkPreview.module.css        | 40 ++-----------------
 1 file changed, 4 insertions(+), 36 deletions(-)

diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
index eef8946de3e..53c61e7879f 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@@ -25,29 +25,7 @@ button.preview {
 
     background: var(--cpd-color-bg-subtle-secondary);
 
-    &.inline {
-        flex-direction: row;
-        gap: var(--cpd-space-4x);
-        padding: var(--cpd-space-3x) var(--cpd-space-4x);
-
-        .title {
-            margin: 0;
-        }
-
-        .siteAvatar {
-            margin: auto 0;
-        }
-
-        .siteName {
-            margin: 0;
-        }
-    }
-
     .textContent {
-        &.inline {
-            padding: 0;
-        }
-
         display: flex;
         flex-direction: column;
     }
@@ -68,7 +46,7 @@ button.preview {
     }
 
     .title,
-    .siteName > span {
+    .siteName>span {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1;
@@ -78,16 +56,6 @@ button.preview {
     }
 }
 
-.siteName {
-    vertical-align: middle;
-    display: flex;
-
-    > * {
-        /* Center everything */
-        margin: auto 0;
-    }
-}
-
 .containerExpanded {
     max-width: 100%;
     width: 478px;
@@ -155,7 +123,7 @@ button.preview {
         border: none;
         padding: 0;
 
-        > img {
+        >img {
             height: 200px;
             width: 478px;
             object-fit: cover;
@@ -168,7 +136,7 @@ button.preview {
             margin: auto;
             background: var(--cpd-color-text-on-solid-primary);
 
-            > svg {
+            >svg {
                 margin: auto;
                 border-radius: 50px;
                 color: var(--cpd-color-icon-primary);
@@ -192,7 +160,7 @@ button.preview {
     display: flex;
     gap: var(--cpd-space-1-5x);
 
-    > * {
+    >* {
         /* Center everything */
         margin: auto 0;
     }