feat(friends): Allow quick add friend from link

src/lib/components/friends/AddFriendPopup.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Icon, Label, Text } from "$lib/elements"
+    import Button from "$lib/elements/Button.svelte"
+    import { Store } from "$lib/state/Store"
+    import { createEventDispatcher } from "svelte"
+    import { _ } from "svelte-i18n"
+    import ProfilePicture from "../profile/ProfilePicture.svelte"
+    import { Appearance, Shape, Size } from "$lib/enums"
+    import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
+    import type { WarpError } from "$lib/wasm/HandleWarpErrors"
+    import { ToastMessage } from "$lib/state/ui/toast"
+
+    export let friend: string
+    $: user = Store.getUser(friend)
+
+    const dispatcher = createEventDispatcher()
+
+    function close() {
+        dispatcher("close")
+    }
+
+    async function add() {
+        let res = await MultipassStoreInstance.sendFriendRequest(friend)
+        res.fold(
+            (e: WarpError) => {
+                Store.addToastNotification(new ToastMessage("", e, 3, Shape.XMark, Appearance.Error))
+            },
+            () => {
+                Store.addToastNotification(new ToastMessage("", `Your request is making it's way!`, 3, Shape.CheckMark, Appearance.Success))
+            }
+        )
+        close()
+    }
+</script>
+
+<div class="add-friend-popup">
+    <Label hook="label-create-group-name" text={$_("settings.profile.addFriend")} />
+    <div class="user">
+        <ProfilePicture id={$user.key} image={$user.profile.photo.image} noIndicator size={Size.Medium} loading={$user.key === "0x0"} />
+        <div class="username">
+            <Text singleLine class="username">{$user.name}</Text>
+            <Text singleLine class="status">{$user.profile.status_message}</Text>
+        </div>
+    </div>
+    <div class="button-group">
+        <Button text={$_("generic.add")} appearance={Appearance.Default} on:click={add}>
+            <Icon icon={Shape.Plus} />
+        </Button>
+        <Button text={$_("generic.cancel")} appearance={Appearance.Default} on:click={close}>
+            <Icon icon={Shape.NoSymbol} />
+        </Button>
+    </div>
+</div>
+
+<style lang="scss">
+    .add-friend-popup {
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding);
+        border-radius: var(--border-radius);
+        gap: var(--gap);
+        .user {
+            display: flex;
+            width: 100%;
+            gap: var(--gap);
+        }
+        .button-group {
+            justify-content: center;
+            display: flex;
+            gap: var(--gap);
+            margin-top: var(--padding-less);
+        }
+    }
+</style>

src/lib/state/page/PageStates.ts

@@ -0,0 +1,17 @@
+import { writable, type Writable } from "svelte/store"
+
+export enum FriendPage {
+    ALL,
+    ACTIVE,
+    BLOCKED,
+}
+
+export type PageStateStruct = {
+    friends: Writable<FriendPage>
+    addFriend: Writable<string>
+}
+
+export const PageState: PageStateStruct = {
+    friends: writable(FriendPage.ALL),
+    addFriend: writable(""),
+}

src/routes/friends/+page.svelte

@@ -9,6 +9,7 @@
     import Fuse from "fuse.js"
     import Friend from "$lib/components/friends/Friend.svelte"
     import { Store } from "$lib/state/Store"
+    import { FriendPage, PageState, type PageStateStruct } from "$lib/state/page/PageStates"
     import { get } from "svelte/store"
     import { goto } from "$app/navigation"
     import { UIStore } from "$lib/state/ui"
@@ -19,7 +20,7 @@
     import { ToastMessage } from "$lib/state/ui/toast"
     import { CommonInputRules } from "$lib/utils/CommonInputRules"
     import CreateGroup from "$lib/components/group/CreateGroup.svelte"
-    import { onDestroy } from "svelte"
+    import AddFriendPopup from "$lib/components/friends/AddFriendPopup.svelte"
 
     let loading: boolean = false
     $: sidebarOpen = UIStore.state.sidebarOpen
@@ -31,20 +32,8 @@
     let isValidFriendDid: boolean = false
     let newGroup: boolean = false
 
-    let tab: "all" | "active" | "blocked" = "all"
-
-    let unsub = Store.state.pageState.subscribe(s => {
-        function isTab(value: string): value is "all" | "active" | "blocked" {
-            return value === "all" || value === "active" || value === "blocked"
-        }
-        if (isTab(s)) {
-            tab = s
-        }
-    })
-
-    onDestroy(() => {
-        unsub()
-    })
+    $: tab = PageState.friends
+    $: addFriend = PageState.addFriend
 
     function toggleSidebar(): void {
         UIStore.toggleSidebar()
@@ -160,9 +149,25 @@
             await navigator.clipboard.writeText(updatedKey)
         }
     }
