Quick fixes + logo better
This commit is contained in:
AlacrisDevs
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
import { Modal, Logo } from "$lib/components/ui";
|
||||
import { goto } from "$app/navigation";
|
||||
import { Modal, Logo, Badge } from "$lib/components/ui";
|
||||
import { createOrganization, generateSlug } from "$lib/api/organizations";
|
||||
import { toasts } from "$lib/stores/toast.svelte";
|
||||
import type { SupabaseClient } from "@supabase/supabase-js";
|
||||
@@ -10,12 +11,22 @@
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
avatar_url?: string | null;
|
||||
role: string;
|
||||
}
|
||||
|
||||
interface PendingInvite {
|
||||
id: string;
|
||||
role: string;
|
||||
token: string;
|
||||
createdAt: string;
|
||||
org: { id: string; name: string; slug: string };
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
organizations: OrgWithRole[];
|
||||
pendingInvites: PendingInvite[];
|
||||
user: any;
|
||||
};
|
||||
}
|
||||
@@ -29,10 +40,62 @@
|
||||
$effect(() => {
|
||||
organizations = data.organizations;
|
||||
});
|
||||
// svelte-ignore state_referenced_locally
|
||||
let pendingInvites = $state<PendingInvite[]>(data.pendingInvites);
|
||||
$effect(() => {
|
||||
pendingInvites = data.pendingInvites;
|
||||
});
|
||||
let showCreateModal = $state(false);
|
||||
let newOrgName = $state("");
|
||||
let creating = $state(false);
|
||||
|
||||
let acceptingInviteId = $state<string | null>(null);
|
||||
|
||||
async function acceptInvite(invite: PendingInvite) {
|
||||
if (!data.user) return;
|
||||
acceptingInviteId = invite.id;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/accept-invite", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
inviteId: invite.id,
|
||||
orgId: invite.org.id,
|
||||
role: invite.role,
|
||||
}),
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
toasts.error(result.error || "Failed to join organization.");
|
||||
acceptingInviteId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove from pending list and add to orgs
|
||||
pendingInvites = pendingInvites.filter((i) => i.id !== invite.id);
|
||||
if (!result.already_member) {
|
||||
organizations = [
|
||||
...organizations,
|
||||
{
|
||||
id: invite.org.id,
|
||||
name: invite.org.name,
|
||||
slug: invite.org.slug,
|
||||
role: invite.role,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
toasts.success(`Joined ${invite.org.name}!`);
|
||||
acceptingInviteId = null;
|
||||
} catch (e) {
|
||||
toasts.error("Something went wrong. Please try again.");
|
||||
acceptingInviteId = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateOrg() {
|
||||
if (!newOrgName.trim() || creating) return;
|
||||
|
||||
@@ -69,6 +132,27 @@
|
||||
<Logo size="sm" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if pendingInvites.length > 0}
|
||||
<a
|
||||
href="#invites"
|
||||
class="relative p-2 text-light/40 hover:text-white hover:bg-dark/50 rounded-xl transition-colors"
|
||||
title="{pendingInvites.length} pending invite{pendingInvites.length >
|
||||
1
|
||||
? 's'
|
||||
: ''}"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-rounded"
|
||||
style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
|
||||
>notifications</span
|
||||
>
|
||||
<span
|
||||
class="absolute -top-0.5 -right-0.5 w-5 h-5 bg-primary text-background text-[10px] font-bold rounded-full flex items-center justify-center"
|
||||
>
|
||||
{pendingInvites.length}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
<form method="POST" action="/auth/logout">
|
||||
<button
|
||||
type="submit"
|
||||
@@ -81,6 +165,75 @@
|
||||
</header>
|
||||
|
||||
<main class="max-w-5xl mx-auto px-6 py-8">
|
||||
<!-- Pending Invites -->
|
||||
{#if pendingInvites.length > 0}
|
||||
<section id="invites" class="mb-8">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span
|
||||
class="material-symbols-rounded text-primary"
|
||||
style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
|
||||
>mail</span
|
||||
>
|
||||
<h2 class="font-heading text-body text-white">
|
||||
Pending Invitations
|
||||
</h2>
|
||||
<span
|
||||
class="text-[11px] px-2 py-0.5 bg-primary/10 text-primary rounded-lg font-body"
|
||||
>
|
||||
{pendingInvites.length}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"
|
||||
>
|
||||
{#each pendingInvites as invite}
|
||||
<div
|
||||
class="bg-primary/5 border border-primary/20 rounded-2xl p-5 transition-all"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div
|
||||
class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body"
|
||||
>
|
||||
{invite.org.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span
|
||||
class="text-[10px] px-2 py-0.5 bg-primary/10 rounded-lg text-primary capitalize font-body"
|
||||
>{invite.role}</span
|
||||
>
|
||||
</div>
|
||||
<h3
|
||||
class="font-heading text-body-sm text-white mb-1"
|
||||
>
|
||||
{invite.org.name}
|
||||
</h3>
|
||||
<p class="text-[11px] text-light/30 mb-4 font-body">
|
||||
You've been invited to join this organization
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={acceptingInviteId === invite.id}
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary text-background rounded-xl text-body-sm font-body hover:bg-primary-hover transition-colors disabled:opacity-50"
|
||||
onclick={() => acceptInvite(invite)}
|
||||
>
|
||||
<span
|
||||
class="material-symbols-rounded"
|
||||
style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
|
||||
>{acceptingInviteId === invite.id
|
||||
? "hourglass_empty"
|
||||
: "check"}</span
|
||||
>
|
||||
{acceptingInviteId === invite.id
|
||||
? "Joining..."
|
||||
: "Accept"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="font-heading text-h3 text-white">
|
||||
@@ -136,11 +289,19 @@
|
||||
class="bg-dark/30 border border-light/5 hover:border-primary/30 rounded-2xl p-5 transition-all h-full"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div
|
||||
class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body"
|
||||
>
|
||||
{org.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{#if org.avatar_url}
|
||||
<img
|
||||
src={org.avatar_url}
|
||||
alt={org.name}
|
||||
class="w-10 h-10 rounded-xl object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body"
|
||||
>
|
||||
{org.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{/if}
|
||||
<span
|
||||
class="text-[10px] px-2 py-0.5 bg-light/5 rounded-lg text-light/40 capitalize font-body"
|
||||
>{org.role}</span
|
||||
|
||||
Reference in New Issue
Block a user