Tag colour support n stuff

Author: TheKodeToad

backend/migrations/15-tags-attachments-container.sql

@@ -1,4 +1,3 @@
 ALTER TABLE "tags_tags"
 	ADD "attachments" TEXT[] NOT NULL DEFAULT ARRAY[]::TEXT[],
-	ADD "container" BOOLEAN NOT NULL DEFAULT FALSE,
-	ADD "containerColor" INT;
+	ADD "color" INT NOT NULL DEFAULT -1;

backend/src/plugin/core/commandEngine/parsing/prefixParser.ts

@@ -146,7 +146,7 @@ function readNamedArg(
 		}
 
 		// maybe best not to make this immutable? it causes typing issues
-		if (value instanceof Array) {
+		if (option.array) {
 			output.pushTo(key, ...(value as unknown[]));
 		} else {
 			output.set(key, value);

backend/src/plugin/core/public/helper/customOptionTypes.ts

@@ -1,3 +1,4 @@
+import { Color } from "#common/schema/general.ts";
 import { isSnowflake } from "#common/snowflake.ts";
 import type { StringReader } from "#common/stringReader.ts";
 import {

backend/src/plugin/logging/config/tags.ts

@@ -1,14 +1,35 @@
+import { paddedHex } from "#common/general.ts";
 import { messageTemplate } from "#common/schema/message.ts";
 import { GuildView } from "#common/template/guild.ts";
 import { UserView } from "#common/template/user.ts";
 import { eventConfig } from "#plugin/logging/config/index.ts";
-import { m } from "mousetache";
+import type { Tag } from "#plugin/tags/public/tag.ts";
+import { m, type InferView } from "mousetache";
 
 export const TagView = m.object({
 	name: m.terminal(),
 	content: m.terminal({ noEscape: true }),
+	color: m.terminal({ noEscape: true }),
+	attachments: m.array(m.terminal({ noEscape: true }))
 });
 
+export type TagView = InferView<typeof TagView>;
+
+export function makeTagView(tag: Tag): TagView {
+	return {
+		name: tag.name,
+		content: tag.content,
+		get color() {
+			if (tag.color !== -1) {
+				return paddedHex(tag.color, 3)
+			} else {
+				return "None";
+			}
+		},
+		attachments: tag.attachments,
+	};
+}
+
 export const TagCreateEvent = eventConfig(
 	messageTemplate(
 		m.object({
@@ -50,6 +71,8 @@ export const TagEditEvent = eventConfig(
 
 			nameChanged: m.terminal(),
 			contentChanged: m.terminal(),
+			colorChanged: m.terminal(),
+			attachmentsChanged: m.terminal(),
 		}),
 	),
 	{
@@ -71,6 +94,18 @@ export const TagEditEvent = eventConfig(
 						name: "New Content",
 						value: "{{#contentChanged}}{{newTag.content}}{{/contentChanged}}",
 					},
+					{
+						name: "Color",
+						value: "{{#colorChanged}}{{oldTag.color}} → {{newTag.color}}{{/colorChanged}}",
+					},
+					{
+						name: "Old Attachments",
+						value: "{{#attachmentsChanged}}{{#oldTag.attachments}}{{.}}\n{{/oldTag.attachments}}{{/attachmentsChanged}}",
+					},
+					{
+						name: "New Attachments",
+						value: "{{#attachmentsChanged}}{{#newTag.attachments}}{{.}}\n{{/newTag.attachments}}{{/attachmentsChanged}}",
+					},
 				],
 				color: "yellow",
 				footer: { text: "Actor ID: {{actor.id}}" },

backend/src/plugin/logging/logger/tags.ts

@@ -2,6 +2,7 @@ import type { Nullable } from "#common/general.ts";
 import { makeGuildView } from "#common/template/guild.ts";
 import { makeMemberUserView } from "#common/template/user.ts";
 import type { SquirrelDiscordContext } from "#discord/index.ts";
+import { makeTagView } from "#plugin/logging/config/tags.ts";
 import { logEvent } from "#plugin/logging/helper/logging.ts";
 import {
 	onTagCreated,
@@ -30,7 +31,7 @@ async function handleCreate(
 			return {
 				guild: makeGuildView(guild),
 				actor: makeMemberUserView(actor),
-				tag,
+				tag: makeTagView(tag),
 			};
 		},
 	});
@@ -50,13 +51,17 @@ async function handleEdit(
 			return {
 				guild: makeGuildView(guild),
 				actor: makeMemberUserView(actor),
-				oldTag: oldTag,
-				newTag: {
+				oldTag: makeTagView(oldTag),
+				newTag: makeTagView({
 					name: changes.name ?? oldTag.name,
 					content: changes.content ?? oldTag.content,
-				},
+					color: changes.color ?? oldTag.color,
+					attachments: changes.attachments ?? oldTag.attachments,
+				}),
 				nameChanged: changes.name !== null,
 				contentChanged: changes.content !== null,
+				colorChanged: changes.color !== null,
+				attachmentsChanged: changes.attachments !== null,
 			};
 		},
 	});
@@ -75,7 +80,7 @@ async function handleDelete(
 			return {
 				guild: makeGuildView(guild),
 				actor: makeMemberUserView(actor),
-				tag,
+				tag: makeTagView(tag),
 			};
 		},
 	});

