attempt to add ignored channels page

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}