@teambit/component.ui.version-block 0.0.939 → 0.0.941

package/dist/version-block.d.ts

@@ -6,9 +6,9 @@ export type VersionBlockProps = {
     isLatest: boolean;
     snap: LegacyComponentLog;
     isCurrent: boolean;
+    collapsed?: boolean;
+    onToggleCollapse?: () => void;
+    /** When true, all entries get card-style borders (used in "expand all" mode) */
+    allExpanded?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
-/**
- * change log section
- * @name VersionBlock
- */
-export declare function VersionBlock({ isLatest, className, snap, componentId, isCurrent, ...rest }: VersionBlockProps): React.JSX.Element;
+export declare function VersionBlock({ isLatest, className, snap, componentId, isCurrent, collapsed, onToggleCollapse, allExpanded, ...rest }: VersionBlockProps): React.JSX.Element;

package/dist/version-block.js

@@ -48,65 +48,122 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VersionBlock = VersionBlock;
-const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
-const design_ui_contributors_1 = require("@teambit/design.ui.contributors");
-const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+/* eslint-disable complexity */
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
 const component_ui_version_label_1 = require("@teambit/component.ui.version-label");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
 const lanes_hooks_use_lanes_1 = require("@teambit/lanes.hooks.use-lanes");
 const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
 const version_block_module_scss_1 = __importDefault(require("./version-block.module.scss"));
+function ChevronIcon({ collapsed, className }) {
+    return (react_1.default.createElement("svg", { className: (0, classnames_1.default)(version_block_module_scss_1.default.chevronIcon, collapsed && version_block_module_scss_1.default.chevronCollapsed, className), width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M10.9999 1.17C10.8126 0.983753 10.5591 0.879211 10.2949 0.879211C10.0308 0.879211 9.77731 0.983753 9.58995 1.17L5.99995 4.71L2.45995 1.17C2.27259 0.983753 2.01913 0.879211 1.75495 0.879211C1.49076 0.879211 1.23731 0.983753 1.04995 1.17C0.95622 1.26297 0.881826 1.37357 0.831057 1.49543C0.780288 1.61729 0.75415 1.74799 0.75415 1.88C0.75415 2.01202 0.780288 2.14272 0.831057 2.26458C0.881826 2.38644 0.95622 2.49704 1.04995 2.59L5.28995 6.83C5.38291 6.92373 5.49351 6.99813 5.61537 7.04889C5.73723 7.09966 5.86794 7.1258 5.99995 7.1258C6.13196 7.1258 6.26267 7.09966 6.38453 7.04889C6.50638 6.99813 6.61699 6.92373 6.70995 6.83L10.9999 2.59C11.0937 2.49704 11.1681 2.38644 11.2188 2.26458C11.2696 2.14272 11.2957 2.01202 11.2957 1.88C11.2957 1.74799 11.2696 1.61729 11.2188 1.49543C11.1681 1.37357 11.0937 1.26297 10.9999 1.17Z", fill: "var(--bit-text-color-light, #6c707c)" })));
+}
 // @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
 const Link = base_react_navigation_link_1.Link;
-/**
- * change log section
- * @name VersionBlock
- */
 function VersionBlock(_a) {
-    var { isLatest, className, snap, componentId, isCurrent } = _a, rest = __rest(_a, ["isLatest", "className", "snap", "componentId", "isCurrent"]);
-    const { username, email, message, tag, hash, date } = snap;
+    var { isLatest, className, snap, componentId, isCurrent, collapsed = false, onToggleCollapse, allExpanded = false } = _a, rest = __rest(_a, ["isLatest", "className", "snap", "componentId", "isCurrent", "collapsed", "onToggleCollapse", "allExpanded"]);
+    const { username, displayName, email, profileImage, message, tag, hash, date } = snap;
     const { lanesModel } = (0, lanes_hooks_use_lanes_1.useLanes)();
     const currentLaneUrl = (lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.isViewingNonDefaultLane())
-        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            `${lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl(lanesModel.viewedLane.id)}${lanes_ui_models_lanes_model_1.LanesModel.baseLaneComponentRoute}`
+        ? `${lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl(lanesModel.viewedLane.id)}${lanes_ui_models_lanes_model_1.LanesModel.baseLaneComponentRoute}`
         : '';
     const version = tag || hash;
-    const author = (0, react_1.useMemo)(() => {
-        return {
-            displayName: username,
-            email,
-        };
-    }, [snap]);
-    const timestamp = (0, react_1.useMemo)(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
+    const isTag = Boolean(tag);
+    const displayVersion = tag ? `v${tag}` : hash.slice(0, 7);
+    const author = (0, react_1.useMemo)(() => ({
+        displayName: displayName || username || '',
+        email: email || '',
+        name: username || '',
+        profileImage: profileImage || '',
+    }), [displayName, username, email, profileImage]);
     const location = (0, base_react_navigation_link_1.useLocation)();
     const { pathname } = location || {};
-    const testsUrl = currentLaneUrl
-        ? `${currentLaneUrl}/${componentId}/~tests?version=${version}`
-        : `${pathname === null || pathname === void 0 ? void 0 : pathname.replace('~changelog', '~tests')}?version=${version}`;
-    const compositionsUrl = currentLaneUrl
-        ? `${currentLaneUrl}/${componentId}/~compositions?version=${version}`
-        : `${pathname === null || pathname === void 0 ? void 0 : pathname.replace('~changelog', '~compositions')}?version=${version}`;
+    // Navigate to component page at that version (not the changelog)
+    const componentBasePath = (pathname === null || pathname === void 0 ? void 0 : pathname.replace(/\/~changelog.*$/, '')) || '';
     const versionUrl = currentLaneUrl
         ? `${currentLaneUrl}/${componentId}?version=${version}`
-        : `${pathname}?version=${version}`;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(version_block_module_scss_1.default.versionWrapper, className) },
-        react_1.default.createElement("div", { className: version_block_module_scss_1.default.left },
-            react_1.default.createElement(component_ui_version_label_1.Labels, { isLatest: isLatest, isCurrent: isCurrent }),
-            react_1.default.createElement(Link, { className: version_block_module_scss_1.default.link, href: testsUrl }, "Tests"),
-            react_1.default.createElement(Link, { className: version_block_module_scss_1.default.link, href: compositionsUrl }, "Compositions"),
-            react_1.default.createElement("div", { className: version_block_module_scss_1.default.placeholder })),
-        react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(version_block_module_scss_1.default.right, className) }, rest),
-            react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "right", content: hash },
-                react_1.default.createElement(Link, { className: version_block_module_scss_1.default.titleLink, href: versionUrl },
-                    react_1.default.createElement(documenter_ui_heading_1.H3, { size: "xs", className: version_block_module_scss_1.default.versionTitle }, tag ? `v${tag}` : hash))),
-            react_1.default.createElement(design_ui_contributors_1.Contributors, { contributors: [author || {}], timestamp: timestamp }),
-            commitMessage(message))));
+        : `${componentBasePath}?version=${version}`;
+    const { firstLine, rest: restOfMessage } = useCommitMessage(message);
+    const [messageExpanded, setMessageExpanded] = (0, react_1.useState)(false);
+    const hasMore = restOfMessage.length > 0;
+    const authorDisplay = displayName || username || 'Unknown';
+    if (!isTag && collapsed) {
+        return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(version_block_module_scss_1.default.row, version_block_module_scss_1.default.snapRow, version_block_module_scss_1.default.collapsedRow, className), onClick: onToggleCollapse, role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && (onToggleCollapse === null || onToggleCollapse === void 0 ? void 0 : onToggleCollapse()) }, rest),
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.dateCol },
+                react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { className: version_block_module_scss_1.default.dateText, date: date ? parseInt(date) : Date.now() })),
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.dotCol },
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.snapDotOuter },
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.snapDotInner }))),
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.contentCol },
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.collapsedContent },
+                    react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "bottom", content: hash },
+                        react_1.default.createElement("span", { className: version_block_module_scss_1.default.snapHash }, displayVersion)),
+                    react_1.default.createElement("span", { className: version_block_module_scss_1.default.collapsedAuthor }, authorDisplay),
+                    react_1.default.createElement(ChevronIcon, { collapsed: true, className: version_block_module_scss_1.default.expandHint })))));
+    }
+    if (!isTag) {
+        return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(version_block_module_scss_1.default.row, version_block_module_scss_1.default.snapRow, className) }, rest),
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.dateCol },
+                react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { className: version_block_module_scss_1.default.dateText, date: date ? parseInt(date) : Date.now() })),
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.dotCol },
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.snapDotOuter },
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.snapDotInner }))),
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.contentCol },
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.snapCard, onClick: onToggleCollapse, role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && (onToggleCollapse === null || onToggleCollapse === void 0 ? void 0 : onToggleCollapse()) },
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.headerRow },
+                        react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "bottom", content: hash },
+                            react_1.default.createElement(Link, { className: version_block_module_scss_1.default.snapVersionLink, href: versionUrl, onClick: (e) => e.stopPropagation() }, displayVersion)),
+                        react_1.default.createElement(ChevronIcon, { className: version_block_module_scss_1.default.collapseHint })),
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.metaRow },
+                        react_1.default.createElement(design_ui_avatar_1.UserAvatar, { account: author, size: 20, fontSize: 8 }),
+                        react_1.default.createElement("span", { className: version_block_module_scss_1.default.authorName }, authorDisplay)),
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.messageSection }, firstLine ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("div", { className: version_block_module_scss_1.default.firstLine }, firstLine),
+                        hasMore && (react_1.default.createElement(react_1.default.Fragment, null,
+                            messageExpanded && react_1.default.createElement("div", { className: version_block_module_scss_1.default.restOfMessage }, restOfMessage),
+                            react_1.default.createElement("button", { className: version_block_module_scss_1.default.expandButton, onClick: (e) => {
+                                    e.stopPropagation();
+                                    setMessageExpanded(!messageExpanded);
+                                }, type: "button" }, messageExpanded ? 'Show less' : 'Show more'))))) : (react_1.default.createElement("div", { className: version_block_module_scss_1.default.emptyMessage }, "No commit message")))))));
+    }
+    // ----- Tag entry -----
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(version_block_module_scss_1.default.row, version_block_module_scss_1.default.tagRow, className) }, rest),
+        react_1.default.createElement("div", { className: version_block_module_scss_1.default.dateCol },
+            react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { className: version_block_module_scss_1.default.dateText, date: date ? parseInt(date) : Date.now() })),
+        react_1.default.createElement("div", { className: version_block_module_scss_1.default.dotCol },
+            react_1.default.createElement("div", { className: version_block_module_scss_1.default.tagDotOuter },
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.tagDotRing },
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.tagDotInner })))),
+        react_1.default.createElement("div", { className: version_block_module_scss_1.default.contentCol },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(version_block_module_scss_1.default.tagCard, allExpanded && version_block_module_scss_1.default.tagCardBordered) },
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.headerRow },
+                    react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "bottom", content: hash },
+                        react_1.default.createElement(Link, { className: version_block_module_scss_1.default.versionLink, href: versionUrl }, displayVersion)),
+                    isLatest && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { status: "latest" }),
+                    isCurrent && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { status: "current" })),
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.metaRow },
+                    react_1.default.createElement(design_ui_avatar_1.UserAvatar, { account: author, size: 20, fontSize: 8 }),
+                    react_1.default.createElement("span", { className: version_block_module_scss_1.default.authorName }, authorDisplay)),
+                react_1.default.createElement("div", { className: version_block_module_scss_1.default.messageSection }, firstLine ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: version_block_module_scss_1.default.firstLine }, firstLine),
+                    hasMore && (react_1.default.createElement(react_1.default.Fragment, null,
+                        messageExpanded && react_1.default.createElement("div", { className: version_block_module_scss_1.default.restOfMessage }, restOfMessage),
+                        react_1.default.createElement("button", { className: version_block_module_scss_1.default.expandButton, onClick: () => setMessageExpanded(!messageExpanded), type: "button" }, messageExpanded ? 'Show less' : 'Show more'))))) : (react_1.default.createElement("div", { className: version_block_module_scss_1.default.emptyMessage }, "No commit message")))))));
 }
