103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { useSeoMeta } from '@unhead/react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ArrowLeft, HeartHandshake, Lock, MessagesSquare, UserPlus } from 'lucide-react';
|
|
import { CordnNativePanel } from '@/components/crew/CordnNativePanel';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { isAdminPubkey } from '@/lib/admins';
|
|
import { COMMUNITY_BOT_PUBKEY, COMMUNITY_ROOM } from '@/lib/cordn/community';
|
|
import { isNativePlatform } from '@/lib/platform';
|
|
|
|
/**
|
|
* Public, app-wide Cordn room for questions and feedback. Unlike a crew room it
|
|
* has no crew membership gate; the coordinator only carries ciphertext, and an
|
|
* admin or the community bot approves each new device.
|
|
*/
|
|
export default function CommunityPage() {
|
|
const { t } = useTranslation();
|
|
const { user } = useCurrentUser();
|
|
const canManage = isAdminPubkey(user?.pubkey);
|
|
const [pendingRequests, setPendingRequests] = useState(0);
|
|
|
|
const inviteUrl = useMemo(() => {
|
|
const origin = isNativePlatform() ? 'https://skate-spots.org' : window.location.origin;
|
|
return `${origin}/#/community`;
|
|
}, []);
|
|
|
|
useSeoMeta({
|
|
title: t('communityUi.seoTitle'),
|
|
description: t('communityUi.seoDescription'),
|
|
});
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-2xl px-4 py-6">
|
|
<Button asChild variant="ghost" size="sm" className="mb-4 -ml-2 gap-1.5 text-gray-400">
|
|
<Link to="/">
|
|
<ArrowLeft className="h-4 w-4" /> {t('common.back')}
|
|
</Link>
|
|
</Button>
|
|
|
|
<div className="mb-5">
|
|
<div className="mb-2 flex items-center gap-2 text-[#ccff00]">
|
|
<MessagesSquare className="h-5 w-5" />
|
|
<span className="text-[10px] font-black uppercase tracking-widest">
|
|
{t('communityUi.eyebrow')}
|
|
</span>
|
|
</div>
|
|
<h1 className="text-4xl font-black uppercase leading-none text-white md:text-5xl">
|
|
{t('communityUi.heading')}
|
|
</h1>
|
|
<p className="mt-2 text-sm text-gray-400">{t('communityUi.subtitle')}</p>
|
|
</div>
|
|
|
|
<Card className="mb-4 border-white/10 bg-black/40">
|
|
<CardContent className="flex items-start gap-3 py-3">
|
|
<Lock className="mt-0.5 h-4 w-4 shrink-0 text-teal-400" />
|
|
<p className="text-xs text-gray-400">{t('communityUi.howItWorks')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{canManage && pendingRequests > 0 && (
|
|
<Card className="mb-4 border-amber-500/30 bg-amber-500/[0.06]" aria-live="polite">
|
|
<CardContent className="flex items-start gap-3 py-3">
|
|
<UserPlus className="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-bold text-amber-200">
|
|
{t('communityUi.pendingRequests', { count: pendingRequests })}
|
|
</p>
|
|
<p className="mt-0.5 text-xs text-amber-200/70">
|
|
{t('communityUi.pendingRequestsDesc')}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => document.getElementById('community-requests')?.scrollIntoView({ behavior: 'smooth', block: 'center' })}
|
|
className="mt-1.5 text-xs font-bold text-amber-200 underline underline-offset-2 hover:text-amber-100"
|
|
>
|
|
{t('cordnUi.checkRequests')}
|
|
</button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<CordnNativePanel
|
|
crew={COMMUNITY_ROOM}
|
|
canManage={canManage}
|
|
canCreate={false}
|
|
isMember
|
|
scope="community"
|
|
inviteUrl={inviteUrl}
|
|
botPubkey={COMMUNITY_BOT_PUBKEY || undefined}
|
|
onRequestsChange={setPendingRequests}
|
|
/>
|
|
|
|
<div className="mt-5 flex items-center justify-center gap-2 text-xs text-gray-500">
|
|
<HeartHandshake className="h-4 w-4 text-[#ccff00]/70" />
|
|
<span>{t('communityUi.feedbackNote')}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|