olemd/vinterliste
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

feat(social): "Legg til som venn"-knapp + clearer used-invite copy

Browse source 
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.
This commit is contained in:
Ole-Morten Duesund 2026-05-25 20:34:50 +02:00
commit 2ac73c3515
2 changed files with 33 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/components/FriendsPanel.svelte
View file

@ -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}

11
frontend/src/components/Profile.svelte
View file

@ -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'}