chore(wasm): updates wasm + group icon

package.json

@@ -68,6 +68,6 @@
         "uuid": "^9.0.1",
         "vite-plugin-node-polyfills": "^0.21.0",
         "voice-activity-detection": "^0.0.5",
-        "warp-wasm": "1.5.1"
+        "warp-wasm": "^1.6.1"
     }
 }

src/lib/components/group/GroupSettings.svelte

@@ -24,12 +24,13 @@
 
     let unsavedChanges = false
     let shakeSaveControls = false
-    let groupPicture = ""
     let user = get(Store.state.user)
 
     $: isAdmin = $groupChatToBeChanged.creator !== undefined ? $groupChatToBeChanged.creator === user.key : false
     $: canAdd = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.AddParticipants)
-    $: canRename = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.SetGroupName)
+    $: canRemove = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.RemoveParticipants)
+    $: canRename = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupInfo)
+    $: canChangePic = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupImages)
 
     $: users = Store.getUsersLookup(activeChat.users)
 
@@ -74,6 +75,9 @@
         if (propertiesChangedList.membersPermission) {
             RaygunStoreInstance.setGroupPermissions($groupChatToBeChanged.id, $groupChatToBeChanged.settings.permissions)
         }
+        if (propertiesChangedList.pictureChanged && $groupChatToBeChanged.icon) {
+            RaygunStoreInstance.updateConversationPicture($groupChatToBeChanged.id, $groupChatToBeChanged.icon)
+        }
         propertiesChangedList = {
             groupName: false,
             description: false,
@@ -132,14 +136,13 @@
 <div class="settings" data-cy="group-settings">
     <Label hook="group-settings-change-photo-label" text={$_("chat.group.settings.photo")} />
     <div class="profile-picture-container">
-        <ProfilePicture hook="group-settings-profile-picture" noIndicator image={groupPicture} size={Size.Large} />
+        <ProfilePicture hook="group-settings-profile-picture" noIndicator image={$groupChatToBeChanged.icon || ""} size={Size.Large} />
         <FileUploadButton
             icon
-            disabled={!isAdmin}
+            disabled={!canChangePic}
             tooltip={$_("chat.group.settings.photo")}
             on:upload={async picture => {
-                /// TODO(Lucas): It is not implemented in warp yet
-                groupPicture = picture.detail
+                $groupChatToBeChanged.icon = picture.detail
                 propertiesChangedList.pictureChanged = true
             }} />
     </div>
@@ -202,7 +205,7 @@
                     <Text size={Size.Smaller}>{$_("chat.group.kick")}</Text>
                     <Text muted size={Size.Smallest}>{$_("chat.group.kick.description")}</Text>
                 </div>
-                <Button disabled={!isAdmin} appearance={Appearance.Error} on:click={remove_member}>
+                <Button disabled={!canRemove} appearance={Appearance.Error} on:click={remove_member}>
                     <Text size={Size.Smallest}>{$_("chat.group.kick")}</Text>
                 </Button>
             </div>
@@ -219,17 +222,32 @@
                                     togglePermission(GroupPermission.AddParticipants)
                                 }} />
                         </SettingSection>
+                        <SettingSection small hook="settings-section-remove-members" name={$_("chat.group.settings.remove")} description={$_("chat.group.settings.remove.description")}>
+                            <Switch
+                                small
+                                hook="switch-add-members"
+                                on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.RemoveParticipants)}
+                                on:toggle={_ => {
+                                    togglePermission(GroupPermission.RemoveParticipants)
+                                }} />
+                        </SettingSection>
                         <SettingSection small hook="settings-section-change-details" name={$_("chat.group.settings.details")} description={$_("chat.group.settings.details.description")}>
                             <Switch
                                 small
                                 hook="switch-change-details"
-                                on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.SetGroupName)}
+                                on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupInfo)}
                                 on:toggle={_ => {
-                                    togglePermission(GroupPermission.SetGroupName)
+                                    togglePermission(GroupPermission.EditGroupInfo)
                                 }} />
                         </SettingSection>
                         <SettingSection small hook="settings-section-change-photo" name={$_("chat.group.settings.photo")} description={$_("chat.group.settings.photo.description")}>
