Merge remote-tracking branch 'origin/dev' into release-script

CHANGELOG.md

@@ -6,6 +6,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## [0.6.0-beta] - 2024-09-04
+
+### Added
+- New confirmation flow when creating a contact. Immediately add a 1:1 conversation with the new contact and go straight there, with a notice that they need to "confirm" the connection, and a button to send them the invite link.
+- Ability to click on links in messages to open them in external browser
+- Add basic search to conversation list, only matches conversation titles right now
+- Translations for German, Spanish, French, Italian, Bulgarian, Norwegian, Romanian, Danish, Swedish, Slovak
+- Many more small UI improvements and fixes
+
+### Fixed
+- Copying and pasting invite codes in Tauri android
+- Make sure mobile keyboard never covers content
+- Allow for scrolling long member list for conversation
+- Correctly sanitize html in message content, allowing for safe tags
+
 ## [0.5.3-beta] - 2024-08-23
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay",
-  "version": "0.5.3-beta",
+  "version": "0.6.0-beta",
   "private": true,
   "workspaces": [
     "ui"

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
   "productName": "relay",
-  "version": "0.5.3-beta",
+  "version": "0.6.0-beta",
   "identifier": "org.holochain.relay",
   "build": {
     "beforeBuildCommand": "npm run build -w ui",

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.5.3-beta",
+  "version": "0.6.0-beta",
   "private": true,
   "scripts": {
     "start": "vite --clearScreen false",

ui/src/routes/account/+page.svelte

@@ -47,7 +47,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => history.back()}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></button>
+  <button class='text-4xl pr-5' on:click={() => history.back()}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></button>
 </Header>
 
 {#if $prof && $prof.status === 'complete' && $prof.value}

ui/src/routes/contacts/[id]/+page.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => goto('/create')}>
+  <button class='text-4xl pr-5' on:click={() => goto('/create')}>
     <SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' />
   </button>
 </Header>

ui/src/routes/contacts/new/+page.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => goto('/create')}>
+  <button class='absolute z-10 text-4xl pr-5' on:click={() => goto('/create')}>
     <SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' />
   </button>
   <h1 class="flex-1 text-center">{$t('contacts.create_new_contact')}</h1>

ui/src/routes/conversations/[id]/+page.svelte

@@ -105,14 +105,11 @@
     }
   });
 
