139 lines
8.7 KiB
JavaScript
139 lines
8.7 KiB
JavaScript
import { e as escape_html, a as ensure_array_like, b as attr, c as attr_class, s as stringify, d as derived } from "../../../../chunks/index3.js";
|
||
import "@sveltejs/kit/internal";
|
||
import "../../../../chunks/url.js";
|
||
import "../../../../chunks/utils.js";
|
||
import "@sveltejs/kit/internal/server";
|
||
import "../../../../chunks/root.js";
|
||
import "../../../../chunks/exports.js";
|
||
import "../../../../chunks/state.svelte.js";
|
||
function _page($$renderer, $$props) {
|
||
$$renderer.component(($$renderer2) => {
|
||
let { data } = $$props;
|
||
let expandedTeam = null;
|
||
let addingMemberTo = null;
|
||
let memberUsername = "";
|
||
const myTeams = derived(() => data.teams.filter((t) => t.members.some((m) => m.userId === data.userId)));
|
||
const otherTeams = derived(() => data.teams.filter((t) => !t.members.some((m) => m.userId === data.userId)));
|
||
function isOwner(t) {
|
||
return t.ownerId === data.userId;
|
||
}
|
||
$$renderer2.push(`<div class="mx-auto max-w-4xl"><div class="flex items-center justify-between"><div><h1 class="text-2xl font-700 tracking-tight">Teams</h1> <p class="mt-1 text-sm text-text-secondary">${escape_html(data.teams.length)} team${escape_html(data.teams.length !== 1 ? "s" : "")}</p></div> <button class="rounded-md bg-accent px-4 py-2 text-sm font-600 text-surface-900 transition-colors hover:bg-accent-hover">${escape_html("New Team")}</button></div> `);
|
||
{
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--> `);
|
||
{
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--> `);
|
||
if (myTeams().length > 0) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<div class="mt-6"><h2 class="text-sm font-600 text-text-secondary">My Teams</h2> <div class="mt-3 flex flex-col gap-3"><!--[-->`);
|
||
const each_array = ensure_array_like(myTeams());
|
||
for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
|
||
let t = each_array[$$index_1];
|
||
$$renderer2.push(`<div class="rounded-lg border border-border bg-surface-800 transition-colors"><button class="flex w-full items-center gap-4 p-4 text-left transition-colors hover:bg-surface-700">`);
|
||
if (t.avatarUrl) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<img${attr("src", t.avatarUrl)} alt="" class="h-10 w-10 rounded-full"/>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
$$renderer2.push(`<div class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-600 text-sm font-700 text-text-secondary">${escape_html(t.name.charAt(0).toUpperCase())}</div>`);
|
||
}
|
||
$$renderer2.push(`<!--]--> <div class="flex-1"><div class="flex items-center gap-2"><span class="text-sm font-600">${escape_html(t.name)}</span> `);
|
||
if (t.isPersonal) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<span class="rounded bg-surface-600 px-1.5 py-0.5 text-[10px] font-500 text-text-secondary">solo</span>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--></div> <p class="mt-0.5 text-xs text-text-secondary">${escape_html(t.members.length)} member${escape_html(t.members.length !== 1 ? "s" : "")}</p></div> <span${attr_class(`text-sm text-text-secondary transition-transform ${stringify(expandedTeam === t.id ? "rotate-90" : "")}`)}>›</span></button> `);
|
||
if (expandedTeam === t.id) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<div class="border-t border-border px-4 pb-4 pt-3"><div class="flex flex-col gap-2"><!--[-->`);
|
||
const each_array_1 = ensure_array_like(t.members);
|
||
for (let $$index = 0, $$length2 = each_array_1.length; $$index < $$length2; $$index++) {
|
||
let member = each_array_1[$$index];
|
||
$$renderer2.push(`<div class="flex items-center gap-3 rounded-md bg-surface-700 px-3 py-2">`);
|
||
if (member.user?.image) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<img${attr("src", member.user.image)} alt="" class="h-6 w-6 rounded-full"/>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
$$renderer2.push(`<div class="h-6 w-6 rounded-full bg-surface-600"></div>`);
|
||
}
|
||
$$renderer2.push(`<!--]--> <span class="flex-1 text-sm">${escape_html(member.user?.name ?? "Unknown")}</span> <span class="text-xs text-text-secondary">${escape_html(member.role)}</span> `);
|
||
if (isOwner(t) && member.userId !== data.userId) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<form method="post" action="?/removeMember"><input type="hidden" name="memberId"${attr("value", member.id)}/> <button type="submit" class="text-xs text-red-400 opacity-50 transition-opacity hover:opacity-100">×</button></form>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--></div>`);
|
||
}
|
||
$$renderer2.push(`<!--]--></div> `);
|
||
if (isOwner(t) && !t.isPersonal) {
|
||
$$renderer2.push("<!--[-->");
|
||
if (addingMemberTo === t.id) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<form method="post" action="?/addMember" class="mt-3 flex gap-2"><input type="hidden" name="teamId"${attr("value", t.id)}/> <input type="text" name="username"${attr("value", memberUsername)} placeholder="osu! username" required="" class="flex-1 rounded-md border border-border bg-surface-600 px-3 py-1.5 text-sm text-text-primary placeholder:text-text-secondary/50 focus:border-accent focus:outline-none"/> <button type="submit" class="rounded-md bg-accent px-3 py-1.5 text-xs font-600 text-surface-900 hover:bg-accent-hover">Add</button> <button type="button" class="rounded-md border border-border px-3 py-1.5 text-xs text-text-secondary hover:bg-surface-600">Cancel</button></form>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
$$renderer2.push(`<button class="mt-3 w-full rounded-md border border-dashed border-border py-2 text-xs text-text-secondary transition-colors hover:border-accent/40 hover:text-accent">+ Add Member</button>`);
|
||
}
|
||
$$renderer2.push(`<!--]-->`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--> `);
|
||
if (isOwner(t) && !t.isPersonal) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<form method="post" action="?/deleteTeam"><input type="hidden" name="teamId"${attr("value", t.id)}/> <button type="submit" class="mt-3 text-xs text-red-400 opacity-50 transition-opacity hover:opacity-100">Delete team</button></form>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--></div>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--></div>`);
|
||
}
|
||
$$renderer2.push(`<!--]--></div></div>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--> `);
|
||
if (otherTeams().length > 0) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<div class="mt-6"><h2 class="text-sm font-600 text-text-secondary">Other Teams</h2> <div class="mt-3 flex flex-col gap-2"><!--[-->`);
|
||
const each_array_2 = ensure_array_like(otherTeams());
|
||
for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
|
||
let t = each_array_2[$$index_2];
|
||
$$renderer2.push(`<div class="flex items-center gap-4 rounded-lg border border-border bg-surface-800 p-3">`);
|
||
if (t.avatarUrl) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<img${attr("src", t.avatarUrl)} alt="" class="h-8 w-8 rounded-full"/>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
$$renderer2.push(`<div class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary">${escape_html(t.name.charAt(0).toUpperCase())}</div>`);
|
||
}
|
||
$$renderer2.push(`<!--]--> <div class="flex-1"><span class="text-sm font-600">${escape_html(t.name)}</span> <p class="text-xs text-text-secondary">${escape_html(t.members.length)} member${escape_html(t.members.length !== 1 ? "s" : "")}</p></div></div>`);
|
||
}
|
||
$$renderer2.push(`<!--]--></div></div>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--> `);
|
||
if (data.teams.length === 0) {
|
||
$$renderer2.push("<!--[-->");
|
||
$$renderer2.push(`<div class="mt-6 rounded-lg border border-dashed border-border py-12 text-center"><p class="text-sm text-text-secondary">No teams yet. Your personal team is created when you sign in.</p></div>`);
|
||
} else {
|
||
$$renderer2.push("<!--[!-->");
|
||
}
|
||
$$renderer2.push(`<!--]--></div>`);
|
||
});
|
||
}
|
||
export {
|
||
_page as default
|
||
};
|