Page MenuHomePhorge
Files F32871904

D7275.1768139631.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D7275.1768139631.diff
View Options

diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -11,6 +11,7 @@
import css from './sidebars-modal.css';
import Button from '../../../components/button.react.js';
+import ThreadAvatar from '../../../components/thread-avatar.react.js';
import { getDefaultTextMessageRules } from '../../../markdown/rules.react.js';
import { useOnClickThread } from '../../../selectors/thread-selectors.js';
@@ -41,6 +42,11 @@
[css.unread]: unread,
});
+ const previewTextClassName = classNames({
+ [css.longTextEllipsis]: true,
+ [css.avatarOffset]: true,
+ });
+
const lastActivity = React.useMemo(
() => shortAbsoluteDate(lastUpdatedTime),
[lastUpdatedTime],
@@ -62,13 +68,14 @@
: message.text;
return (
<>
- <div className={css.longTextEllipsis}>{previewText}</div>
+ <div className={previewTextClassName}>{previewText}</div>
<div className={css.lastActivity}>{lastActivity}</div>
</>
);
- }, [lastActivity, messagePreviewResult]);
+ }, [lastActivity, messagePreviewResult, previewTextClassName]);
const { uiName } = useResolvedThreadInfo(threadInfo);
+
return (
<Button className={css.sidebarContainer} onClick={onClickThread}>
<img
@@ -81,7 +88,10 @@
alt="sidebar arrow"
/>
<div className={sidebarInfoClassName}>
- <div className={css.longTextEllipsis}>{uiName}</div>
+ <div className={css.avatarContainer}>
+ <ThreadAvatar size="micro" threadInfo={threadInfo} />
+ <div className={css.longTextEllipsis}>{uiName}</div>
+ </div>
<div className={css.lastMessage}>{lastMessage}</div>
</div>
</Button>
diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
--- a/web/modals/threads/sidebars/sidebars-modal.css
+++ b/web/modals/threads/sidebars/sidebars-modal.css
@@ -41,6 +41,16 @@
padding: 8px 0;
}
+div.avatarContainer {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+div.avatarOffset {
+ margin-left: 24px;
+}
+
div.longTextEllipsis {
text-overflow: ellipsis;
overflow: hidden;
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -4,7 +4,6 @@
import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js';
-import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { type ChatThreadItem } from 'lib/selectors/chat-selectors.js';
import { useMessagePreview } from 'lib/shared/message-utils.js';
import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
@@ -12,6 +11,7 @@
import css from './subchannels-modal.css';
import Button from '../../../components/button.react.js';
+import ThreadAvatar from '../../../components/thread-avatar.react.js';
import { getDefaultTextMessageRules } from '../../../markdown/rules.react.js';
import { useOnClickThread } from '../../../selectors/thread-selectors.js';
@@ -74,9 +74,10 @@
}, [lastActivity, messagePreviewResult]);
const { uiName } = useResolvedThreadInfo(threadInfo);
+
return (
<Button className={css.subchannelContainer} onClick={onClickThread}>
- <SWMansionIcon icon="message-square" size={22} />
+ <ThreadAvatar size="small" threadInfo={threadInfo} />
<div className={subchannelTitleClassName}>
<div className={css.longTextEllipsis}>{uiName}</div>
<div className={css.lastMessage}>{lastMessage}</div>

File Metadata

Mime Type
text/plain
Expires
Sun, Jan 11, 1:53 PM (1 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5919218
Default Alt Text
D7275.1768139631.diff (3 KB)

Event Timeline