-  onDestroy(()=>{
+  // Cleanup
+  onDestroy(() => {
     if (conversation) {
       conversation.setStatus('closed')
     }
-  })
-
-  // Cleanup the subscription
-  onDestroy(() => {
     unsubscribe && unsubscribe();
     clearTimeout(agentTimeout);
     clearTimeout(configTimeout);
@@ -239,18 +236,18 @@
 </script>
 
 <Header>
-  <a class='absolute' href="/conversations"><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></a>
+  <a class='pr-5' href="/conversations"><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></a>
   {#if conversation}
     <h1 class="flex-1 grow text-center">
-      <a href={`/conversations/${conversationId}/details`} class='flex flex-row items-center justify-center'>
+      <a href={`/conversations/${conversationId}/details`} class='pl-5 flex flex-row items-center justify-center'>
         {conversation.title}
         <button class='ml-2' on:click={() => goto(`/conversations/${conversationId}/details`)}>
           <SvgIcon icon='gear' size='18' color={$modeCurrent ? '%232e2e2e' : 'white'} />
         </button>
       </a>
     </h1>
     {#if conversation.data.privacy === Privacy.Public || encodeHashToBase64(conversation.data.progenitor) === myPubKeyB64}
-      <a class='absolute right-5' href={`/conversations/${conversation.data.id}/${conversation.data.privacy === Privacy.Public ? 'details' : 'invite'}`}>
+      <a class='pl-5' href={`/conversations/${conversation.data.id}/${conversation.data.privacy === Privacy.Public ? 'details' : 'invite'}`}>
         <SvgIcon icon='addPerson' size='24' color={$modeCurrent ? '%232e2e2e' : 'white'} />
       </a>
     {/if}
@@ -262,6 +259,10 @@
     <div class='overflow-y-auto flex flex-col grow items-center w-full pt-10' bind:this={conversationContainer} id='message-container'>
       {#if conversation.privacy === Privacy.Private}
         <div class='flex gap-4 items-center justify-center'>
+          {#if encodeHashToBase64(conversation.data.progenitor) !== myPubKeyB64 && numMembers === 1}
+            <!-- When you join a private conversation and it has not synced yet -->
+            <SvgIcon icon='spinner' size='44' color={$modeCurrent ? '%232e2e2e' : 'white'} moreClasses='mb-5' />
+          {/if}
           {#each conversation.allMembers.slice(0, 2) as contact, i}
             {#if contact}
               <Avatar image={contact.avatar} agentPubKey={contact.publicKeyB64} size={120} moreClasses='mb-5' />
@@ -281,7 +282,7 @@
       <a href={`/conversations/${conversationId}/details`} class='text-sm'>
         {$tAny('conversations.num_members', { count: numMembers })}
       </a>
-      {#if $processedMessages.length === 0 && encodeHashToBase64(conversation.data.progenitor) === myPubKeyB64 && conversation.memberList().length === 0}
+      {#if $processedMessages.length === 0 && encodeHashToBase64(conversation.data.progenitor) === myPubKeyB64 && numMembers === 1}
         <!-- No messages yet, no one has joined, and this is a conversation I created. Display a helpful message to invite others -->
         <div class='flex flex-col items-center justify-center h-full w-full'>
           <img src={$modeCurrent ? '/clear-skies-gray.png' : '/clear-skies-white.png'} alt='No contacts' class='w-32 h-32 mb-4 mt-4' />

ui/src/routes/conversations/[id]/details/+page.svelte

@@ -50,7 +50,7 @@
 </script>
 
 <Header>
-  <a class='absolute' href={`/conversations/${conversationId}`}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></a>
+  <a class='absolute pr-5 z-10' href={`/conversations/${conversationId}`}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></a>
   {#if conversation}
     <h1 class="flex-1 grow text-center">{#if conversation.data.privacy === Privacy.Public}{$t('conversations.group_details')}{:else}{conversation.title}{/if}</h1>
     {#if conversation.data.privacy === Privacy.Private && encodeHashToBase64(conversation.data.progenitor) === relayStore.client.myPubKeyB64}

ui/src/routes/conversations/[id]/invite/+page.svelte

@@ -57,7 +57,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => history.back()}>
+  <button class='text-4xl pr-5 absolute z-10' on:click={() => history.back()}>
     <SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' />
   </button>
   <h1 class="flex-1 text-center">{$tAny('conversations.add_people', { public: conversation && conversation.data.privacy === Privacy.Public })}</h1>

ui/src/routes/conversations/join/+page.svelte

@@ -46,7 +46,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => history.back()}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></button>
+  <button class='text-4xl pr-5 absolute z-10' on:click={() => history.back()}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></button>
   <h1 class="flex-1 text-center">{$t('conversations.join_conversation')}</h1>
 </Header>
 

ui/src/routes/conversations/new/+page.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => history.back()}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></button>
+  <button class='text-4xl pr-5 absolute z-10' on:click={() => history.back()}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></button>
   <h1 class="flex-1 text-center">{$t('common.new_group')}</h1>
 </Header>
 
@@ -65,6 +65,9 @@
 
 <footer>
   <Button moreClasses='w-72 justify-center variant-filled-tertiary' onClick={(e) => { createConversation(e, Privacy.Public)}} disabled={!valid || pendingCreate}>
+    {#if pendingCreate}
+      <SvgIcon icon='spinner' size='18' color={$modeCurrent ? '%232e2e2e' : 'white'} />
+    {/if}
     <strong class='ml-2'>{$t('conversations.create_group')}</strong>
   </Button>
 </footer>

ui/src/routes/create/+page.svelte

@@ -72,7 +72,7 @@
 </script>
 
 <Header>
-  <button class='text-4xl mr-5 absolute' on:click={() => goto('/welcome')}>
+  <button class='text-4xl pr-5 absolute z-10' on:click={() => goto('/welcome')}>
     <SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' />
   </button>
 

ui/src/store/RelayClient.ts

@@ -104,7 +104,7 @@ export class RelayClient {
 
   async joinConversation(invitation: Invitation) : Promise<ConversationCellAndConfig> {
     // we don't have the image at join time, it get's loaded later
-    return this._createConversation(invitation.created, invitation.conversationName, "", invitation.privacy, invitation.progenitor, invitation.proof, invitation.networkSeed)
+    return this._createConversation(invitation.created, invitation.title, "", invitation.privacy, invitation.progenitor, invitation.proof, invitation.networkSeed)
   }
 
   async _createConversation(created: number, title: string, image: string, privacy: Privacy, progenitor: AgentPubKey, membrane_proof: MembraneProof|undefined, networkSeed: string|undefined) : Promise<ConversationCellAndConfig> {