feat(org): add celebration confetti when joining or creating organization

Add a celebratory experience when users join or create an organization:
- Add canvas-confetti dependency for visual effects
- Store organization name in localStorage after successful join/create
- Display celebration dialog with confetti animation on ProfilePage
- Clear the celebration flag after showing to prevent repeat displays
This commit is contained in:
2026-04-21 17:11:05 +09:30
parent 5fc24b7a42
commit 78ac65169e
5 changed files with 73 additions and 5 deletions
+7 -4
View File
@@ -99,11 +99,14 @@ export default function OrgSetupPage() {
setOrgSlug(value.toLowerCase().replace(/[^a-z0-9-]/g, ""));
};
const done = async () => {
const done = async (orgName?: string) => {
await refreshUser();
await checkOrgAdmin();
queryClient.invalidateQueries({ queryKey: ['organizations'] });
navigate("/profile", { replace: true });
if (orgName) {
localStorage.setItem('justJoinedOrg', orgName);
}
navigate('/profile', { replace: true });
};
// ── Accept an invite ───────────────────────────────────────────────────────
@@ -113,7 +116,7 @@ export default function OrgSetupPage() {
try {
const result = await api.invites.accept(invite.token);
if (result.token) tokenManager.setToken(result.token, result.expires_at ?? null);
await done();
await done(invite.organization.name);
} catch (err) {
setJoinError(err instanceof ApiError ? err.message : "Failed to join organisation. Please try again.");
setJoiningToken(null);
@@ -129,7 +132,7 @@ export default function OrgSetupPage() {
setIsCreating(true);
try {
await api.organizations.create(orgName.trim(), orgSlug.trim());
await done();
await done(orgName.trim());
} catch (err) {
setCreateError(err instanceof ApiError ? err.message : "Failed to create organisation. Please try again.");
} finally {