-                            <Switch small hook="switch-change-photo" on={false} disabled={true} on:toggle={_ => {}} />
+                            <Switch
+                                small
+                                hook="switch-change-photo"
+                                on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupImages)}
+                                on:toggle={_ => {
+                                    togglePermission(GroupPermission.EditGroupImages)
+                                }} />
                         </SettingSection>
                     </div>
                 </div>

src/lib/components/index.ts

@@ -4,6 +4,7 @@ export { default as ChatPreview } from "$lib/components/messaging/ChatPreview.sv
 export { default as CoinBalance } from "$lib/components/CoinBalance.svelte"
 export { default as ColorSwatch } from "$lib/components/ui/ColorSwatch.svelte"
 export { default as Container } from "$lib/components/ui/Container.svelte"
+export { default as ChatIcon } from "$lib/components/ui/ChatIcon.svelte"
 export { default as Conversation } from "$lib/components/messaging/Conversation.svelte"
 export { default as Key } from "$lib/components/settings/Key.svelte"
 export { default as Meter } from "$lib/components/settings/Meter.svelte"

src/lib/components/messaging/ChatPreview.svelte

@@ -3,7 +3,7 @@
     import { Appearance, ChatType, PaymentRequestsEnum, Route, Shape, Size, Status } from "$lib/enums"
     import type { Chat } from "$lib/types"
     import { Text, Loader, Button, Icon } from "$lib/elements"
-    import { ProfilePicture } from "$lib/components"
+    import { ChatIcon, ProfilePicture } from "$lib/components"
     import { createEventDispatcher, onMount } from "svelte"
     import ProfilePictureMany from "../profile/ProfilePictureMany.svelte"
     import { Store } from "$lib/state/Store"
@@ -129,19 +129,7 @@
         }
         goto(Route.Chat)
     }}>
