pins

2 files changed, 29 insertions, 5 deletions

diff --git a/src/routes/(app)/send/[...text]/+page.server.ts b/src/routes/(app)/send/[...text]/+page.server.ts
index cd259733..81726ad1 100644
--- a/src/routes/(app)/send/[...text]/+page.server.ts
+++ b/src/routes/(app)/send/[...text]/+page.server.ts
@@ -3,13 +3,15 @@ import { auth, fd, get } from "$lib/utils";
 import { fail, redirect } from "@sveltejs/kit";
 
 const limit = 10;
-export async function load({ cookies, params, parent, url }) {
+export async function load({ cookies, depends, params, parent, url }) {
+  depends("contacts");
 	const { user } = await parent();
 	if (!user) redirect(307, "/login");
 	const { text } = params;
 
 	await parse(text, url.host);
 	const contacts = await get(`/contacts/${limit}`, auth(cookies));
+
 	return { contacts };
 }
 
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 84995789..3caf4bc9 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { invalidate } from "$app/navigation";
   import { page } from "$app/stores";
   import { fly } from "svelte/transition";
   import { enhance } from "$app/forms";
@@ -8,17 +9,18 @@
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
   import Spinner from "$comp/Spinner.svelte";
-  import { back, get, fail, focus } from "$lib/utils";
+  import { back, get, post, fail, focus } from "$lib/utils";
 
   let { data = $bindable(), form } = $props();
   data.subject = data.user;
 
-  let { contacts } = $state(data);
+  let { contacts } = $derived(data);
 
+  let all = $state();
   let loaded = $state();
   let loadMore = async () => {
     loaded = true;
-    contacts = await get("/contacts");
+    all = await get("/contacts");
   };
 
   let el = $state(),
@@ -35,6 +37,20 @@
     pasted = true;
   };
 
+  let pin = async (e, { id, pinned }) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (pinned) {
+      await post("/post/pins/delete", { id });
+    } else {
+      await post("/post/pins", { id });
+    }
+
+    if (all) all = await get("/contacts");
+    else invalidate("contacts");
+  };
+
   $effect(() => {
     if (browser && pasted && text) el.click() && (pasted = false);
   });
@@ -116,13 +132,19 @@
         {$t("user.send.contacts")}
       </h1>
       <div>
-        {#each contacts as c, i}
+        {#each all || contacts as c, i}
           <a href={`/pay/${c.username}`} class="contents">
             <div class="flex hover:bg-base-200 p-2">
               <Avatar user={c} size={20} disabled={true} />
               <div class="my-auto text-left">
                 <p class="ml-1 text-lg break-words">{c.username}</p>
               </div>
+              <button class="ml-auto" onclick={(e) => pin(e, c)}>
+                <iconify-icon
+                  icon={c.pinned ? "ph:push-pin-fill" : "ph:push-pin-bold"}
+                  width={32}
+                ></iconify-icon>
+              </button>
             </div>
           </a>
         {/each}