feat: render each guild

apps/website/src/components/dashboard/UserInfo.astro

@@ -1,11 +1,23 @@
 ---
 import { Image } from "astro:assets";
+import type { User } from "~/env";
 import { getUser } from "~/lib/user";
 
-const user = await getUser(Astro.request);
+interface Props {
-if (!user) {
+  user?: User;
+}
+
+let user: User;
+if (!Astro.props.user) {
+  const u = await getUser(Astro.request);
+  if (!u) {
     return Astro.redirect("/auth/login");
   }
+
+  user = u;
+} else {
+  user = Astro.props.user;
+}
 ---
 
 <div class="flex items-center justify-center">

apps/website/src/components/preact/Guild.tsx

@@ -7,10 +7,16 @@ interface Props {
 
 export default function Guild({ guild, mutual }: Props) {
   return (
-    <section
+    <a
-      class={`flex min-h-max w-80 justify-between rounded-md border-[1px] border-neutral-800 bg-dark-100 p-6 md:w-96 ${
+      class={`flex min-h-max w-80 cursor-pointer justify-between rounded-md border-[1px] border-neutral-800 bg-dark-100 p-6 md:w-96 ${
         !mutual && "brightness-50"
       }`}
+      href={
+        mutual
+          ? `/dashboard/guilds/${guild.id}`
+          : `https://discord.com/oauth2/authorize?client_id=923267906941370368&scope=bot+applications.commands&guild_id=${guild.id}`
+      }
+      target={mutual ? "_self" : "_blank"}
     >
       <div class="flex flex-row items-center">
         <img
@@ -23,6 +29,6 @@ export default function Guild({ guild, mutual }: Props) {
 
         <h2 class="w-fit break-all text-3xl font-bold">{guild.name}</h2>
       </div>
-    </section>
+    </a>
   );
 }

apps/website/src/components/preact/LoadingGuild.tsx

@@ -1,9 +1,9 @@
 export default function LoadingGuild() {
   return (
-    <section className="flex min-h-max w-80 items-center justify-center rounded-md border border-neutral-800 bg-dark-100 p-6 md:w-96">
+    <div className="flex min-h-max w-80 items-center justify-center rounded-md border border-neutral-800 bg-dark-100 p-6 md:w-96">
       <div className="flex flex-row">
         <div className="h-6 w-52 animate-pulse rounded-md bg-neutral-700 shadow-md"></div>
       </div>
-    </section>
+    </div>
   );
 }

apps/website/src/lib/guilds.ts

@@ -1,4 +1,17 @@
 import type { Guild, MutualeGuild, User } from "~/env";
+import { isUserEligible } from "./user";
+
+export async function getGuild(
+  user: User,
+  guildId: string
+): Promise<Guild | undefined> {
+  const guilds = await getUserGuilds(user);
+  const guild = guilds.find((g) => g.id === guildId);
+
+  if (!guild || !(await isMutualGuild(guild))) return undefined;
+
+  return guild;
+}
 
 export async function getUserGuilds(user: User): Promise<Guild[]> {
   const discordApiGuildsResponse = await fetch(
@@ -14,12 +27,11 @@ export async function getUserGuilds(user: User): Promise<Guild[]> {
   return (await discordApiGuildsResponse.json()) as Guild[];
 }
 
-// Checks if user has AMDINISTRATOR permissions in the guild
 export async function filterUserGuilds(
   guilds: Guild[]
 ): Promise<MutualeGuild[]> {
   const filtered = guilds
-    .filter((g) => (BigInt(g.permissions) & 0x8n) == 0x8n)
+    .filter(isUserEligible)
     .sort((a, b) => Number(b.owner) - Number(a.owner));
 
   const result: MutualeGuild[] = [];

apps/website/src/lib/user.ts

@@ -1,5 +1,5 @@
 import { getSession } from "auth-astro/server";
-import type { User } from "~/env";
+import type { Guild, User } from "~/env";
 
 export async function getUser(req: Request): Promise<User | null> {
   const session = await getSession(req);
@@ -7,3 +7,8 @@ export async function getUser(req: Request): Promise<User | null> {
 
   return session.user as User;
 }
+
+// Checks if user has AMDINISTRATOR permissions in the guild
+export function isUserEligible(guild: Guild): boolean {
+  return (BigInt(guild.permissions) & 0x8n) == 0x8n;
+}

apps/website/src/pages/dashboard/guilds/[id].astro

@@ -0,0 +1,23 @@
+---
+import { getGuild } from "~/lib/guilds";
+import { getUser, isUserEligible } from "~/lib/user";
+
+const { id } = Astro.params;
+
+const user = await getUser(Astro.request);
+if (!user || !id) {
+  return Astro.redirect("/auth/login");
+}
+
+const guild = await getGuild(user, id);
+if (!guild) {
+  return Astro.redirect("/dashboard");
+}
+
+const eligible = isUserEligible(guild);
+if (!eligible) {
+  return Astro.redirect("/dashboard");
+}
+---
+
+You can manage guild {guild.name} with id {guild.id}