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 {