From 2ac73c35151207f967c9af4d389e5a352d46de79 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Mon, 25 May 2026 20:34:50 +0200
Subject: [PATCH] feat(social): "Legg til som venn"-knapp + clearer used-invite
 copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two small UX fixes on the Profile page:

1. FriendsPanel: incoming-friends list previously had only a
   "Blokker" button. Add a "Legg til som venn"-knapp alongside it
   when the entry isn't already mutual. Shows "(gjensidig)" inline
   for entries where I've already added them back, and hides the
   add button when the incoming user doesn't have a username (rare
   — addFriend goes by username).

2. Invite list: claimed entries now show
   "✓ Mottatt og tatt i bruk av <bruker> · <dato>" instead of the
   "Brukt" badge + separate "av X · Y" line. Clearer wording, same
   data.
---
 frontend/src/components/FriendsPanel.svelte | 28 +++++++++++++++++++--
 frontend/src/components/Profile.svelte      | 11 +++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FriendsPanel.svelte b/frontend/src/components/FriendsPanel.svelte
index 7985f03..1f1cd53 100644
--- a/frontend/src/components/FriendsPanel.svelte
+++ b/frontend/src/components/FriendsPanel.svelte
@@ -88,6 +88,21 @@
     }
   }
 
+  // "Legg til som venn tilbake" — for an incoming entry where I haven't
+  // already added them. Goes through the same addFriend API as the form
+  // above. If the user hasn't set a username (rare — incoming implies they
+  // added someone, which requires THE OTHER PARTY's username, not theirs)
+  // we hide the button instead of erroring.
+  async function addBack(f: FriendEntry) {
+    if (!f.username) return;
+    try {
+      const added = await api.addFriend({ username: f.username });
+      outgoing = [added, ...outgoing.filter((o) => o.user_id !== added.user_id)];
+    } catch {
+      loadError = 'Klarte ikke å legge til venn.';
+    }
+  }
+
   async function block(e: FriendEntry) {
     if (!confirm(`Blokkere ${displayName(e)}? De vil ikke lenger se aktiviteter du deler med venner.`)) return;
     try {
@@ -155,13 +170,22 @@
       <p class="muted">Ingen har lagt deg til ennå.</p>
     {/if}
     {#each incoming as f (f.user_id)}
+      {@const alreadyFriend = outgoing.some((o) => o.user_id === f.user_id)}
       <article class="card" style="margin: 0.4rem 0; padding: 0.5rem 0.75rem;">
-        <div class="row" style="justify-content: space-between;">
+        <div class="row" style="justify-content: space-between; gap: 0.5rem;">
           <span>
             {displayName(f)}
             {#if f.username}<span class="muted">· @{f.username}</span>{/if}
+            {#if alreadyFriend}<span class="muted" style="font-size: 0.85rem;">(gjensidig)</span>{/if}
           </span>
-          <button class="danger" type="button" onclick={() => block(f)}>Blokker</button>
+          <div class="row" style="gap: 0.4rem;">
+            {#if !alreadyFriend && f.username}
+              <button class="primary" type="button" onclick={() => addBack(f)}>
+                Legg til som venn
+              </button>
+            {/if}
+            <button class="danger" type="button" onclick={() => block(f)}>Blokker</button>
+          </div>
         </div>
       </article>
     {/each}
diff --git a/frontend/src/components/Profile.svelte b/frontend/src/components/Profile.svelte
index 30a7f5b..28fee8d 100644
--- a/frontend/src/components/Profile.svelte
+++ b/frontend/src/components/Profile.svelte
@@ -386,10 +386,13 @@
         </div>
         <div class="row" style="margin-top: 0.5rem;">
           {#if inv.claimed_at}
-            <span class="vis-badge semi">Brukt</span>
-            {#if inv.claimed_by_display}
-              <span class="muted">av {inv.claimed_by_display} · {formatDate(inv.claimed_at)}</span>
-            {/if}
+            <span class="muted">
+              {#if inv.claimed_by_display}
+                ✓ Mottatt og tatt i bruk av {inv.claimed_by_display} · {formatDate(inv.claimed_at)}
+              {:else}
+                ✓ Mottatt og tatt i bruk · {formatDate(inv.claimed_at)}
+              {/if}
+            </span>
           {:else}
             <button type="button" onclick={() => copyInviteUrl(inv)}>
               {copiedToken === inv.token ? 'Kopiert!' : 'Kopier lenke'}