backend/src/plugin/tags/command/tag.ts

@@ -6,8 +6,13 @@ import { MAX_TAG_NAME_LENGTH } from "#plugin/tags/constants.ts";
 import { autocompleteTags } from "#plugin/tags/helper/autocompletion.ts";
 import { tagsConfigStore } from "#plugin/tags/index.ts";
 import { getTag } from "#plugin/tags/storage/tags.ts";
-import { Gallery, GalleryItem, Text } from "oceanic-component-helper";
-import type { MessageComponent } from "oceanic.js";
+import {
+	Container,
+	Gallery,
+	GalleryItem,
+	Text,
+} from "oceanic-component-helper";
+import type { ContainerComponent, MessageComponent } from "oceanic.js";
 
 export default defineCommand({
 	name: ["tag", "tagsend", "sendtag"],
@@ -41,10 +46,14 @@ export default defineCommand({
 			return;
 		}
 
-		const components: MessageComponent[] = [Text(tag.content)];
+		const container = Container([Text(tag.content)]);
+
+		if (tag.color !== -1) {
+			container.accentColor = tag.color;
+		}
 
 		if (tag.attachments.length !== 0) {
-			components.push(
+			container.components.push(
 				Gallery(
 					tag.attachments.map((attachment) =>
 						GalleryItem(attachment),
@@ -53,6 +62,6 @@ export default defineCommand({
 			);
 		}
 
-		await ctx.respond({ components });
+		await ctx.respond({ components: [container] });
 	},
 });

backend/src/plugin/tags/command/tagCreate.ts

@@ -7,8 +7,10 @@ import {
 	MAX_TAG_CONTENT_LENGTH,
 	MAX_TAG_NAME_LENGTH,
 } from "#plugin/tags/constants.ts";
+import { attachments, optionalColor } from "#plugin/tags/helper/customOptionTypes.ts";
 import { tagsConfigStore } from "#plugin/tags/index.ts";
 import { onTagCreated } from "#plugin/tags/public/extensionPoints.ts";
+import type { Tag } from "#plugin/tags/public/tag.ts";
 import { createTag } from "#plugin/tags/storage/tags.ts";
 
 const logger = moduleLogger();
@@ -24,20 +26,25 @@ export default defineCommand({
 			description: "The name of the tag to create.",
 			required: true,
 			position: 0,
-			maxLength: MAX_TAG_NAME_LENGTH,
+
 			greedy: false,
+			maxLength: MAX_TAG_NAME_LENGTH,
 		},
 		content: {
 			type: "string",
 			name: ["content", "c"],
 			required: true,
 			position: 1,
+
 			maxLength: MAX_TAG_CONTENT_LENGTH,
 		},
 		attachments: {
-			type: "string",
+			type: attachments,
 			name: ["attachments", "a", "attachment", "attach"],
-			array: true,
+		},
+		color: {
+			type: optionalColor,
+			name: ["color", "c"],
 		},
 	},
 
@@ -48,11 +55,13 @@ export default defineCommand({
 			(permissions) => permissions.tagCreate,
 		),
 	async run(ctx, args) {
-		const success = await createTag(ctx.squirrelCtx.db, ctx.guild.id, {
+		const tag: Tag = {
 			name: args.name,
 			content: args.content,
 			attachments: args.attachments ?? [],
-		});
+			color: args.color ?? -1,
+		};
+		const success = await createTag(ctx.squirrelCtx.db, ctx.guild.id, tag);
 
 		if (!success) {
 			await ctx.respond(
@@ -62,7 +71,7 @@ export default defineCommand({
 		}
 
 		onTagCreated
-			.fire(ctx.squirrelCtx, ctx.guild, ctx.member, args)
+			.fire(ctx.squirrelCtx, ctx.guild, ctx.member, tag)
 			.catch((error) => logger.error?.("Error in onTagCreated", error));
 
 		await ctx.respond(

backend/src/plugin/tags/command/tagEdit.ts

@@ -1,5 +1,7 @@
 import { escapeMarkdown } from "#common/discord/markdown.ts";
 import { moduleLogger } from "#common/logger/index.ts";
+import { Color } from "#common/schema/general.ts";
+import type { StringReader } from "#common/stringReader.ts";
 import { defineCommand } from "#plugin/core/public/extensionPoints.ts";
 import { permissionsGuard } from "#plugin/core/public/helper/commandGuards.ts";
 import { icons } from "#plugin/core/public/icons.ts";
@@ -8,6 +10,7 @@ import {
 	MAX_TAG_NAME_LENGTH,
 } from "#plugin/tags/constants.ts";
 import { autocompleteTags } from "#plugin/tags/helper/autocompletion.ts";
+import { attachments, optionalColor } from "#plugin/tags/helper/customOptionTypes.ts";
 import { tagsConfigStore } from "#plugin/tags/index.ts";
 import { onTagEdited } from "#plugin/tags/public/extensionPoints.ts";
 import { updateTag } from "#plugin/tags/storage/tags.ts";
@@ -25,22 +28,36 @@ export default defineCommand({
 			description: "The name of the tag to modify.",
 			required: true,
 			position: 0,
-			maxLength: MAX_TAG_NAME_LENGTH,
+
 			greedy: false,
+			maxLength: MAX_TAG_NAME_LENGTH,
 
 			autocomplete: (ctx, value) => autocompleteTags(ctx, value),
 		},
+		newName: {
+			type: "string",
+			name: ["new-name", "rename", "nn", "rn"],
+			description: "Specify a new name to rename to.",
+
+			maxLength: MAX_TAG_NAME_LENGTH,
+		},
 		content: {
 			type: "string",
 			name: ["content", "c"],
+			description: "Modify the content.",
 			position: 1,
+
 			maxLength: MAX_TAG_CONTENT_LENGTH,
 		},
-		newName: {
-			type: "string",
-			name: ["new-name", "rename", "nn", "rn"],
-			description: "Change the name of the tag to something else.",
-			maxLength: MAX_TAG_NAME_LENGTH,
+		attachments: {
+			type: attachments,
+			name: ["attachments", "attach", "a"],
+			description: "Modify attachments, specified as links separated by spaces or simply 'clear' to remove them."
+		},
+		color: {
+			type: optionalColor,
+			name: ["color", "c"],
+			description: "Modify the color of the tag. This will display "
 		},
 	},
 
@@ -54,6 +71,8 @@ export default defineCommand({
 		const changes = {
 			name: args.newName,
 			content: args.content,
+			attachments: args.attachments,
+			color: args.color,
 		};
 
 		const oldTag = await updateTag(
@@ -71,7 +90,7 @@ export default defineCommand({
 		}
 
 		// check after we know the tag exists
-		if (args.newName === null && args.content === null) {
+		if (changes.name === null && changes.content === null && changes.attachments === null && changes.color === null) {
 			await ctx.respond(`${icons.error} No changes specified!`);
 			return;
 		}

backend/src/plugin/tags/helper/customOptionTypes.ts

@@ -0,0 +1,49 @@
+import { Color } from "#common/schema/general.ts";
+import type { StringReader } from "#common/stringReader.ts";
+
+const CLEAR_PATTERN = /clear\b/iy;
+
+export const attachments = {
+	name: "attachments",
+	read(reader: StringReader) {
+		if (reader.skipOver(CLEAR_PATTERN)) {
+			return [];
+		}
+
+		const result = [];
+
+		while (reader.canRead()) {
+			const prevCursor = reader.cursor;
+			const url = reader.readWord();
+
+			if (!(url.startsWith("https://") || url.startsWith("http://"))) {
+				reader.cursor = prevCursor;
+				break;
+			}
+
+			result.push(url);
+		}
+
+		return result;
+	},
+};
+
+/** Parses a color or returns -1 if none is supplied. */
+export const optionalColor = {
+	name: "color",
+	read(reader: StringReader) {
+		const word = reader.readWord();
+
+		if (word.toLowerCase() === "none") {
+			return -1;
+		}
+
+		const result = Color.safeParse(word);
+
+		if (!result.success) {
+			return null;
+		}
+
+		return result.data;
+	},
+};

backend/src/plugin/tags/public/tag.ts

@@ -2,4 +2,6 @@ export interface Tag {
 	name: string;
 	content: string;
 	attachments: readonly string[];
+	/** The tag's color (-1 for transparent) */
+	color: number;
 }