-    {#if chat.kind === ChatType.DirectMessage}
-        <ProfilePicture
-            hook="chat-preview-picture"
-            id={$users[1].key}
-            typing={chat.typing_indicator.size > 0 && chat.typing_indicator.users()[0] === $users[1].key}
-            image={directChatPhoto}
-            status={chatStatus}
-            size={Size.Medium}
-            loading={loading}
-            frame={$users[1].profile.photo.frame} />
-    {:else}
-        <ProfilePictureMany users={$users} />
-    {/if}
+    <ChatIcon chat={chat} profileHook={"chat-preview-picture"} loading={loading} />
     <div class="content">
         <div class="heading">
             <Text hook="chat-preview-name" class="chat-user min-text" singleLine loading={loading}>

src/lib/components/ui/ChatFilter.svelte

@@ -10,6 +10,7 @@
     import { RaygunStoreInstance } from "$lib/wasm/RaygunStore"
     import { goto } from "$app/navigation"
     import StoreResolver from "../utils/StoreResolver.svelte"
+    import ChatIcon from "./ChatIcon.svelte"
 
     export let filter: string
 
@@ -109,18 +110,7 @@
                 <div class="searchbar-entry searchbar-entry-group">
                     <div class="group" role="none" on:click={() => select_chat(chat, undefined)}>
                         <div class="profile-picture-wrap">
-                            {#if chat.users.length === 2}
-                                <ProfilePicture
-                                    typing={chat.typing_indicator.size > 0}
-                                    image={$userCache[chat.users[0]].profile.photo.image}
-                                    status={$userCache[chat.users[0]].profile.status}
-                                    size={Size.Medium}
-                                    loading={loading}
-                                    id={$userCache[chat.users[0]].key}
-                                    frame={$userCache[chat.users[0]].profile.photo.frame} />
-                            {:else}
-                                <ProfilePictureMany users={chat.users.map(u => $userCache[u])} />
-                            {/if}
+                            <ChatIcon chat={chat} profileHook={"chat-filter-picture"} loading={loading} />
                         </div>
                         {#if name.startsWith(filter.toLocaleLowerCase())}
                             <span class="entry-title">

src/lib/components/ui/ChatIcon.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { ChatType, Size } from "$lib/enums"
+    import type { Chat } from "$lib/types"
+    import { ProfilePicture, ProfilePictureMany } from "$lib/components"
+    import { Store } from "$lib/state/Store"
+
+    export let chat: Chat
+    export let loading: boolean = false
+    export let profileHook: string = ""
+    export let size: Size = Size.Medium
+    export let noIndicator: boolean = false
+    export let forceSize: boolean = false
+
+    $: users = Store.getUsersLookup(chat.users)
+</script>
+
+{#if chat.icon}
+    <ProfilePicture hook={profileHook} typing={chat.typing_indicator.size > 0} image={chat.icon} size={Size.Medium} loading={loading} />
+{:else if chat.kind === ChatType.DirectMessage}
+    <ProfilePicture
+        hook={profileHook}
+        typing={chat.typing_indicator.size > 0}
+        id={$users[chat.users[1]]?.key}
+        image={$users[chat.users[1]]?.profile.photo.image}
+        frame={$users[chat.users[1]]?.profile.photo.frame}
+        status={$users[chat.users[1]]?.profile.status}
+        size={size}
+        noIndicator={noIndicator}
+        loading={loading} />
+{:else}
+    <ProfilePictureMany users={Object.values($users)} size={size} forceSize={forceSize} on:click />
+{/if}

src/lib/lang/en.json

@@ -110,6 +110,8 @@
                 "description.placeholder": "Group description goes here",
                 "add": "Add Members",
                 "add.description": "Allows user to add members to the group",
+                "remove": "Remove Members",
+                "remove.description": "Allows user to add remove from the group",
                 "edit": "Edit Members",
                 "details": "Change Details",
                 "details.description": "Allows user to change the name and MOTD of the group",

src/lib/layouts/Slimbar.svelte

@@ -8,7 +8,7 @@
     import { slide } from "svelte/transition"
     import { animationDuration } from "$lib/globals/animations"
     import { Store } from "$lib/state/Store"
-    import { ProfilePicture, ProfilePictureMany } from "$lib/components"
+    import { ChatIcon, ProfilePicture, ProfilePictureMany } from "$lib/components"
     import { Label } from "$lib/elements"
     import { goto } from "$app/navigation"
     import CommunityIcon from "$lib/components/community/icon/CommunityIcon.svelte"
@@ -66,11 +66,7 @@
                             }
                             goto(Route.Chat)
                         }}>
-                        {#if favorite.kind === ChatType.DirectMessage}
-                            <ProfilePicture hook="favorite-profile-picture" id={resolved[1]?.key} typing={favorite.typing_indicator.size > 0} image={resolved[1]?.profile.photo.image} status={resolved[1].profile.status} size={Size.Medium} />
-                        {:else}
-                            <ProfilePictureMany users={resolved} />
-                        {/if}
+                        <ChatIcon chat={favorite} profileHook={"favorite-profile-picture"} />
                     </div>
                 </StoreResolver>
             {/each}

src/lib/types/index.ts

@@ -176,6 +176,8 @@ export type Chat = {
     last_message_id: string
     last_message_at: Date
     last_message_preview: string
+    icon?: string
+    banner?: string
 }
 
 const typingDuration = 5

src/lib/wasm/ConstellationStore.ts

@@ -319,9 +319,17 @@ class ConstellationStore {
     }
 }
 
-export function imageFromData(data: any[], prefix: string, kind: string) {
-    let hrefData = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ""))
-    return `data:${prefix}/${kind};base64, ${hrefData}`
+export function imageFromData(data: Uint8Array, file_type: wasm.FileType) {
+    let mime = "application/octet-stream"
+    if (file_type !== "Generic") {
+        mime = file_type.Mime
+    }
+    return imageFromMime(data, mime)
+}
+
+export function imageFromMime(data: Uint8Array, mime: string) {
+    let hrefData = btoa(data.reduce((data, byte) => data + String.fromCharCode(byte), ""))
+    return `data:${mime};base64, ${hrefData}`
 }
 
 export const ConstellationStoreInstance = new ConstellationStore(WarpStore.warp.constellation)