styling topic item

net/web/src/User/Conversation/TopicItem/TopicItem.jsx

@@ -3,6 +3,7 @@ import { TopicItemWrapper } from './TopicItem.styled';
 import ReactResizeDetector from 'react-resize-detector';
 import { useTopicItem } from './useTopicItem.hook';
 import { Avatar } from 'avatar/Avatar';
+import { BranchesOutlined } from '@ant-design/icons';
 
 export function TopicItem({ topic }) {
 
@@ -10,7 +11,9 @@ export function TopicItem({ topic }) {
 
   let name = state.name ? state.name : state.handle;
   let nameClass = state.name ? 'set' : 'unset';
-
+  let d = new Date();
+  let offset = d.getTime() / 1000 - state.created;
+  
   return (
     <TopicItemWrapper>
       <div class="avatar">
@@ -19,6 +22,10 @@ export function TopicItem({ topic }) {
       <div class="topic">
         <div class="info">
           <div class={nameClass}>{ name }</div>
+          <div>{ getTime(offset) }</div>
+          <div class="comments">
+            <BranchesOutlined rotate="90" />
+          </div>
         </div>
         <div class="message">{ state.message }</div>
       </div>
@@ -26,3 +33,22 @@ export function TopicItem({ topic }) {
   )
 }
 
+function getTime(offset) {
+  if (offset < 60) {
+    return Math.floor(offset) + "s";
+  }
+  offset /= 60;
+  if (offset < 60) {
+    return Math.floor(offset) + "m";
+  }
+  offset /= 60;
+  if (offset < 24) {
+    return Math.floor(offset) + "h";
+  }
+  offset /= 24;
+  if (offset < 366) {
+    return Math.floor(offset) + "d";
+  }
+  offset /= 365.25;
+  return Math.floor(offset) + "y";
+}

net/web/src/User/Conversation/TopicItem/TopicItem.styled.js

@@ -6,6 +6,9 @@ export const TopicItemWrapper = styled.div`
   width: 100%;
   padding-left: 8px;
   padding-right: 8px;
+  &:hover {
+    background-color: #eeeeee;
+  }
 
   .avatar {
     height: 32px;
@@ -20,18 +23,29 @@ export const TopicItemWrapper = styled.div`
     .info {
       display: flex;
       flex-direction: row;
+      line-height: 1;
+
+      .comments {
+        padding-left: 8px;
+        cursor: pointer;
+        color: #888888;
+      }
+
       .set {
         font-weight: bold;
         color: #444444;
+        padding-right: 8px;
       }
       .unset {
         font-weight: bold;
         font-style: italic;
         color: #888888;
+        padding-right: 8px;
       }
     }
 
     .message {
+      padding-top: 6px;
     }
   }
 `;

net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js

@@ -12,6 +12,7 @@ export function useTopicItem(topic) {
     handle: null,
     imageUrl: null,
     message: null,
+    created: null,
   });
 
   const profile = useContext(ProfileContext);
@@ -32,15 +33,15 @@ export function useTopicItem(topic) {
     }
 
     if (profile.state.init && card.state.init && conversation.state.init) {
-      const topicGuid = topic.data.topicDetail.guid;
-      if (profile.state.profile.guid == topicGuid) {
+      const { guid, created } = topic.data.topicDetail;
+      if (profile.state.profile.guid == guid) {
         const { name, handle, imageUrl } = profile.actions.getProfile();
-        updateState({ name, handle, imageUrl, message });
+        updateState({ name, handle, imageUrl, message, created });
       }
       else {
-        const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(topicGuid);
-        updateState({ name, handle, imageUrl, message });
-      }   
+        const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
+        updateState({ name, handle, imageUrl, message, created });
+      }
     }
   }, [profile, card, conversation, topic]);
 

net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js

@@ -17,9 +17,6 @@ export const CardItem = styled(List.Item)`
   padding-top: 4px;
   padding-bottom: 4px;
   cursor: pointer;
-  &:hover {
-    background-color: #eeeeee;
-  }
 
   .item {
     width: 100%;

net/web/src/VirtualList/VirtualList.jsx

@@ -9,7 +9,7 @@ export function VirtualList({ id, items, itemRenderer }) {
   const OVERSCAN = 256; // add slots in overscan of view
   const DEFAULT_ITEM_HEIGHT = 64;
   const DEFAULT_LIST_HEIGHT = 4096;
-  const GUTTER = 8;
+  const GUTTER = 6;
 
   const [ viewHeight, setViewHeight ] = useState(DEFAULT_LIST_HEIGHT); 
   const [ canvasHeight, setCanvasHeight ] = useState(DEFAULT_LIST_HEIGHT*3);

net/web/src/VirtualList/VirtualList.styled.js

@@ -29,5 +29,7 @@ export const VirtualItem = styled.div`
   position: absolute;
   width: 100%;
   overflow: hidden;
-  border-top: 1px solid #dddddd;
+  &:hover {
+    background-color: #eeeeee;
+  }
 `;