Make tag autocomplete work better

Author: TheKodeToad

backend/src/plugin/core/public/command.ts

@@ -140,6 +140,8 @@ interface FlagOption extends BaseOption {
 	position?: undefined;
 }
 
+export const MAX_AUTOCOMPLETE_CHOICES = 25;
+
 interface StringOption extends BaseOption {
 	type: OptionType.String;
 	minLength?: number;

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

@@ -4,8 +4,9 @@ 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";
 import { MAX_TAG_NAME_LENGTH } from "#plugin/tags/constants.ts";
+import { autocompleteTags } from "#plugin/tags/helper/command.ts";
 import { tagsConfigStore } from "#plugin/tags/index.ts";
-import { getTag, searchTags } from "#plugin/tags/storage/tags.ts";
+import { getTag } from "#plugin/tags/storage/tags.ts";
 
 export default defineCommand({
 	name: ["tag", "tagsend", "sendtag"],
@@ -18,8 +19,7 @@ export default defineCommand({
 			position: 0,
 			maxLength: MAX_TAG_NAME_LENGTH,
 
-			autocomplete: (ctx, value) =>
-				searchTags(ctx.squirrelCtx.db, ctx.guild.id, value),
+			autocomplete: (ctx, value) => autocompleteTags(ctx, value),
 		},
 	},
 

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

@@ -4,8 +4,9 @@ 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";
 import { MAX_TAG_NAME_LENGTH } from "#plugin/tags/constants.ts";
+import { autocompleteTags } from "#plugin/tags/helper/command.ts";
 import { tagsConfigStore } from "#plugin/tags/index.ts";
-import { deleteTag, searchTags } from "#plugin/tags/storage/tags.ts";
+import { deleteTag } from "#plugin/tags/storage/tags.ts";
 
 export default defineCommand({
 	name: ["tagdelete", "deletetag", "tagdel", "deltag", "tagrm", "rmtag"],
@@ -19,8 +20,7 @@ export default defineCommand({
 			position: 0,
 			maxLength: MAX_TAG_NAME_LENGTH,
 
-			autocomplete: (ctx, value) =>
-				searchTags(ctx.squirrelCtx.db, ctx.guild.id, value),
+			autocomplete: (ctx, value) => autocompleteTags(ctx, value),
 		},
 	},
 

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

@@ -7,13 +7,9 @@ import {
 	MAX_TAG_CONTENT_LENGTH,
 	MAX_TAG_NAME_LENGTH,
 } from "#plugin/tags/constants.ts";
+import { autocompleteTags } from "#plugin/tags/helper/command.ts";
 import { tagsConfigStore } from "#plugin/tags/index.ts";
-import {
-	createTag,
-	searchTags,
-	updateTag,
-	upsertTag,
-} from "#plugin/tags/storage/tags.ts";
+import { createTag, updateTag, upsertTag } from "#plugin/tags/storage/tags.ts";
 
 export default defineCommand({
 	name: ["tagset", "settag"],
@@ -30,8 +26,22 @@ export default defineCommand({
 			maxLength: MAX_TAG_NAME_LENGTH,
 			greedy: false,
 
-			autocomplete: (ctx, value) =>
-				searchTags(ctx.squirrelCtx.db, ctx.guild.id, value),
+			async autocomplete(ctx, value) {
+				const names = await autocompleteTags(ctx, value);
+
+				// add the current value so pressing tab won't rudely correct it to something else
+				if (value.length !== 0) {
+					const valueIndex = names.indexOf(value);
+
+					if (valueIndex !== -1) {
+						names.splice(names.indexOf(value), 1);
+					}
+
+					names.unshift(value);
+				}
+
+				return names;
+			},
 		},
 		content: {
 			type: OptionType.String,

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

@@ -0,0 +1,15 @@
+import {
+	MAX_AUTOCOMPLETE_CHOICES,
+	type AutocompleteContext,
+} from "#plugin/core/public/command.ts";
+import { searchTagNames } from "#plugin/tags/storage/tags.ts";
+
+export async function autocompleteTags(
+	ctx: AutocompleteContext,
+	value: string,
+): Promise<string[]> {
+	return await searchTagNames(ctx.squirrelCtx.db, ctx.guild.id, {
+		name: value,
+		limit: MAX_AUTOCOMPLETE_CHOICES,
+	});
+}

backend/src/plugin/tags/storage/tags.ts

@@ -14,6 +14,12 @@ export type Tag = z.output<typeof Tag>;
 const JustInserted = z.strictObject({ inserted: z.boolean() });
 const JustNameArray = z.strictObject({ name: z.string() }).array();
 
+export interface TagQuery {
+	name: string;
+
+	limit: number;
+}
+
 export async function getTag(
 	db: Pool,
 	guildID: string,
@@ -34,17 +40,20 @@ export async function getTag(
 	return dbParse(Tag, result.rows[0]);
 }
 
-export async function searchTags(
+export async function searchTagNames(
 	db: Pool,
 	guildID: string,
-	name: string,
+	query: TagQuery,
 ): Promise<string[]> {
+	// FIXME: use casefold
 	const result = await db.query(
 		`
 			SELECT "name" FROM "tags_tags"
-			WHERE "guildID" = $1 AND position($2 in "name") > 0
+			WHERE "guildID" = $1 AND position(lower($2) in lower("name")) > 0
+			ORDER BY position(lower($2) in lower("name")), "name" ASC
+			LIMIT $3
 		`,
-		[guildID, name],
+		[guildID, query.name, query.limit],
 	);
 
 	return dbParse(JustNameArray, result.rows).map(({ name }) => name);