+
+    function validDid(did: string) {
+        return did !== get(Store.state.user).key.replace("did:key:", "")
+    }
 </script>
 
 <div id="page">
+    {#if $addFriend && validDid($addFriend)}
+        <Modal
+            on:close={_ => {
+                $addFriend = ""
+            }}>
+            <AddFriendPopup
+                friend={$addFriend}
+                on:close={_ => {
+                    $addFriend = ""
+                }}></AddFriendPopup>
+        </Modal>
+    {/if}
     <Sidebar loading={loading} on:toggle={toggleSidebar} open={$sidebarOpen} activeRoute={Route.Friends}>
         <!--
             <Button hook="button-marketplace" outline appearance={Appearance.Alt} text={$_("market.market")}>
@@ -206,38 +211,38 @@
     <div class="content">
         <Topbar>
             <svelte:fragment slot="controls">
-                {#if tab === "all"}
-                    <Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => (tab = "all")}>
+                {#if $tab === FriendPage.ALL}
+                    <Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => ($tab = FriendPage.ALL)}>
                         <Icon icon={Shape.Users} alt />
                     </Button>
                 {:else}
-                    <Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => (tab = "all")}>
+                    <Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => ($tab = FriendPage.ALL)}>
                         <Icon icon={Shape.Users} />
                     </Button>
                 {/if}
-                {#if tab === "active"}
-                    <Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Primary} text={$_("friends.active")} on:click={_ => (tab = "active")} hideTextOnMobile>
+                {#if $tab === FriendPage.ACTIVE}
+                    <Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Primary} text={$_("friends.active")} on:click={_ => ($tab = FriendPage.ACTIVE)} hideTextOnMobile>
                         <Icon icon={Shape.ArrowsLeftRight} alt />
                     </Button>
                 {:else}
-                    <Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Alt} text={$_("friends.active")} on:click={_ => (tab = "active")} hideTextOnMobile>
+                    <Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Alt} text={$_("friends.active")} on:click={_ => ($tab = FriendPage.ACTIVE)} hideTextOnMobile>
                         <Icon icon={Shape.ArrowsLeftRight} />
                     </Button>
                 {/if}
-                {#if tab === "blocked"}
-                    <Button hook="button-friends-blocked" appearance={Appearance.Primary} text={$_("friends.blocked")} on:click={_ => (tab = "blocked")} hideTextOnMobile>
+                {#if $tab === FriendPage.BLOCKED}
+                    <Button hook="button-friends-blocked" appearance={Appearance.Primary} text={$_("friends.blocked")} on:click={_ => ($tab = FriendPage.BLOCKED)} hideTextOnMobile>
                         <Icon icon={Shape.NoSymbol} alt />
                     </Button>
                 {:else}
-                    <Button hook="button-friends-blocked" appearance={Appearance.Alt} text={$_("friends.blocked")} on:click={_ => (tab = "blocked")} hideTextOnMobile>
+                    <Button hook="button-friends-blocked" appearance={Appearance.Alt} text={$_("friends.blocked")} on:click={_ => ($tab = FriendPage.BLOCKED)} hideTextOnMobile>
                         <Icon icon={Shape.NoSymbol} />
                     </Button>
                 {/if}
             </svelte:fragment>
         </Topbar>
 
         <div class="body">
-            {#if tab === "all"}
+            {#if $tab === FriendPage.ALL}
                 <Label hook="label-add-someone" text={$_("friends.add_someone")} />
                 <div class="section" data-cy="friends-section-all">
                     <Input
@@ -397,7 +402,7 @@
                         {/each}
                     </div>
                 </div>
-            {:else if tab === "active"}
+            {:else if FriendPage.ACTIVE}
                 <div class="section column" data-cy="friends-section-requests">
                     <Label hook="label-outgoing-requests" text={$_("friends.outgoing_requests")} />
                     {#each outgoingRequests as request}
@@ -429,7 +434,7 @@
                         <Text hook="text-no-incoming-requests">{$_("friends.noIncoming")}</Text>
                     {/if}
                 </div>
-            {:else if tab === "blocked"}
+            {:else if $tab === FriendPage.BLOCKED}
                 <div class="section column" data-cy="friends-section-blocked">
                     <Label hook="label-blocked-users" text={$_("friends.blocked_users")} />
                     {#each $blocked as user}

src/routes/friends/add/[user]/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { goto } from "$app/navigation"
+    import { page } from "$app/stores"
+    import { Route } from "$lib/enums"
+    import { PageState } from "$lib/state/page/PageStates"
+    import { onMount } from "svelte"
+
+    let { key } = $page.data
+
+    onMount(() => {
+        PageState.addFriend.set(key)
+        goto(Route.Friends)
+    })
+</script>
+
+<div></div>
+
+<style lang="scss">
+</style>

src/routes/friends/add/[user]/+page.ts

@@ -0,0 +1,5 @@
+export async function load({ params }) {
+    return {
+        key: params.user,
+    }
+}