feat: amas page

.env.private.example

@@ -3,6 +3,9 @@ NODE_ENV=dev # obviously, set to prod in prod.
 ENCRYPTION_KEY=boop # generate using node -e "console.log(require('crypto').randomBytes(32).toString('base64'));"
 OAUTH_DISCORD_CLIENT_SECRET=73tI-EaLVgtkrcgpBawzmOfdNpY_4ME7
 
+# don't touch. overwrites the one in .env.public, which prisma reads
+DATABASE_URL=postgres://chatsift:admin@postgres:5432/chatsift
+
 LOCAL_DATABASE_PORT=5432
 LOCAL_DOZZLE_PORT=8080
 

.env.public

@@ -1,7 +1,7 @@
 ROOT_DOMAIN=automoderator.app
 ADMINS=223703707118731264
 
-DATABASE_URL=postgres://chatsift:admin@postgres:5432/chatsift
+DATABASE_URL=postgres://chatsift:admin@127.0.0.1:5432/chatsift
 REDIS_URL=redis://redis:6379
 
 API_PORT=9876

apps/website/package.json

@@ -13,6 +13,7 @@
 	},
 	"dependencies": {
 		"@chatsift/core": "workspace:^",
+		"@chatsift/discord-utils": "workspace:^",
 		"@radix-ui/react-avatar": "^1.1.10",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-navigation-menu": "^1.2.14",

apps/website/src/app/dashboard/[id]/ama/amas/_components/AMASessionCard.tsx

@@ -0,0 +1,31 @@
+import type { AMASessionWithCount } from '@chatsift/api';
+import Link from 'next/link';
+
+interface AMASessionCardProps {
+	readonly data: AMASessionWithCount;
+}
+
+export function AMASessionCard({ data }: AMASessionCardProps) {
+	return (
+		<Link
+			className="flex h-36 w-[80vw] flex-col gap-3 rounded-lg border border-on-secondary bg-card p-4 hover:border-misc-accent dark:border-on-secondary-dark dark:bg-card-dark md:w-52"
+			href={`/dashboard/${data.guildId}/ama/amas/${data.id}`}
+		>
+			<div className="flex flex-col gap-1">
+				<h3 className="overflow-hidden overflow-ellipsis whitespace-nowrap text-lg font-medium text-primary dark:text-primary-dark">
+					{data.title}
+				</h3>
+				<p className="text-sm text-secondary dark:text-secondary-dark">
+					{data.questionCount} {data.questionCount === 1 ? 'question' : 'questions'}
+				</p>
+			</div>
+			<div className="mt-auto flex items-center gap-2">
+				<span
+					className={`rounded px-2 py-1 text-xs font-medium ${data.ended ? 'text-misc-danger' : 'text-misc-accent'}`}
+				>
+					{data.ended ? 'Ended' : 'Active'}
+				</span>
+			</div>
+		</Link>
+	);
+}

apps/website/src/app/dashboard/[id]/ama/amas/_components/AMASessionsList.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useParams, useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
+import { AMASessionCard } from './AMASessionCard';
+import { CreateAMACard } from './CreateAMACard';
+import { client } from '@/data/client';
+
+export function AMASessionsList() {
+	const params = useParams<{ id: string }>();
+	const { data: sessions } = client.guilds.ama.useAMAs(params.id, { include_ended: 'false' });
+	const searchParams = useSearchParams();
+
+	const searchQuery = searchParams.get('search') ?? '';
+
+	const filtered = useMemo(() => {
+		if (!sessions?.length) {
+			return [];
+		}
+
+		const lower = searchQuery.toLowerCase();
+		return sessions.filter((session) => session.title.toLowerCase().includes(lower));
+	}, [sessions, searchQuery]);
+
+	return (
+		<ul className="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
+			<li>
+				<CreateAMACard />
+			</li>
+			{filtered.map((session) => (
+				<li key={session.id}>
+					<AMASessionCard data={session} />
+				</li>
+			))}
+		</ul>
+	);
+}

apps/website/src/app/dashboard/[id]/ama/amas/_components/CreateAMACard.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { SvgPlus } from '@/components/icons/SvgPlus';
+
+export function CreateAMACard() {
+	const params = useParams<{ id: string }>();
+
+	return (
+		<Link
+			className="flex h-36 w-[80vw] flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-on-secondary bg-card p-4 hover:border-misc-accent dark:border-on-secondary-dark dark:bg-card-dark md:w-52"
+			href={`/dashboard/${params.id}/ama/amas/new`}
+		>
+			<SvgPlus />
+			<span className="text-lg font-medium text-primary dark:text-primary-dark">Create AMA</span>
+		</Link>
+	);
+}

apps/website/src/app/dashboard/[id]/ama/amas/layout.tsx

@@ -0,0 +1,12 @@
+import { HydrationBoundary } from '@tanstack/react-query';
+import { server } from '@/data/server';
+
+export default async function AMAsLayout({ children, params }: LayoutProps<'/dashboard/[id]/ama/amas'>) {
+	const { id } = await params;
+
+	return (
+		<HydrationBoundary state={await server.guilds(id).ama.amas({ include_ended: 'false' }).prefetch()}>
+			{children}
+		</HydrationBoundary>
+	);
+}