-function commitMessage(message) {
-    if (!message || message === '')
-        return react_1.default.createElement("div", { className: version_block_module_scss_1.default.emptyMessage }, "No commit message");
-    return react_1.default.createElement("div", { className: version_block_module_scss_1.default.commitMessage }, message);
+function useCommitMessage(message) {
+    return (0, react_1.useMemo)(() => {
+        if (!message)
+            return { firstLine: '', rest: '' };
+        const lines = message.split('\n');
+        return {
+            firstLine: lines[0],
+            rest: lines.slice(1).join('\n').trim(),
+        };
+    }, [message]);
 }
 //# sourceMappingURL=version-block.js.map

package/dist/version-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-block.js","sourceRoot":"","sources":["../version-block.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"version-block.js","sourceRoot":"","sources":["../version-block.tsx"],"names":[],"mappings":"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"}

package/dist/version-block.module.scss

@@ -1,63 +1,327 @@
-.versionWrapper {
+.row {
+  display: grid;
+  grid-template-columns: 100px 36px 1fr;
+  align-items: start;
+  min-height: 0;
+}
+
+.dateCol {
+  text-align: right;
+  padding-right: 12px;
+}
+
+.dateText {
+  font-size: 12px;
+  color: var(--bit-text-color-light, #6c707c);
+  white-space: nowrap;
+}
+
+.dotCol {
   display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
 
-  .left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    border-right: 1px solid var(--bit-border-color-lightest, #ededed);
-    padding-right: 22px;
-    padding-left: 10px;
-    padding-top: 24px;
-    text-align: right;
-    @media screen and (max-width: 768px) {
-      display: none;
+.contentCol {
+  padding-left: 16px;
+  min-width: 0;
+}
+
+.tagDotOuter {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--bit-accent-bg, rgba(108, 92, 231, 0.12));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tagDotRing {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--bit-accent-color, #6c5ce7);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tagDotInner {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: var(--bit-accent-color, #6c5ce7);
+}
+
+.snapDotOuter {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--bit-bg-color, #ffffff);
+  border: 2px solid var(--bit-border-color-lightest, #d0d0d0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.snapDotInner {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--bit-border-color-lightest, #d0d0d0);
+}
+
+.tagRow {
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  .dateCol {
+    padding-top: 14px;
+  }
+
+  .dotCol {
+    padding-top: 12px;
+  }
+
+  .contentCol {
+    padding-bottom: 4px;
+  }
+}
+
+.tagCard {
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--bit-bg-dent, #f6f6f6);
+    border-color: var(--bit-border-color-lightest, #ededed);
+  }
+}
+
+.tagCardBordered {
+  border-color: var(--bit-border-color-lightest, #ededed);
+}
+
+.snapRow {
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  .dateCol {
+    padding-top: 10px;
+  }
+
+  .dotCol {
+    padding-top: 10px;
+  }
+}
+
+.snapCard {
+  padding: 10px 14px;
+  border-radius: 8px;
+  background-color: transparent;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    opacity 0.15s ease;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+    background-color: var(--bit-bg-dent, #f6f6f6);
+  }
+}
+
+.collapsedRow {
+  cursor: pointer;
+  align-items: center;
+  padding-top: 1px;
+  padding-bottom: 1px;
+
+  .dateCol {
+    padding-top: 0;
+  }
+
+  .dotCol {
+    padding-top: 0;
+  }
+
+  .contentCol {
+    padding-bottom: 0;
+  }
+
+  &:hover {
+    .collapsedContent {
+      background-color: var(--bit-bg-dent, #f6f6f6);
+    }
+    .expandHint {
+      opacity: 1;
     }
   }
 }
-.emptyLabel {
-  height: 25px;
-  margin-bottom: 21px;
+
+.collapsedContent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  min-width: 0;
+}
+
+.collapsedRow:hover .collapsedContent {
+  border-color: var(--bit-border-color-lightest, #ededed);
 }
-.link {
+
+.snapHash {
+  font-size: 12px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  color: var(--bit-text-color-light, #6c707c);
+  flex-shrink: 0;
+}
+
+.collapsedAuthor {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--bit-text-color-light, #6c707c);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+// Chevron icon
+.chevronIcon {
+  flex-shrink: 0;
+  transition:
+    transform 0.2s ease,
+    opacity 0.15s ease;
+}
+
+.chevronCollapsed {
+  transform: rotate(0deg); // points down when collapsed
+}
+
+// Expand hint (collapsed snap row)
+.expandHint {
+  opacity: 0.3;
+  margin-left: auto;
+  transition: opacity 0.15s ease;
+}
+
+// Collapse hint (expanded snap card header)
+.collapseHint {
+  opacity: 0.4;
+  margin-left: auto;
+  transform: rotate(180deg); // points up when expanded
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.versionLink {
   text-decoration: none;
-  color: var(--bit-text-color-heavyed);
-  font-size: 14px;
-  margin-bottom: 8px;
+  color: var(--bit-accent-color, #6c5ce7);
+  font-size: 16px;
+  font-weight: 600;
+
   &:hover {
     text-decoration: underline;
   }
 }
-.right {
-  padding-top: 20px;
-  padding-left: 50px;
-  margin-bottom: 45px;
-  max-width: 700px;
-  .versionTitle {
-    color: var(--bit-accent-color, #6c5ce7);
-    font-weight: unset;
-    margin-bottom: 10px;
-  }
-  .titleLink {
-    text-decoration: none;
-    display: inline-block;
-    max-width: fit-content;
-  }
-  @media screen and (max-width: 768px) {
-    padding-left: 0;
+
+.snapVersionLink {
+  text-decoration: none;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  color: var(--bit-text-color-light, #6c707c);
+  font-size: 13px;
+  font-weight: 500;
+
+  &:hover {
+    text-decoration: underline;
   }
 }
 
-.commitMessage {
-  font-size: 15px;
-  max-width: 200px;
+.authorName {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--bit-text-color-heavy, #2b2b2b);
 }
+
+.firstLine {
+  font-size: 14px;
+  color: var(--bit-text-color-heavy, #2b2b2b);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.restOfMessage {
+  font-size: 13px;
+  color: var(--bit-text-color-light, #6c707c);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-top: 4px;
+}
+
+.expandButton {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--bit-accent-color, #6c5ce7);
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .emptyMessage {
-  font-size: 15px;
+  font-size: 14px;
   font-style: italic;
   color: var(--bit-text-color-light, #6c707c);
 }
 
-.placeholder {
-  width: 57px;
+@media screen and (max-width: 768px) {
+  .row {
+    grid-template-columns: 76px 28px 1fr;
+  }
+
+  .dateCol {
+    padding-right: 8px;
+  }
+
+  .contentCol {
+    padding-left: 10px;
+  }
+
+  .tagCard,
+  .snapCard {
+    padding: 8px 10px;
+  }
 }

package/package.json

@@ -1,24 +1,23 @@
 {
   "name": "@teambit/component.ui.version-block",
-  "version": "0.0.939",
+  "version": "0.0.941",
   "homepage": "https://bit.cloud/teambit/component/ui/version-block",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/version-block",
-    "version": "0.0.939"
+    "version": "0.0.941"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "core-js": "^3.0.0",
+    "@teambit/design.ui.avatar": "1.1.31",
     "@teambit/design.ui.tooltip": "0.0.382",
-    "@teambit/documenter.ui.heading": "4.1.8",
     "@teambit/lanes.hooks.use-lanes": "0.0.292",
     "@teambit/lanes.ui.models.lanes-model": "0.0.232",
+    "@teambit/legacy-component-log": "0.0.417",
     "@teambit/component.ui.version-label": "0.0.509",
-    "@teambit/design.ui.contributors": "0.0.514",
-    "@teambit/design.ui.avatar": "1.1.30",
-    "@teambit/legacy-component-log": "0.0.417"
+    "@teambit/design.ui.time-ago": "0.0.383"
   },
   "devDependencies": {
     "@types/classnames": "^2.3.4",

package/version-block.module.scss

@@ -1,63 +1,327 @@
-.versionWrapper {
+.row {
+  display: grid;
+  grid-template-columns: 100px 36px 1fr;
+  align-items: start;
+  min-height: 0;
+}
+
+.dateCol {
+  text-align: right;
+  padding-right: 12px;
+}
+
+.dateText {
+  font-size: 12px;
+  color: var(--bit-text-color-light, #6c707c);
+  white-space: nowrap;
+}
+
+.dotCol {
   display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
 
-  .left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    border-right: 1px solid var(--bit-border-color-lightest, #ededed);
-    padding-right: 22px;
-    padding-left: 10px;
-    padding-top: 24px;
-    text-align: right;
-    @media screen and (max-width: 768px) {
-      display: none;
+.contentCol {
+  padding-left: 16px;
+  min-width: 0;
+}
+
+.tagDotOuter {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--bit-accent-bg, rgba(108, 92, 231, 0.12));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tagDotRing {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--bit-accent-color, #6c5ce7);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tagDotInner {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: var(--bit-accent-color, #6c5ce7);
+}
+
+.snapDotOuter {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--bit-bg-color, #ffffff);
+  border: 2px solid var(--bit-border-color-lightest, #d0d0d0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.snapDotInner {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--bit-border-color-lightest, #d0d0d0);
+}
+
+.tagRow {
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  .dateCol {
+    padding-top: 14px;
+  }
+
+  .dotCol {
+    padding-top: 12px;
+  }
+
+  .contentCol {
+    padding-bottom: 4px;
+  }
+}
+
+.tagCard {
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--bit-bg-dent, #f6f6f6);
+    border-color: var(--bit-border-color-lightest, #ededed);
+  }
+}
+
+.tagCardBordered {
+  border-color: var(--bit-border-color-lightest, #ededed);
+}
+
+.snapRow {
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  .dateCol {
+    padding-top: 10px;
+  }
+
+  .dotCol {
+    padding-top: 10px;
+  }
+}
+
+.snapCard {
+  padding: 10px 14px;
+  border-radius: 8px;
+  background-color: transparent;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    opacity 0.15s ease;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+    background-color: var(--bit-bg-dent, #f6f6f6);
+  }
+}
+
+.collapsedRow {
+  cursor: pointer;
+  align-items: center;
+  padding-top: 1px;
+  padding-bottom: 1px;
+
+  .dateCol {
+    padding-top: 0;
+  }
+
+  .dotCol {
+    padding-top: 0;
+  }
+
+  .contentCol {
+    padding-bottom: 0;
+  }
+
+  &:hover {
+    .collapsedContent {
+      background-color: var(--bit-bg-dent, #f6f6f6);
+    }
+    .expandHint {
+      opacity: 1;
     }
   }
 }
-.emptyLabel {
-  height: 25px;
-  margin-bottom: 21px;
+
+.collapsedContent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  min-width: 0;
+}
+
+.collapsedRow:hover .collapsedContent {
+  border-color: var(--bit-border-color-lightest, #ededed);
 }
-.link {
+
+.snapHash {
+  font-size: 12px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  color: var(--bit-text-color-light, #6c707c);
+  flex-shrink: 0;
+}
+
+.collapsedAuthor {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--bit-text-color-light, #6c707c);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+// Chevron icon
+.chevronIcon {
+  flex-shrink: 0;
+  transition:
+    transform 0.2s ease,
+    opacity 0.15s ease;
+}
+
+.chevronCollapsed {
+  transform: rotate(0deg); // points down when collapsed
+}
+
+// Expand hint (collapsed snap row)
+.expandHint {
+  opacity: 0.3;
+  margin-left: auto;
+  transition: opacity 0.15s ease;
+}
+
+// Collapse hint (expanded snap card header)
+.collapseHint {
+  opacity: 0.4;
+  margin-left: auto;
+  transform: rotate(180deg); // points up when expanded
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.versionLink {
   text-decoration: none;
-  color: var(--bit-text-color-heavyed);
-  font-size: 14px;
-  margin-bottom: 8px;
+  color: var(--bit-accent-color, #6c5ce7);
+  font-size: 16px;
+  font-weight: 600;
+
   &:hover {
     text-decoration: underline;
   }
 }
-.right {
-  padding-top: 20px;
-  padding-left: 50px;
-  margin-bottom: 45px;
-  max-width: 700px;
-  .versionTitle {
-    color: var(--bit-accent-color, #6c5ce7);
-    font-weight: unset;
-    margin-bottom: 10px;
-  }
-  .titleLink {
-    text-decoration: none;
-    display: inline-block;
-    max-width: fit-content;
-  }
-  @media screen and (max-width: 768px) {
-    padding-left: 0;
+
+.snapVersionLink {
+  text-decoration: none;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  color: var(--bit-text-color-light, #6c707c);
+  font-size: 13px;
+  font-weight: 500;
+
+  &:hover {
+    text-decoration: underline;
   }
 }
 
-.commitMessage {
-  font-size: 15px;
-  max-width: 200px;
+.authorName {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--bit-text-color-heavy, #2b2b2b);
 }
+
+.firstLine {
+  font-size: 14px;
+  color: var(--bit-text-color-heavy, #2b2b2b);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.restOfMessage {
+  font-size: 13px;
+  color: var(--bit-text-color-light, #6c707c);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-top: 4px;
+}
+
+.expandButton {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--bit-accent-color, #6c5ce7);
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .emptyMessage {
-  font-size: 15px;
+  font-size: 14px;
   font-style: italic;
   color: var(--bit-text-color-light, #6c707c);
 }
 
-.placeholder {
-  width: 57px;
+@media screen and (max-width: 768px) {
+  .row {
+    grid-template-columns: 76px 28px 1fr;
+  }
+
+  .dateCol {
+    padding-right: 8px;
+  }
+
+  .contentCol {
+    padding-left: 10px;
+  }
+
+  .tagCard,
+  .snapCard {
+    padding: 8px 10px;
+  }
 }

package/version-block.tsx

@@ -1,10 +1,11 @@
-import { H3 } from '@teambit/documenter.ui.heading';
-import { Contributors } from '@teambit/design.ui.contributors';
+/* eslint-disable complexity */
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { TimeAgo } from '@teambit/design.ui.time-ago';
+import { VersionLabel } from '@teambit/component.ui.version-label';
 import { Link as BaseLink, useLocation } from '@teambit/base-react.navigation.link';
-import { Labels } from '@teambit/component.ui.version-label';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { LegacyComponentLog } from '@teambit/legacy-component-log';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { useLanes } from '@teambit/lanes.hooks.use-lanes';
@@ -12,6 +13,24 @@ import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 
 import styles from './version-block.module.scss';
 
+function ChevronIcon({ collapsed, className }: { collapsed?: boolean; className?: string }) {
+  return (
+    <svg
+      className={classNames(styles.chevronIcon, collapsed && styles.chevronCollapsed, className)}
+      width="12"
+      height="8"
+      viewBox="0 0 12 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.9999 1.17C10.8126 0.983753 10.5591 0.879211 10.2949 0.879211C10.0308 0.879211 9.77731 0.983753 9.58995 1.17L5.99995 4.71L2.45995 1.17C2.27259 0.983753 2.01913 0.879211 1.75495 0.879211C1.49076 0.879211 1.23731 0.983753 1.04995 1.17C0.95622 1.26297 0.881826 1.37357 0.831057 1.49543C0.780288 1.61729 0.75415 1.74799 0.75415 1.88C0.75415 2.01202 0.780288 2.14272 0.831057 2.26458C0.881826 2.38644 0.95622 2.49704 1.04995 2.59L5.28995 6.83C5.38291 6.92373 5.49351 6.99813 5.61537 7.04889C5.73723 7.09966 5.86794 7.1258 5.99995 7.1258C6.13196 7.1258 6.26267 7.09966 6.38453 7.04889C6.50638 6.99813 6.61699 6.92373 6.70995 6.83L10.9999 2.59C11.0937 2.49704 11.1681 2.38644 11.2188 2.26458C11.2696 2.14272 11.2957 2.01202 11.2957 1.88C11.2957 1.74799 11.2696 1.61729 11.2188 1.49543C11.1681 1.37357 11.0937 1.26297 10.9999 1.17Z"
+        fill="var(--bit-text-color-light, #6c707c)"
+      />
+    </svg>
+  );
+}
+
 // @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
 const Link = BaseLink as any;
 
@@ -20,71 +39,216 @@ export type VersionBlockProps = {
   isLatest: boolean;
   snap: LegacyComponentLog;
   isCurrent: boolean;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+  /** When true, all entries get card-style borders (used in "expand all" mode) */
+  allExpanded?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
-/**
- * change log section
- * @name VersionBlock
- */
-export function VersionBlock({ isLatest, className, snap, componentId, isCurrent, ...rest }: VersionBlockProps) {
-  const { username, email, message, tag, hash, date } = snap;
+
+export function VersionBlock({
+  isLatest,
+  className,
+  snap,
+  componentId,
+  isCurrent,
+  collapsed = false,
+  onToggleCollapse,
+  allExpanded = false,
+  ...rest
+}: VersionBlockProps) {
+  const { username, displayName, email, profileImage, message, tag, hash, date } = snap;
   const { lanesModel } = useLanes();
   const currentLaneUrl = lanesModel?.isViewingNonDefaultLane()
-    ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      `${LanesModel.getLaneUrl(lanesModel.viewedLane!.id)}${LanesModel.baseLaneComponentRoute}`
+    ? `${LanesModel.getLaneUrl(lanesModel.viewedLane!.id)}${LanesModel.baseLaneComponentRoute}`
     : '';
 
   const version = tag || hash;
-  const author = useMemo(() => {
-    return {
-      displayName: username,
-      email,
-    };
-  }, [snap]);
+  const isTag = Boolean(tag);
+  const displayVersion = tag ? `v${tag}` : hash.slice(0, 7);
+
+  const author = useMemo(
+    () => ({
+      displayName: displayName || username || '',
+      email: email || '',
+      name: username || '',
+      profileImage: profileImage || '',
+    }),
+    [displayName, username, email, profileImage]
+  );
 
-  const timestamp = useMemo(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
   const location = useLocation();
   const { pathname } = location || {};
 
-  const testsUrl = currentLaneUrl
-    ? `${currentLaneUrl}/${componentId}/~tests?version=${version}`
-    : `${pathname?.replace('~changelog', '~tests')}?version=${version}`;
-
-  const compositionsUrl = currentLaneUrl
-    ? `${currentLaneUrl}/${componentId}/~compositions?version=${version}`
-    : `${pathname?.replace('~changelog', '~compositions')}?version=${version}`;
-
+  // Navigate to component page at that version (not the changelog)
+  const componentBasePath = pathname?.replace(/\/~changelog.*$/, '') || '';
   const versionUrl = currentLaneUrl
     ? `${currentLaneUrl}/${componentId}?version=${version}`
-    : `${pathname}?version=${version}`;
+    : `${componentBasePath}?version=${version}`;
+
+  const { firstLine, rest: restOfMessage } = useCommitMessage(message);
+  const [messageExpanded, setMessageExpanded] = useState(false);
+  const hasMore = restOfMessage.length > 0;
+
+  const authorDisplay = displayName || username || 'Unknown';
+
+  if (!isTag && collapsed) {
+    return (
+      <div
+        className={classNames(styles.row, styles.snapRow, styles.collapsedRow, className)}
+        onClick={onToggleCollapse}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => e.key === 'Enter' && onToggleCollapse?.()}
+        {...rest}
+      >
+        <div className={styles.dateCol}>
+          <TimeAgo className={styles.dateText} date={date ? parseInt(date) : Date.now()} />
+        </div>
+        <div className={styles.dotCol}>
+          <div className={styles.snapDotOuter}>
+            <div className={styles.snapDotInner} />
+          </div>
+        </div>
+        <div className={styles.contentCol}>
+          <div className={styles.collapsedContent}>
+            <Tooltip placement="bottom" content={hash}>
+              <span className={styles.snapHash}>{displayVersion}</span>
+            </Tooltip>
+            <span className={styles.collapsedAuthor}>{authorDisplay}</span>
+            <ChevronIcon collapsed className={styles.expandHint} />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
+  if (!isTag) {
+    return (
+      <div className={classNames(styles.row, styles.snapRow, className)} {...rest}>
+        <div className={styles.dateCol}>
+          <TimeAgo className={styles.dateText} date={date ? parseInt(date) : Date.now()} />
+        </div>
+        <div className={styles.dotCol}>
+          <div className={styles.snapDotOuter}>
+            <div className={styles.snapDotInner} />
+          </div>
+        </div>
+        <div className={styles.contentCol}>
+          <div
+            className={styles.snapCard}
+            onClick={onToggleCollapse}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => e.key === 'Enter' && onToggleCollapse?.()}
+          >
+            <div className={styles.headerRow}>
+              <Tooltip placement="bottom" content={hash}>
+                <Link
+                  className={styles.snapVersionLink}
+                  href={versionUrl}
+                  onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                >
+                  {displayVersion}
+                </Link>
+              </Tooltip>
+              <ChevronIcon className={styles.collapseHint} />
+            </div>
+            <div className={styles.metaRow}>
+              <UserAvatar account={author} size={20} fontSize={8} />
+              <span className={styles.authorName}>{authorDisplay}</span>
+            </div>
+            <div className={styles.messageSection}>
+              {firstLine ? (
+                <>
+                  <div className={styles.firstLine}>{firstLine}</div>
+                  {hasMore && (
+                    <>
+                      {messageExpanded && <div className={styles.restOfMessage}>{restOfMessage}</div>}
+                      <button
+                        className={styles.expandButton}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setMessageExpanded(!messageExpanded);
+                        }}
+                        type="button"
+                      >
+                        {messageExpanded ? 'Show less' : 'Show more'}
+                      </button>
+                    </>
+                  )}
+                </>
+              ) : (
+                <div className={styles.emptyMessage}>No commit message</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // ----- Tag entry -----
   return (
-    <div className={classNames(styles.versionWrapper, className)}>
-      <div className={styles.left}>
-        <Labels isLatest={isLatest} isCurrent={isCurrent} />
-        <Link className={styles.link} href={testsUrl}>
-          Tests
-        </Link>
-        <Link className={styles.link} href={compositionsUrl}>
-          Compositions
-        </Link>
-        <div className={styles.placeholder} />
+    <div className={classNames(styles.row, styles.tagRow, className)} {...rest}>
+      <div className={styles.dateCol}>
+        <TimeAgo className={styles.dateText} date={date ? parseInt(date) : Date.now()} />
+      </div>
+      <div className={styles.dotCol}>
+        <div className={styles.tagDotOuter}>
+          <div className={styles.tagDotRing}>
+            <div className={styles.tagDotInner} />
+          </div>
+        </div>
       </div>
-      <div className={classNames(styles.right, className)} {...rest}>
-        <Tooltip placement="right" content={hash}>
-          <Link className={styles.titleLink} href={versionUrl}>
-            <H3 size="xs" className={styles.versionTitle}>
-              {tag ? `v${tag}` : hash}
-            </H3>
-          </Link>
-        </Tooltip>
-        <Contributors contributors={[author || {}]} timestamp={timestamp} />
-        {commitMessage(message)}
+      <div className={styles.contentCol}>
+        <div className={classNames(styles.tagCard, allExpanded && styles.tagCardBordered)}>
+          <div className={styles.headerRow}>
+            <Tooltip placement="bottom" content={hash}>
+              <Link className={styles.versionLink} href={versionUrl}>
+                {displayVersion}
+              </Link>
+            </Tooltip>
+            {isLatest && <VersionLabel status="latest" />}
+            {isCurrent && <VersionLabel status="current" />}
+          </div>
+          <div className={styles.metaRow}>
+            <UserAvatar account={author} size={20} fontSize={8} />
+            <span className={styles.authorName}>{authorDisplay}</span>
+          </div>
+          <div className={styles.messageSection}>
+            {firstLine ? (
+              <>
+                <div className={styles.firstLine}>{firstLine}</div>
+                {hasMore && (
+                  <>
+                    {messageExpanded && <div className={styles.restOfMessage}>{restOfMessage}</div>}
+                    <button
+                      className={styles.expandButton}
+                      onClick={() => setMessageExpanded(!messageExpanded)}
+                      type="button"
+                    >
+                      {messageExpanded ? 'Show less' : 'Show more'}
+                    </button>
+                  </>
+                )}
+              </>
+            ) : (
+              <div className={styles.emptyMessage}>No commit message</div>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );
 }
 
-function commitMessage(message: string) {
-  if (!message || message === '') return <div className={styles.emptyMessage}>No commit message</div>;
-  return <div className={styles.commitMessage}>{message}</div>;
+function useCommitMessage(message: string) {
+  return useMemo(() => {
+    if (!message) return { firstLine: '', rest: '' };
+    const lines = message.split('\n');
+    return {
+      firstLine: lines[0],
+      rest: lines.slice(1).join('\n').trim(),
+    };
+  }, [message]);
 }