Merge pull request #45 from holochain-apps/conversation-improvements

Conversation-improvements
holochain-apps · Jun 14, 2024 · 1344fb1 · 1344fb1
2 parents 1bd1c7e + cac8a1f
commit 1344fb1
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 22 deletions.
diff --git a/ui/src/lib/Header.svelte b/ui/src/lib/Header.svelte
@@ -1,8 +1,3 @@
-<div class='flex flex-row flex-shrink-0 items-start w-full header'>
+<div class='flex flex-row flex-shrink-0 items-start w-full pt-4 px-4'>
   <slot></slot>
-</div>
-<style>
-  .header {
-    padding: 15px 15px 0 15px;
-  }
-</style>
+</div>
diff --git a/ui/src/lib/SvgIcon.svelte b/ui/src/lib/SvgIcon.svelte
@@ -14,6 +14,8 @@
     }
     return `data:image/svg+xml;charset=utf-8,${i.replace("#","%23")}`
   }
+
+  style = style + ` width: ${size}px;`
 </script>
 
 <div class="icon" style={style}>

diff --git a/ui/src/lib/svgIcons.ts b/ui/src/lib/svgIcons.ts
diff --git a/ui/src/routes/conversations/+page.svelte b/ui/src/routes/conversations/+page.svelte
@@ -21,13 +21,23 @@
 <div class="container h-full mx-auto flex flex-col conversations-list">
   <ul class="flex-1 mt-10">
     {#each $relayStore as $conversation ($conversation.data.id)}
-      <li class='text-xl flex flex-row mb-5'>
-        <a href="/conversations/{$conversation.data.id}" class='grow flex flex-row'>
-          <img src={$conversation.data.config.image} alt='Conversation' class='w-8 h-8 rounded-full mr-4 object-cover' />
-          <span>{@html $conversation.data.config.title}</span>
+      <li class='text-xl flex flex-row mb-5 items-start'>
+        <a href="/conversations/{$conversation.data.id}" class='flex-1 flex flex-row items-center min-w-0 overflow-hidden'>
+          {#if $conversation.data.config.image}
+            <img src={$conversation.data.config.image} alt='Conversation' class='w-9 h-9 rounded-full mr-4 object-cover' />
+          {:else}
+            <span class='mr-4 w-9 h-9 flex items-center justify-center bg-surface-400 rounded-full'><SvgIcon icon='group' size='16' color='#ccc' /></span>
+          {/if}
+          <div class='flex flex-col flex-1 min-w-0 overflow-hidden'>
+            <span class='text-base'>{@html $conversation.data.config.title}</span>
+            <span class='text-nowrap overflow-hidden text-ellipsis text-xs min-w-0'>
+              {@html Object.values($conversation.data.messages).at(-1)?.content || ''}
+            </span>
+          </div>
         </a>
         <span class='text-xs text-surface-200 flex flex-row items-center'>
-          <SvgIcon icon='person' size='8' color='#ccc'/> <span class='ml-2'>{Object.values($conversation.data.agentProfiles).length}</span>
+          <SvgIcon icon='person' size='8' color='#ccc'/>
+          <span class='ml-2'>{Object.values($conversation.data.agentProfiles).length}</span>
         </span>
       </li>
     {/each}

diff --git a/ui/src/routes/conversations/[id]/+page.svelte b/ui/src/routes/conversations/[id]/+page.svelte
@@ -171,7 +171,9 @@
   <a class='absolute' href="/conversations"><SvgIcon icon='caretLeft' color='white' size='10' /></a>
   {#if conversation}
     <h1 class="flex-1 grow text-center"><a href={`/conversations/${conversationId}/members`}>{@html conversation.data.config.title}</a></h1>
-    <a class='absolute right-5' href="/conversations/{conversation.data.id}/invite"><SvgIcon icon='addPerson' color='white' /></a>
+    {#if conversation.data.privacy === Privacy.Public || isEqual(conversation.data.progenitor, myPubKey)}
+      <a class='absolute right-5' href="/conversations/{conversation.data.id}/invite"><SvgIcon icon='addPerson' color='white' /></a>
+    {/if}
   {/if}
 </Header>
 
@@ -184,7 +186,7 @@
       <h1 class='text-4xl flex-shrink-0'>{@html conversation.data.config.title}</h1>
       <!-- if joining a conversation created by someone else, say still syncing here until thre are at least 2 members -->
       <a href={`/conversations/${conversationId}/members`} class='text-surface-300'>
-        {#if conversation.data.privacy === Privacy.Public}Open{:else}Private{/if} - {@html numMembers } {#if numMembers === 1}Member{:else}Members{/if}
+        {@html numMembers } {#if numMembers === 1}Member{:else}Members{/if}
       </a>
       {#if $processedMessages.length === 0 && isEqual(conversation.data.progenitor, myPubKey)}
         <div class='flex flex-col items-center justify-center h-full w-full'>
@@ -205,18 +207,23 @@
         <div id='message-box' class="flex-1 p-4 flex flex-col-reverse w-full">
           <ul>
             {#each $processedMessages as message (message.hash)}
+              {@const fromMe = message.authorKey === myPubKeyB64}
               {#if message.header}
-                <li class='mt-auto mb-5'>
-                  <div class="text-center text-sm text-secondary-500">{message.header}</div>
+                <li class='mt-auto mb-3'>
+                  <div class="text-center text-xs text-secondary-500">{message.header}</div>
                 </li>
               {/if}
-              <li class='mt-auto mb-5'>
-                <div class='flex items-center'>
+              <li class='mt-auto mb-3 flex {fromMe ? 'justify-end' : 'justify-start'}'>
+                {#if !fromMe}
                   <Avatar agentPubKey={decodeHashFromBase64(message.authorKey)} size='24' showNickname={false} moreClasses='-ml-30'/>
-                  <span class="font-bold ml-3 grow">{@html message.author}</span>
-                  <span class="text-surface-200 text-xs"><Time timestamp={message.timestamp} format="h:mm" /></span>
+                {/if}
+                <div class='flex flex-col mb-2 ml-3 {fromMe && 'opacity-80'}'>
+                  <span class='flex items-baseline {fromMe && 'flex-row-reverse'}'>
+                    <span class="font-bold">{@html fromMe ? "You" : message.author}</span>
+                    <span class="text-surface-200 mx-2 text-xxs"><Time timestamp={message.timestamp} format="h:mma" /></span>
+                  </span>
+                  <div class="font-light {fromMe && 'text-end'}">{@html message.content}</div>
                 </div>
-                <span class="p-2 max-w-xs self-end mb-2 ml-7 font-light">{@html message.content}</span>
               </li>
             {/each}
           </ul>

diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
@@ -10,6 +10,16 @@ export default {
 		'./src/**/*.{html,js,svelte,ts}',
 		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
 	],
+	theme: {
+		extend: {
+			fontSize: {
+				xxs: '0.6rem'
+			},
+			fontFamily: {
+				'sans':['NotoSans', 'ui-sans-serif', 'system-ui']
+			}
+		}
+	},
 	plugins: [
 		forms,
 		skeleton({