attempt to add ignored channels page

Catalogger.Frontend/src/lib/components/Navbar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
 	import { TOKEN_KEY, type User } from "$lib/api";
 	import { addToast } from "$lib/toast";
 	import {
-		Button,
 		Navbar,
 		NavbarBrand,
 		NavbarToggler,
@@ -11,6 +11,10 @@
 		Nav,
 		NavItem,
 		NavLink,
+		Dropdown,
+		DropdownToggle,
+		DropdownMenu,
+		DropdownItem,
 	} from "@sveltestrap/sveltestrap";
 
 	export let user: User | null;
@@ -32,15 +36,28 @@
 	<Collapse {isOpen} navbar expand="lg">
 		<Nav class="ms-auto" navbar>
 			<NavItem>
-				<NavLink href="/">Home</NavLink>
+				<NavLink href="/" active={$page.url.pathname === "/"}>About</NavLink>
 			</NavItem>
 			{#if user}
-				<NavItem>
-					<NavLink href="/dash">Dashboard</NavLink>
-				</NavItem>
-				<NavItem>
-					<NavLink on:click={logOut}>Log out</NavLink>
-				</NavItem>
+				<Dropdown nav inNavbar>
+					<DropdownToggle nav caret>
+						<img
+							src={user.avatar_url}
+							alt="Your avatar"
+							style="border-radius: 0.75em; height: 1.5em;"
+						/>
+						{user.tag}
+					</DropdownToggle>
+					<DropdownMenu end>
+						<DropdownItem
+							href="/dash"
+							active={$page.url.pathname.startsWith("/dash")}
+						>
+							Dashboard
+						</DropdownItem>
+						<DropdownItem on:click={logOut}>Log out</DropdownItem>
+					</DropdownMenu>
+				</Dropdown>
 			{:else}
 				<NavItem>
 					<NavLink href="/api/authorize">Log in with Discord</NavLink>

Catalogger.Frontend/src/lib/util.ts

@@ -0,0 +1,77 @@
+import type { FullGuild } from "./api";
+
+export const makeFullOptions = (guild: FullGuild, ignore: string[]) => {
+	const options = [];
+
+	options.push(
+		...guild.categories
+			.filter((cat) => !ignore.some((k) => k === cat.id))
+			.map((cat) => ({
+				label: `${cat.name} (category)`,
+				value: cat.id,
+			})),
+	);
+
+	// Filter these channels
+	const channelsWithoutCategory = guild.channels_without_category.filter(
+		(c) => c.can_redirect_from && !ignore.some((k) => k === c.id),
+	);
+	if (channelsWithoutCategory.length > 0)
+		options.push({
+			label: "(no category)",
+			options: channelsWithoutCategory.map((c) => ({
+				value: c.id,
+				label: `#${c.name}`,
+			})),
+		});
+
+	options.push(
+		...guild.categories
+			.map((cat) => ({
+				label: cat.name,
+				options: cat.channels
+					.filter((c) => c.can_redirect_from && !ignore.some((k) => k === c.id))
+					.map((c) => ({ value: c.id, label: `#${c.name}` })),
+			}))
+			.filter((c) => c.options.length > 0),
+	);
+
+	return options;
+};
+
+export const makeFullOptions2 = (guild: FullGuild, ignore: string[]) => {
+	const options: Array<{ label: string; value: string; group: string }> = [];
+
+	options.push(
+		...guild.categories
+			.filter((cat) => !ignore.some((k) => k === cat.id))
+			.map((cat) => ({
+				label: `${cat.name} (category)`,
+				value: cat.id,
+				group: "Categories",
+			})),
+	);
+
+	// Filter these channels
+	const channelsWithoutCategory = guild.channels_without_category.filter(
+		(c) => c.can_redirect_from && !ignore.some((k) => k === c.id),
+	);
+	if (channelsWithoutCategory.length > 0)
+		options.push(
+			...channelsWithoutCategory.map((c) => ({
+				value: c.id,
+				label: `#${c.name}`,
+				group: "(no category)",
+			})),
+		);
+
+	options.push(
+		...guild.categories.flatMap((cat) =>
+			cat.channels
+				.filter((c) => c.can_redirect_from && !ignore.some((k) => k === c.id))
+				.map((c) => ({ value: c.id, label: `#${c.name}`, group: cat.name })),
+		),
+	);
+
+	return options;
+};

Catalogger.Frontend/src/routes/+layout.svelte

@@ -12,7 +12,7 @@
 
 <div class="container">
 	<slot />
-	<div class="position-absolute top-0 start-50 translate-middle-x">
+	<div class="position-absolute top-0 start-50 translate-middle-x px-2">
 		{#each $toastStore as toast}
 			<Toast>
 				{#if toast.header}<ToastHeader>{toast.header}</ToastHeader>{/if}

Catalogger.Frontend/src/routes/callback/+page.svelte

@@ -13,8 +13,11 @@
 		const params = new URLSearchParams(window.location.search);
 		const code = params.get("code");
 		const state = params.get("state");
+		const guildId = params.get("guild_id");
 
 		if (data.user) {
+			if (guildId) return await goto(`/dash/${guildId}`);
+
 			addToast({ header: "Cannot log in", body: "You are already logged in." });
 			await goto("/dash");
 			return;
@@ -37,7 +40,11 @@
 
 			localStorage.setItem(TOKEN_KEY, resp.token);
 
-			await goto("/dash", { invalidateAll: true });
+			if (guildId) {
+				await goto(`/dash/${guildId}`, { invalidateAll: true });
+			} else {
+				await goto("/dash", { invalidateAll: true });
+			}
 		} catch (e) {
 			console.error("Callback request failed: ", e);
 			error = true;

Catalogger.Frontend/src/routes/dash/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ListGroup, ListGroupItem } from "@sveltestrap/sveltestrap";
 	import type { PageData } from "./$types";
+	import GuildCard from "./GuildCard.svelte";
 
 	export let data: PageData;
 
@@ -15,9 +16,9 @@
 <h1>Manage your servers</h1>
 
 <div class="row">
-	{#if joinedGuilds.length > 0}
-		<div class="col-lg">
-			<h2>Servers you can manage</h2>
+	<div class="col-lg">
+		<h2>Servers you can configure</h2>
+		{#if joinedGuilds.length > 0}
 			<ListGroup>
 				{#each joinedGuilds as guild (guild.id)}
 					<ListGroupItem tag="a" href="/dash/{guild.id}">
@@ -30,14 +31,21 @@
 					</ListGroupItem>
 				{/each}
 			</ListGroup>
-		</div>
-	{/if}
-	{#if unjoinedGuilds.length > 0}
-		<div class="col-lg">
-			<h2>Servers you can add Catalogger to</h2>
+		{:else}
+			<p>None of the servers you manage have Catalogger added.</p>
+		{/if}
+	</div>
+
+	<div class="col-lg">
+		<h2>Servers you can add Catalogger to</h2>
+		{#if unjoinedGuilds.length > 0}
 			<ListGroup>
 				{#each unjoinedGuilds as guild (guild.id)}
-					<ListGroupItem tag="a" href="/api/add-guild/{guild.id}">
+					<ListGroupItem
+						tag="a"
+						href="/api/add-guild/{guild.id}"
+						target="_blank"
+					>
 						<img
 							src={guild.icon_url}
 							alt="Icon for {guild.name}"
@@ -47,6 +55,8 @@
 					</ListGroupItem>
 				{/each}
 			</ListGroup>
-		</div>
-	{/if}
+		{:else}
+			<p>All of the servers you manage already have Catalogger added.</p>
+		{/if}
+	</div>
 </div>

Catalogger.Frontend/src/routes/dash/[guildId]/+layout.svelte

@@ -16,6 +16,11 @@
 				data.guild.config,
 			);
 			data.guild.config = resp;
+
+			addToast({
+				header: "Saved log channels.",
+				body: "Successfully edited log channels and ignored channels.",
+			});
 		} catch (e) {
 			addToast({
 				header: "Error saving changes to log channels",
@@ -31,55 +36,43 @@
 </svelte:head>
 
 <div class="d-flex flex-column flex-lg-row justify-content-lg-between">
-	<Nav pills={true} class="flex-column flex-lg-row">
-		<NavItem
-			><NavLink href="#" disabled>Managing {data.guild.name}</NavLink></NavItem
+	<Nav pills={true} class="flex-column flex-lg-row mb-2">
+		<NavLink href="#" disabled>Managing {data.guild.name}</NavLink>
+		<NavLink
+			href="/dash/{data.guild.id}"
+			active={$page.url.pathname === `/dash/${data.guild.id}`}
 		>
-		<NavItem
-			><NavLink
-				href="/dash/{data.guild.id}"
-				active={$page.url.pathname === `/dash/${data.guild.id}`}
-			>
-				Log channels
-			</NavLink></NavItem
+			Log channels
+		</NavLink>
+		<NavLink
+			href="/dash/{data.guild.id}/redirects"
+			active={$page.url.pathname === `/dash/${data.guild.id}/redirects`}
 		>
-		<NavItem
-			><NavLink
-				href="/dash/{data.guild.id}/redirects"
-				active={$page.url.pathname === `/dash/${data.guild.id}/redirects`}
-			>
-				Redirects
-			</NavLink></NavItem
+			Redirects
+		</NavLink>
+		<NavLink
+			href="/dash/{data.guild.id}/ignored-channels"
+			active={$page.url.pathname === `/dash/${data.guild.id}/ignored-channels`}
 		>
-		<NavItem
-			><NavLink
-				href="/dash/{data.guild.id}/ignored-channels"
-				active={$page.url.pathname ===
-					`/dash/${data.guild.id}/ignored-channels`}
-			>
-				Ignored channels
-			</NavLink></NavItem
+			Ignored channels
+		</NavLink>
+		<NavLink
+			href="/dash/{data.guild.id}/ignored-users"
+			active={$page.url.pathname === `/dash/${data.guild.id}/ignored-users`}
 		>
-		<NavItem
-			><NavLink
-				href="/dash/{data.guild.id}/ignored-users"
-				active={$page.url.pathname === `/dash/${data.guild.id}/ignored-users`}
-			>
-				Ignored users
-			</NavLink></NavItem
-		>
-		<NavItem
-			><NavLink
-				href="/dash/{data.guild.id}/key-roles"
-				active={$page.url.pathname === `/dash/${data.guild.id}/key-roles`}
-			>
-				Key roles
-			</NavLink></NavItem
+			Ignored users
+		</NavLink>
+
+		<NavLink
+			href="/dash/{data.guild.id}/key-roles"
+			active={$page.url.pathname === `/dash/${data.guild.id}/key-roles`}
 		>
+			Key roles
+		</NavLink>
 	</Nav>
 
-	{#if $page.url.pathname === `/dash/${data.guild.id}`}
-		<Button on:click={save}>Save changes</Button>
+	{#if $page.url.pathname === `/dash/${data.guild.id}` || $page.url.pathname === `/dash/${data.guild.id}/ignored-channels`}
+		<Button on:click={save} class="mb-2">Save changes</Button>
 	{/if}
 </div>
 

Catalogger.Frontend/src/routes/dash/[guildId]/+page.svelte

@@ -9,6 +9,8 @@
 	$: channels = data.guild.config as GuildChannelConfig;
 </script>
 
+<h3>Log channels</h3>
+
 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
 	<div class="p-2">
 		<Label><strong>Server changes</strong></Label>

Catalogger.Frontend/src/routes/dash/[guildId]/ChannelSelect.svelte

@@ -5,14 +5,18 @@
 	type Option = { label: string; value: string };
 
 	export let options: Array<Group | Option>;
+	export let multiple = false;
+	export let max: number | undefined = undefined;
 	export let placeholder: string = "Select a channel";
-	export let value: string | null;
+	export let value: string | string[] | null;
 </script>
 
 <Svelecte
 	bind:value
 	{options}
 	{placeholder}
+	{multiple}
+	{max}
 	labelField="label"
 	valueField="value"
 	groupLabelField="label"

Catalogger.Frontend/src/routes/dash/[guildId]/ignored-channels/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Label } from "@sveltestrap/sveltestrap";
+	import type { PageData } from "./$types";
+	import { makeFullOptions } from "$lib/util";
+	import ChannelSelect from "../ChannelSelect.svelte";
+
+	export let data: PageData;
+
+	$: ignored = data.guild.config.ignored_channels;
+	$: options = makeFullOptions(data.guild, ignored);
+</script>
+
+<h3>Ignored channels</h3>
+
+<p>
+	Messages from ignored channels will not be logged. Note that this does not
+	ignore channel update events, any changes to the channel will still be logged.
+</p>
+
+<div class="p-2">
+	<Label><strong>Ignored channels</strong></Label>
+	<ChannelSelect bind:value={ignored} {options} multiple={true} />
+</div>

Catalogger.Frontend/src/routes/dash/[guildId]/redirects/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ApiError, FullGuild } from "$lib/api";
+	import type { ApiError } from "$lib/api";
 	import {
 		Button,
 		Label,
@@ -10,60 +10,12 @@
 	import ChannelSelect from "../ChannelSelect.svelte";
 	import { fastFetch } from "$lib/api";
 	import { addToast } from "$lib/toast";
+	import { makeFullOptions } from "$lib/util";
 
 	export let data: PageData;
 
 	$: redirects = data.guild.config.redirects;
 
-	const makeSourceOptions = (
-		guild: FullGuild,
-		redirects: Record<string, string>,
-	) => {
-		const options = [];
-
-		// We shouldn't list channels that are already being redirected.
-		const redirectedChannels = Object.keys(redirects);
-
-		options.push(
-			...guild.categories
-				.filter((cat) => !redirectedChannels.some((k) => k === cat.id))
-				.map((cat) => ({
-					label: `${cat.name} (category)`,
-					value: cat.id,
-				})),
-		);
-
-		// Filter these channels
-		const channelsWithoutCategory = guild.channels_without_category.filter(
-			(c) => c.can_redirect_from && !redirectedChannels.some((k) => k === c.id),
-		);
-		if (channelsWithoutCategory.length > 0)
-			options.push({
-				label: "(no category)",
-				options: channelsWithoutCategory.map((c) => ({
-					value: c.id,
-					label: `#${c.name}`,
-				})),
-			});
-
-		options.push(
-			...guild.categories
-				.map((cat) => ({
-					label: cat.name,
-					options: cat.channels
-						.filter(
-							(c) =>
-								c.can_redirect_from &&
-								!redirectedChannels.some((k) => k === c.id),
-						)
-						.map((c) => ({ value: c.id, label: `#${c.name}` })),
-				}))
-				.filter((c) => c.options.length > 0),
-		);
-
-		return options;
-	};
-
 	$: allChannels = [
 		...data.guild.channels_without_category.map((c) => ({
 			id: c.id,
@@ -78,7 +30,7 @@
 	const channelName = (id: string) =>
 		allChannels.find((c) => c.id === id)?.name || `(unknown channel ${id})`;
 
-	$: sourceOptions = makeSourceOptions(data.guild, redirects);
+	$: sourceOptions = makeFullOptions(data.guild, Object.keys(redirects));
 	$: targetOptions = data.options;
 
 	let source: string | null = null;
@@ -143,7 +95,7 @@
 	</div>
 </div>
 
-<div>
+<div class="my-2 d-grid d-md-block">
 	<Button
 		color="primary"
 		disabled={!source || !target}