feat: functional guild cards

Author: didinele

apps/website/src/app/dashboard/_components/GuildCard.tsx

@@ -1,24 +1,14 @@
-'use client';
-
 import type { MeGuild } from '@chatsift/api';
-import Image from 'next/image';
+import { GuildIcon } from '@/components/common/GuildIcon';
 import { SvgAutoModerator } from '@/components/icons/SvgAutoModerator';
 import { cn } from '@/utils/util';
 
 interface GuildCardProps {
 	readonly data: MeGuild;
 }
 
-function getGuildAcronym(guildName: string) {
-	return guildName
-		.replaceAll("'s ", ' ')
-		.replaceAll(/\w+/g, (substring) => substring[0]!)
-		.replaceAll(/\s/g, '');
-}
-
 export default function GuildCard({ data }: GuildCardProps) {
 	const hasBots = data.bots.length > 0;
-	const icon = data?.icon ? `https://cdn.discordapp.com/icons/${data.id}/${data.icon}.png` : null;
 	const url = hasBots ? `/dashboard/${data.id}` : undefined;
 
 	return (
@@ -28,24 +18,7 @@ export default function GuildCard({ data }: GuildCardProps) {
 				hasBots ? 'bg-[#FFFFFF] dark:bg-[#1C1C21]' : 'group',
 			)}
 		>
-			<div className="flex flex-row items-center">
-				{icon ? (
-					<a href={url}>
-						{/* TODO: GuildIcon component */}
-						<Image
-							alt="Guild icon"
-							className="flex h-12 w-12 items-center justify-center rounded-full border-on-secondary bg-on-tertiary dark:border-on-secondary-dark dark:bg-on-tertiary-dark"
-							height={48}
-							src={icon}
-							width={48}
-						/>
-					</a>
-				) : (
-					<p className="flex h-12 w-12 items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-full border-on-secondary bg-on-tertiary after:max-w-[70%] dark:border-on-secondary-dark dark:bg-on-tertiary-dark">
-						{getGuildAcronym(data.name)}
-					</p>
-				)}
-			</div>
+			<GuildIcon data={data} hasBots={hasBots} />
 			<div className="flex flex-col gap-1">
 				<p className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-lg font-medium text-primary group-hover:hidden dark:text-primary-dark">
 					<a href={url}>{data.name}</a>

apps/website/src/app/dashboard/_components/GuildList.tsx

@@ -11,16 +11,17 @@ export function GuildList() {
 
 	const searchQuery = searchParams.get('search') ?? '';
 
+	const manageable = useMemo(() => me?.guilds.filter((g) => g.meCanManage) ?? [], [me]);
 	const sorted = useMemo(() => {
 		const lower = searchQuery.toLowerCase();
 
-		if (!me) {
+		if (!manageable.length) {
 			return [];
 		}
 
-		const filtered = me.guilds.filter((guild) => guild.name.toLowerCase().includes(lower));
+		const filtered = manageable.filter((guild) => guild.name.toLowerCase().includes(lower));
 		return filtered.reverse().sort((a, b) => b.bots.length - a.bots.length);
-	}, [me, searchQuery]);
+	}, [manageable, searchQuery]);
 
 	return (
 		<ul className="grid grid-cols-1 gap-4 md:grid-cols-4">

apps/website/src/components/common/GuildIcon.tsx

@@ -0,0 +1,39 @@
+import type { MeGuild } from '@chatsift/api';
+import Image from 'next/image';
+
+function getGuildAcronym(guildName: string) {
+	return guildName
+		.replaceAll("'s ", ' ')
+		.replaceAll(/\w+/g, (substring) => substring[0]!)
+		.replaceAll(/\s/g, '');
+}
+
+export interface GuildIconProps {
+	readonly data: MeGuild;
+	readonly hasBots: boolean;
+}
+
+export function GuildIcon({ data, hasBots }: GuildIconProps) {
+	const icon = data?.icon ? `https://cdn.discordapp.com/icons/${data.id}/${data.icon}.png` : null;
+	const url = hasBots ? `/dashboard/${data.id}` : undefined;
+
+	return (
+		<div className="flex flex-row items-center">
+			{icon ? (
+				<a href={url}>
+					<Image
+						alt="Guild icon"
+						className="flex h-12 w-12 items-center justify-center rounded-full border-on-secondary bg-on-tertiary dark:border-on-secondary-dark dark:bg-on-tertiary-dark"
+						height={48}
+						src={icon}
+						width={48}
+					/>
+				</a>
+			) : (
+				<p className="flex h-12 w-12 items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-full border-on-secondary bg-on-tertiary after:max-w-[70%] dark:border-on-secondary-dark dark:bg-on-tertiary-dark">
+					{getGuildAcronym(data.name)}
+				</p>
+			)}
+		</div>
+	);
+}