diff --git a/net/web/src/session/channels/channelItem/ChannelItem.jsx b/net/web/src/session/channels/channelItem/ChannelItem.jsx
index 9a5f068c..b0c8bd16 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.jsx
+++ b/net/web/src/session/channels/channelItem/ChannelItem.jsx
@@ -13,14 +13,22 @@ console.log(item.contacts);
- { item.subject }
+
+
{ item.subject }
+
{ item.message }
+
)}
{ item.contacts.length === 1 && (
-
{ item.subject }
-
+
+
{ item.subject }
+
{ item.message }
+
+ { item.updated && (
+
+ )}
)}
{ item.contacts.length > 1 && (
@@ -28,8 +36,13 @@ console.log(item.contacts);
- { item.subject }
-
+
+
{ item.subject }
+
{ item.message }
+
+ { item.updated && (
+
+ )}
)}
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
index 9bc76e86..2493e799 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
@@ -19,6 +19,7 @@ export const ChannelItemWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
+ min-width: 0;
.logo {
display: flex;
@@ -29,14 +30,39 @@ export const ChannelItemWrapper = styled.div`
height: 32px;
border-radius: 8px;
font-size: 18px;
+ flex-shrink: 0;
}
- .subject {
- padding-left: 16px;
+ .details {
flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ padding-left: 16px;
+ justify-content: center;
+ min-width: 0;
+
+ .subject {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .message {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: ${Colors.disabled};
+ }
}
.markup {
+ position: absolute;
+ right: 0;
+ border-radius: 8px;
+ background-color: ${Colors.background};
+ width: 8px;
+ height: 8px;
+ margin-right: 16px;
}
}
`;
diff --git a/net/web/src/session/channels/useChannels.hook.js b/net/web/src/session/channels/useChannels.hook.js
index 44c06afa..24fa7923 100644
--- a/net/web/src/session/channels/useChannels.hook.js
+++ b/net/web/src/session/channels/useChannels.hook.js
@@ -86,6 +86,20 @@ export function useChannels() {
chan.subject = subject;
}
+ const setMessage = (chan) => {
+ let message = "";
+ if (chan.data.channelSummary?.lastTopic?.dataType === 'superbasictopic') {
+ try {
+ message = JSON.parse(chan.data.channelSummary.lastTopic.data).text;
+ }
+ catch (err) {
+ console.log(err);
+ }
+ }
+
+ chan.message = message;
+ }
+
useEffect(() => {
let merged = [];
card.state.cards.forEach((value, key, map) => {
@@ -104,6 +118,7 @@ export function useChannels() {
setUpdated(chan);
setContacts(chan);
setSubject(chan);
+ setMessage(chan);
});
const filtered = merged.filter((chan) => {
diff --git a/net/web/src/session/identity/Identity.styled.js b/net/web/src/session/identity/Identity.styled.js
index c7b83488..996f6691 100644
--- a/net/web/src/session/identity/Identity.styled.js
+++ b/net/web/src/session/identity/Identity.styled.js
@@ -9,7 +9,7 @@ export const IdentityWrapper = styled.div`
align-items: center;
padding-left: 16px;
padding-right: 16px;
- border-bottom: 1px solid ${Colors.divider};
+ border-bottom: 3px solid ${Colors.divider};
background-color: ${Colors.formBackground};
&:hover {