chore: release v0.0.20

apps/api-master/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@premid/api-master",
 	"type": "module",
-	"version": "0.0.1",
+	"version": "0.0.20",
 	"private": true,
 	"description": "PreMiD's api master",
 	"license": "MPL-2.0",
@@ -16,8 +16,16 @@
 	"dependencies": {
 		"@discordjs/rest": "^2.3.0",
 		"@envelop/sentry": "^9.0.0",
+		"@opentelemetry/api": "^1.9.0",
+		"@opentelemetry/exporter-prometheus": "^0.52.1",
+		"@opentelemetry/node": "^0.24.0",
 		"@sentry/node": "^8.17.0",
 		"cron": "^3.1.7",
-		"ioredis": "^5.3.2"
+		"debug": "^4.3.6",
+		"ioredis": "^5.3.2",
+		"p-limit": "^6.1.0"
+	},
+	"devDependencies": {
+		"@types/debug": "^4.1.12"
 	}
 }

apps/api-master/src/functions/clearOldSessions.ts

@@ -1,35 +1,111 @@
 import { REST } from "@discordjs/rest";
-import { redis } from "../index.js";
+import pLimit from "p-limit";
+import { mainLog, redis } from "../index.js";
 
-export async function clearOldSesssions() {
-	const sessions = await redis.hgetall("pmd-api.sessions");
+let inProgress = false;
+export async function clearOldSessions() {
+	if (inProgress) {
+		mainLog("Session cleanup already in progress");
+		return;
+	}
+
+	inProgress = true;
 	const now = Date.now();
+	let cursor = "0";
+	let totalSessions = 0;
+	let cleared = 0;
+	const batchSize = 100;
+	let keysToDelete: string[] = [];
 
-	for (const [key, value] of Object.entries(sessions)) {
-		const session = JSON.parse(value) as {
-			token: string;
-			session: string;
-			lastUpdated: number;
-		};
+	mainLog("Starting session cleanup");
 
-		// ? If the session is younger than 30seconds, skip it
-		if (now - session.lastUpdated < 30000)
-			continue;
+	const limit = pLimit(100); // Create a limit of 100 concurrent operations
 
-		// ? Delete the session
-		try {
-			const discord = new REST({ version: "10", authPrefix: "Bearer" });
-			discord.setToken(session.token);
-			await discord.post("/users/@me/headless-sessions/delete", {
-				body: {
-					token: session.session,
-				},
-			});
-		}
-		catch (error) {
-			console.error(error);
+	do {
+		const [nextCursor, result] = await redis.hscan("pmd-api.sessions", cursor, "COUNT", batchSize);
+		cursor = nextCursor;
+		totalSessions += result.length / 2;
+
+		const deletePromises = [];
+
+		for (let i = 0; i < result.length; i += 2) {
+			const key = result[i];
+			const value = result[i + 1];
+
+			if (!key || !value) {
+				continue;
+			}
+
+			const session = JSON.parse(value) as {
+				token: string;
+				session: string;
+				lastUpdated: number;
+			};
+
+			if (now - session.lastUpdated < 30000)
+				continue;
+
+			deletePromises.push(limit(() => deleteSession(session, key)));
 		}
 
-		await redis.hdel("pmd-api.sessions", key);
+		const results = await Promise.allSettled(deletePromises);
+		results.forEach((result) => {
+			if (result.status === "fulfilled" && result.value) {
+				keysToDelete.push(result.value);
+				cleared++;
+			}
+		});
+
+		if (keysToDelete.length >= batchSize) {
+			await redis.hdel("pmd-api.sessions", ...keysToDelete);
+			keysToDelete = [];
+		}
+	} while (cursor !== "0");
+
+	if (keysToDelete.length > 0) {
+		await redis.hdel("pmd-api.sessions", ...keysToDelete);
+	}
+
+	if (totalSessions === 0) {
+		mainLog("No sessions to clear");
+	}
+	else {
+		mainLog(`Checked ${totalSessions} sessions, cleared ${cleared}`);
+	}
+
+	inProgress = false;
+}
+
+async function deleteSession(session: { token: string; session: string }, key: string): Promise<string> {
+	const abortController = new AbortController();
+	const timeoutId = setTimeout(() => abortController.abort("Timeout"), 5000); //* 5 second timeout
+
+	try {
+		const discord = new REST({ version: "10", authPrefix: "Bearer" });
+		discord.setToken(session.token);
+
+		await discord.post("/users/@me/headless-sessions/delete", {
+			signal: abortController.signal,
+			body: {
+				token: session.session,
+			},
+		});
+
+		clearTimeout(timeoutId);
+		return key;
+	}
+	catch (error) {
+		clearTimeout(timeoutId);
+
+		if (error instanceof Error && error.name === "AbortError") {
+			mainLog(`Session deletion aborted due to timeout for key ${key}`);
+		}
+		else if (error instanceof Error) {
+			mainLog(`Failed to delete session for key ${key}: [${error.name}] ${error.message}`);
+		}
+		else {
+			mainLog(`Failed to delete session for key ${key}: Unknown error`);
+		}
+		return key;
 	}
 }

apps/api-master/src/functions/setCounter.ts

@@ -0,0 +1,13 @@
+import { redis } from "../index.js";
+import { counter } from "../tracing.js";
+
+let activeActivities = 0;
+counter.add(0);
+export async function setCounter() {
+	const length = await redis.hlen("pmd-api.sessions");
+	if (length === activeActivities)
+		return;
+	const diff = length - activeActivities;
+	activeActivities = length;
+	counter.add(diff);
+}

apps/api-master/src/index.ts

@@ -1,15 +1,32 @@
 import { CronJob } from "cron";
 
+import debug from "debug";
+import { clearOldSessions } from "./functions/clearOldSessions.js";
 import createRedis from "./functions/createRedis.js";
-import { clearOldSesssions } from "./functions/clearOldSessions.js";
+import { setCounter } from "./functions/setCounter.js";
+import "./tracing.js";
 
 export const redis = createRedis();
 
+export const mainLog = debug("api-master");
+
+debug("Starting cron job to clear old sessions");
+
 void new CronJob(
 	// Every 5 seconds
 	"*/5 * * * * *",
-	async () => {
-		clearOldSesssions();
+	() => {
+		clearOldSessions();
+	},
+	undefined,
+	true,
+);
+
+void new CronJob(
+	// Every second
+	"* * * * * *",
+	() => {
+		setCounter();
 	},
 	undefined,
 	true,

apps/api-master/src/tracing.ts

@@ -0,0 +1,18 @@
+import { ValueType } from "@opentelemetry/api";
+import { PrometheusExporter } from "@opentelemetry/exporter-prometheus";
+import { MeterProvider } from "@opentelemetry/sdk-metrics";
+
+const prometheusExporter = new PrometheusExporter();
+
+const provider = new MeterProvider({
+	readers: [prometheusExporter],
+});
+
+const meter = provider.getMeter("nice");
+
+export const counter = meter.createUpDownCounter("active_activites", {
+	description: "Number of active activities",
+	valueType: ValueType.INT,
+});
+
+prometheusExporter.startServer();

apps/api-worker/environment.d.ts

@@ -2,5 +2,6 @@ declare namespace NodeJS {
 	export interface ProcessEnv {
 		NODE_ENV?: "development" | "production" | "test";
 		DATABASE_URL?: string;
+		SESSION_KEEP_ALIVE_INTERVAL?: string;
 	}
 }

apps/api-worker/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@premid/api-worker",
 	"type": "module",
-	"version": "0.0.2",
+	"version": "0.0.9",
 	"private": true,
 	"description": "PreMiD's api",
 	"license": "MPL-2.0",
@@ -23,9 +23,13 @@
 		"@escape.tech/graphql-armor-max-directives": "^2.2.0",
 		"@escape.tech/graphql-armor-max-tokens": "^2.4.0",
 		"@fastify/websocket": "^10.0.1",
+		"@opentelemetry/api": "^1.9.0",
+		"@opentelemetry/exporter-prometheus": "^0.52.1",
+		"@opentelemetry/node": "^0.24.0",
 		"@premid/db": "workspace:*",
 		"@sentry/node": "^8.17.0",
-		"arktype": "2.0.0-beta.2",
+		"arktype": "2.0.0-rc.6",
+		"defu": "^6.1.4",
 		"discord-api-types": "^0.37.92",
 		"fastify": "^4.28.1",
 		"graphql": "^16.9.0",

apps/api-worker/src/classes/Socket.ts

@@ -1,35 +1,37 @@
-import { scope, type } from "arktype";
-import type { FastifyRequest } from "fastify";
-import WebSocket from "ws";
-import type { RawData } from "ws";
 import { REST } from "@discordjs/rest";
+import { scope, type } from "arktype";
 import { Routes } from "discord-api-types/v10";
+import WebSocket from "ws";
+import type { FastifyRequest } from "fastify";
+import type { RawData } from "ws";
 import { redis } from "../functions/createServer.js";
+import { counter } from "../tracing.js";
 
 const schema = scope({
 	token: {
 		"+": "delete",
 		"type": "'token'",
-		"token": "format.trim",
-		"expires": "unixTimestamp",
+		"token": "string.trim",
+		"expires": "number.epoch",
 	},
 	session: {
 		"+": "delete",
 		"type": "'session'",
-		"token": "format.trim",
+		"token": "string.trim",
 	},
 	validMessages: "token | session",
 }).export();
 
 export class Socket {
 	currentToken: typeof schema.token.infer | undefined;
-	currentSesssion: typeof schema.session.infer | undefined;
+	currentSession: typeof schema.session.infer | undefined;
 	discord = new REST({ version: "10", authPrefix: "Bearer" });
 
 	constructor(
 		public readonly socket: WebSocket.WebSocket,
 		public readonly request: FastifyRequest,
 	) {
+		counter.add(1);
 		socket.on("message", this.onMessage.bind(this));
 		socket.on("close", () => this.onClose());
 	}
@@ -53,7 +55,7 @@ export class Socket {
 				}
 				case "session": {
 					await redis.hdel("pmd-api.sessions", out.token);
-					this.currentSesssion = out;
+					this.currentSession = out;
 					break;
 				}
 			}
@@ -65,14 +67,16 @@ export class Socket {
 	}
 
 	async onClose() {
-		if (!this.currentToken || !this.currentSesssion)
+		counter.add(-1);
+
+		if (!this.currentToken || !this.currentSession)
 			return;
 
 		await redis.hset(
 			"pmd-api.sessions",
-			this.currentSesssion.token,
+			this.currentSession.token,
 			JSON.stringify({
-				session: this.currentSesssion.token,
+				session: this.currentSession.token,
 				token: this.currentToken.token,
 				lastUpdated: Date.now(),
 			}),

apps/api-worker/src/functions/createServer.ts

@@ -1,18 +1,20 @@
 import { readFile } from "node:fs/promises";
 import { resolve } from "node:path";
-
+import process from "node:process";
 import { useSentry } from "@envelop/sentry";
 import { maxAliasesPlugin } from "@escape.tech/graphql-armor-max-aliases";
 import { maxDepthPlugin } from "@escape.tech/graphql-armor-max-depth";
 import { maxDirectivesPlugin } from "@escape.tech/graphql-armor-max-directives";
 import { maxTokensPlugin } from "@escape.tech/graphql-armor-max-tokens";
-import type { FastifyReply, FastifyRequest } from "fastify";
-import fastify from "fastify";
-import { createSchema, createYoga } from "graphql-yoga";
-
 import fastifyWebsocket from "@fastify/websocket";
-import { resolvers } from "../graphql/resolvers/v5/index.js";
+import { defu } from "defu";
+import fastify from "fastify";
+
+import { createSchema, createYoga } from "graphql-yoga";
+import type { FastifyReply, FastifyRequest } from "fastify";
 import { Socket } from "../classes/Socket.js";
+import { resolvers } from "../graphql/resolvers/v5/index.js";
+import { sessionKeepAlive } from "../routes/sessionKeepAlive.js";
 import createRedis from "./createRedis.js";
 
 export interface FastifyContext {
@@ -84,6 +86,20 @@ export default async function createServer() {
 		});
 	});
 
+	app.get("/v5/feature-flags", async (request, reply) => {
+		const disabledFlags = process.env.DISABLED_FEATURE_FLAGS?.split(",") ?? [];
+		const flags = Object.fromEntries(disabledFlags.map(flag => [flag, false]));
+
+		const test = defu(flags, {
+			WebSocketManager: true,
+			SessionKeepAlive: true,
+		});
+
+		void reply.send(test);
+	});
+
+	app.post("/v5/session-keep-alive", sessionKeepAlive);
+
 	return app;
 }
 

apps/api-worker/src/graphql/resolvers/v5/Mutation/addScience.ts

@@ -1,13 +1,13 @@
 import { type } from "arktype";
-import type { MutationResolvers } from "../../../../generated/graphql-v5.js";
 import { redis } from "../../../../functions/createServer.js";
+import type { MutationResolvers } from "../../../../generated/graphql-v5.js";
 
 const addScienceSchema = type({
-	identifier: "uuid & format.lowercase",
-	presences: "format.trim[]",
+	identifier: "string.uuid & string.lower",
+	presences: "string.trim[]",
 	platform: {
-		arch: "format.trim", // ? "format.trim" is just a string that is trimmed
-		os: "format.trim",
+		arch: "string.trim",
+		os: "string.trim",
 	},
 });
 

apps/api-worker/src/graphql/resolvers/v5/Mutation/heartbeat.ts

@@ -2,18 +2,18 @@ import { type } from "arktype";
 import type { MutationResolvers } from "../../../../generated/graphql-v5.js";
 
 const heartbeatSchema = type({
-	identifier: "uuid & format.lowercase",
+	identifier: "string.uuid & string.lower",
 	presences: {
-		service: "format.trim",
-		version: "semver",
-		language: "format.trim",
-		since: "unixTimestamp",
+		service: "string.trim",
+		version: "string.semver",
+		language: "string.trim",
+		since: "number.epoch",
 	},
 	extension: {
-		"version": "semver",
-		"language": "format.trim",
+		"version": "string.semver",
+		"language": "string.trim",
 		"connected?": {
-			app: "integer",
+			app: "number.integer",
 			discord: "boolean",
 		},
 	},

apps/api-worker/src/graphql/resolvers/v5/Query/presences.ts

@@ -1,6 +1,6 @@
 import { Presence } from "@premid/db";
-import type { PresenceSchema } from "@premid/db/Presence.js";
 import { parseResolveInfo } from "graphql-parse-resolve-info";
+import type { PresenceSchema } from "@premid/db/Presence.js";
 import type { FilterQuery } from "mongoose";
 
 import type { QueryResolvers } from "../../../../generated/graphql-v5.js";

apps/api-worker/src/graphql/resolvers/v5/index.ts

@@ -1,6 +1,6 @@
 import type { Resolvers } from "../../../generated/graphql-v5.js";
-import { Query } from "./Query/index.js";
 import { Mutation } from "./Mutation/index.js";
+import { Query } from "./Query/index.js";
 
 export const resolvers: Resolvers = {
 	Query,

apps/api-worker/src/graphql/schema/v5/addScience.gql

@@ -1,9 +1,5 @@
 type Mutation {
-	addScience(
-		identifier: String!
-		presences: [String!]!
-		platform: PlatformInput!
-	): AddScienceResult
+	addScience(identifier: String!, presences: [String!]!, platform: PlatformInput!): AddScienceResult
 }
 
 input PlatformInput {

apps/api-worker/src/index.ts

@@ -2,7 +2,9 @@
 import process from "node:process";
 import * as Sentry from "@sentry/node";
 import { connect } from "mongoose";
+import "./tracing.js";
 
+// eslint-disable-next-line perfectionist/sort-imports
 import createServer from "./functions/createServer.js";
 
 // TODO SETUP SENTRY

apps/api-worker/src/routes/sessionKeepAlive.ts

@@ -0,0 +1,60 @@
+import process from "node:process";
+import { REST } from "@discordjs/rest";
+import { type } from "arktype";
+import { Routes } from "discord-api-types/v10";
+import type { FastifyReply, FastifyRequest } from "fastify";
+import { redis } from "../functions/createServer.js";
+
+const schema = type({
+	token: "string.trim",
+	session: "string.trim",
+	version: "string.semver & string.trim",
+	scienceId: "string.trim",
+});
+
+export async function sessionKeepAlive(request: FastifyRequest, reply: FastifyReply) {
+	//* Get the headers
+	const out = schema({
+		token: request.headers["x-token"],
+		session: request.headers["x-session"],
+		version: request.headers["x-version"] ?? "2.6.8",
+		scienceId: request.headers["x-science-id"] ?? request.headers["x-token"],
+	});
+
+	if (out instanceof type.errors)
+		return reply.status(400).send({ code: "MISSING_HEADERS", message: out.message });
+
+	if (!await isTokenValid(out.token))
+		return reply.status(400).send({ code: "INVALID_TOKEN", message: "The token is invalid" });
+
+	await redis.hset(
+		"pmd-api.sessions",
+		out.scienceId,
+		JSON.stringify({
+			session: out.session,
+			token: out.token,
+			lastUpdated: Date.now(),
+		}),
+	);
+
+	const interval = Number.parseInt(process.env.SESSION_KEEP_ALIVE_INTERVAL ?? "5000");
+
+	return reply.status(200).send({
+		code: "OK",
+		message: "Session updated",
+		nextUpdate: interval,
+	});
+}
+
+async function isTokenValid(token: string) {
+	const discord = new REST({ version: "10", authPrefix: "Bearer" });
+
+	discord.setToken(token);
+	try {
+		await discord.get(Routes.user());
+		return true;
+	}
+	catch {
+		return false;
+	}
+}

apps/api-worker/src/tracing.ts

@@ -0,0 +1,18 @@
+import { ValueType } from "@opentelemetry/api";
+import { PrometheusExporter } from "@opentelemetry/exporter-prometheus";
+import { MeterProvider } from "@opentelemetry/sdk-metrics";
+
+const prometheusExporter = new PrometheusExporter();
+
+const provider = new MeterProvider({
+	readers: [prometheusExporter],
+});
+
+const meter = provider.getMeter("nice");
+
+export const counter = meter.createUpDownCounter("active_activites", {
+	description: "Number of active activities",
+	valueType: ValueType.INT,
+});
+
+prometheusExporter.startServer();

apps/pd/src/routes/createFromBase64.ts

@@ -1,9 +1,9 @@
 import crypto from "node:crypto";
 
 import process from "node:process";
-import type { RouteHandlerMethod } from "fastify";
 import mime from "mime-types";
 import { nanoid } from "nanoid";
+import type { RouteHandlerMethod } from "fastify";
 
 import keyv from "../keyv.js";
 

apps/pd/src/routes/createFromImage.test.ts

@@ -1,8 +1,8 @@
+import { Buffer } from "node:buffer";
 import { readFile } from "node:fs/promises";
+
 import type { RequestOptions } from "node:http";
 import type { AddressInfo } from "node:net";
-
-import { Buffer } from "node:buffer";
 import { afterAll, beforeAll, describe, it } from "vitest";
 
 import { createServer } from "../functions/createServer.js";

apps/pd/src/routes/createFromImage.ts

@@ -1,9 +1,9 @@
 import crypto from "node:crypto";
 
 import process from "node:process";
-import type { RouteHandlerMethod } from "fastify";
 import { fileTypeFromBuffer } from "file-type";
 import { nanoid } from "nanoid";
+import type { RouteHandlerMethod } from "fastify";
 
 import keyv from "../keyv.js";
 

apps/pd/src/routes/createShortenedLink.ts

@@ -1,8 +1,8 @@
 import crypto from "node:crypto";
 
 import process from "node:process";
-import type { RouteHandlerMethod } from "fastify";
 import { nanoid } from "nanoid";
+import type { RouteHandlerMethod } from "fastify";
 
 import keyv from "../keyv.js";
 

apps/pd/src/routes/getFullLink.test.ts

@@ -1,6 +1,6 @@
-import { readFile } from "node:fs/promises";
-
 import { Buffer } from "node:buffer";
+
+import { readFile } from "node:fs/promises";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 
 import { createServer } from "../functions/createServer.js";

apps/pd/src/routes/getFullLink.ts

@@ -1,6 +1,6 @@
-import crypto from "node:crypto";
-
 import { Buffer } from "node:buffer";
+
+import crypto from "node:crypto";
 import type { RouteHandlerMethod } from "fastify";
 
 import isInCIDRRange from "../functions/isInCidRange.js";

apps/schema-server/src/index.ts

@@ -2,9 +2,9 @@ import { extname, resolve } from "node:path";
 
 import process from "node:process";
 import helmet from "@fastify/helmet";
-import type { RequestGenericInterface } from "fastify";
 import fastify from "fastify";
 import { globby } from "globby";
+import type { RequestGenericInterface } from "fastify";
 
 export const app = fastify();
 

apps/website/nuxt.config.ts

@@ -99,10 +99,10 @@ export default defineNuxtConfig({
 		"@nuxtjs/seo",
 		"floating-vue/nuxt",
 		"@nuxtjs/device",
-		/* "@nuxt/scripts", */
 		"nuxt-typed-router",
 		"nuxt-security",
 		"@pinia/nuxt",
+		"@nuxt/scripts",
 	],
 	runtimeConfig: {
 		// Use NUXT_ prefixed env vars for nuxt config

apps/website/package.json

@@ -11,41 +11,41 @@
 		"postinstall": "nuxt prepare"
 	},
 	"dependencies": {
-		"@discord-user-card/vue": "^0.0.8",
-		"@discordjs/rest": "^2.3.0",
+		"@discord-user-card/vue": "^0.0.9",
+		"@discordjs/rest": "^2.4.0",
 		"@fortawesome/fontawesome-svg-core": "^6.6.0",
 		"@fortawesome/free-brands-svg-icons": "^6.6.0",
 		"@fortawesome/free-solid-svg-icons": "^6.6.0",
 		"@fortawesome/vue-fontawesome": "^3.0.8",
-		"@nuxt/fonts": "^0.7.1",
-		"@nuxt/image": "^1.7.0",
-		"@nuxt/kit": "^3.12.3",
-		"@nuxt/scripts": "^0.6.3",
-		"@nuxtjs/device": "^3.1.1",
+		"@nuxt/fonts": "^0.7.2",
+		"@nuxt/image": "^1.8.0",
+		"@nuxt/kit": "^3.13.1",
+		"@nuxt/scripts": "^0.8.5",
+		"@nuxtjs/device": "^3.2.2",
 		"@nuxtjs/google-fonts": "^3.2.0",
-		"@nuxtjs/i18n": "^8.3.1",
-		"@nuxtjs/seo": "2.0.0-rc.15",
-		"@pinia/nuxt": "^0.5.1",
-		"@rollup/rollup-linux-arm64-gnu": "^4.18.1",
+		"@nuxtjs/i18n": "^8.5.2",
+		"@nuxtjs/seo": "2.0.0-rc.21",
+		"@pinia/nuxt": "^0.5.4",
+		"@rollup/rollup-linux-arm64-gnu": "^4.21.2",
 		"@types/lodash": "^4.17.7",
 		"@types/tinycolor2": "^1.4.6",
-		"@unocss/nuxt": "^0.61.5",
-		"@unocss/reset": "^0.61.5",
-		"@unocss/transformer-directives": "^0.61.5",
-		"@vueuse/core": "^10.11.0",
-		"@vueuse/nuxt": "^10.11.0",
+		"@unocss/nuxt": "^0.62.3",
+		"@unocss/reset": "^0.62.3",
+		"@unocss/transformer-directives": "^0.62.3",
+		"@vueuse/core": "^11.0.3",
+		"@vueuse/nuxt": "^11.0.3",
 		"bowser": "^2.11.0",
-		"discord-api-types": "^0.37.92",
+		"discord-api-types": "^0.37.100",
 		"floating-vue": "^5.2.2",
 		"lodash": "^4.17.21",
-		"nuxt": "^3.12.3",
+		"nuxt": "^3.13.1",
 		"nuxt-graphql-client": "^0.2.35",
 		"nuxt-security": "2.0.0-rc.9",
 		"nuxt-typed-router": "^3.6.5",
-		"sass": "^1.77.8",
+		"sass": "^1.78.0",
 		"tinycolor2": "^1.6.0",
-		"vue": "^3.4.32",
-		"vue-router": "^4.4.0",
-		"vue-tsc": "^2.0.26"
+		"vue": "^3.5.3",
+		"vue-router": "^4.4.3",
+		"vue-tsc": "^2.1.6"
 	}
 }

apps/website/pages/store/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LocationQuery } from "vue-router";
-import { useExtensionStore } from "~/stores/useExtension";
 import breakpoints from "~/breakpoints";
+import { useExtensionStore } from "~/stores/useExtension";
 
 const extension = useExtensionStore();
 
@@ -19,17 +19,23 @@ const selectedCategory = ref("");
 
 const sortBy = ref<string>("");
 const pageSize = ref(9);
-const totalPages = computed(() => Math.ceil(data.value.presences.length / pageSize.value));
+const totalPages = computed(() =>
+	Math.ceil(data.value.presences.length / pageSize.value),
+);
 
 const presences = computed(() => {
 	const startIndex = (currentPage.value - 1) * pageSize.value;
 	const endIndex = startIndex + pageSize.value;
 	const sortedPresences = (
 		selectedCategory.value
-			? data.value.presences.filter(p => p.metadata.category === selectedCategory.value)
+			? data.value.presences.filter(
+				p => p.metadata.category === selectedCategory.value,
+			)
 			: data.value.presences
 	)
-		.filter(p => p.metadata.service.toLowerCase().includes(searchTerm.value.toLowerCase()))
+		.filter(p =>
+			p.metadata.service.toLowerCase().includes(searchTerm.value.toLowerCase()),
+		)
 		.sort((a, b) => {
 			if (sortBy.value === t("component.searchBar.sort.mostUsed"))
 				return b.users - a.users;
@@ -37,7 +43,7 @@ const presences = computed(() => {
 				return a.metadata.service.localeCompare(b.metadata.service);
 			return 0;
 		})
-		.sort(a => extension.presences.includes(a.metadata.service) ? -1 : 1);
+		.sort(a => (extension.presences.includes(a.metadata.service) ? -1 : 1));
 
 	return {
 		data: sortedPresences.slice(startIndex, endIndex),
@@ -48,7 +54,9 @@ const presences = computed(() => {
 
 async function handleQuery(query: LocationQuery) {
 	const pageQuery = query.page?.toString() || "1";
-	const parsedPage = Number.parseInt(Number.isNaN(Number(pageQuery)) ? "1" : pageQuery);
+	const parsedPage = Number.parseInt(
+		Number.isNaN(Number(pageQuery)) ? "1" : pageQuery,
+	);
 	currentPage.value = Math.max(1, Math.min(parsedPage, totalPages.value));
 	searchTerm.value = query.search?.toString() || "";
 	selectedCategory.value = query.category?.toString() || "";
@@ -71,10 +79,16 @@ onUnmounted(() => {
 	window.removeEventListener("resize", resizePageSize);
 });
 
-function getLinkProperties({ page = currentPage.value, search = searchTerm.value, category = selectedCategory.value }) {
+function getLinkProperties({
+	page = currentPage.value,
+	search = searchTerm.value,
+	category = selectedCategory.value,
+}) {
 	const query = { category, page, search };
 	return {
-		query: Object.fromEntries(Object.entries(query).filter(([, value]) => value !== "")),
+		query: Object.fromEntries(
+			Object.entries(query).filter(([, value]) => value !== ""),
+		),
 	};
 }
 
@@ -101,18 +115,35 @@ onMounted(() => {
 	<div>
 		<StoreSearchBar v-model:sort-order="sortBy" />
 		<!-- Presences Grid or Empty State -->
-		<div v-if="presences.data.length === 0" class="flex justify-center items-center rounded-lg h-50">
-			<div class="flex flex-col items-center justify-center p-5 text-lg text-primary-highlight">
+		<div
+			v-if="presences.data.length === 0"
+			class="flex justify-center items-center rounded-lg h-50"
+		>
+			<div
+				class="flex flex-col items-center justify-center p-5 text-lg text-primary-highlight"
+			>
 				<FAIcon :icon="['fa', 'frown']" class="mb-2 text-3xl" />
 				<p>{{ $t("page.store.noPresence") }}</p>
 			</div>
 		</div>
-		<div v-if="presences.data.length > 0" class="items-center mt-5 flex-col flex sm:mt-10 min-h-688px">
-			<div class="gap-4 grid grid-cols-[fit-content(0%)] sm-md:grid-cols-[repeat(2,fit-content(0%))] lg:grid-cols-[repeat(3,fit-content(0%))] overflow-unset">
-				<StoreCard v-for="presence in presences.data" :key="presence.metadata.service" :presence="presence" />
+		<div
+			v-if="presences.data.length > 0"
+			class="items-center mt-5 flex-col flex sm:mt-10 min-h-688px"
+		>
+			<div
+				class="gap-4 grid grid-cols-[fit-content(0%)] sm-md:grid-cols-[repeat(2,fit-content(0%))] lg:grid-cols-[repeat(3,fit-content(0%))] overflow-unset"
+			>
+				<StoreCard
+					v-for="presence in presences.data"
+					:key="presence.metadata.service"
+					:presence="presence"
+				/>
 			</div>
 			<!-- Pagination -->
-			<div v-if="presences.data.length > 0" class="flex mt-5 mb-10 flex-wrap justify-center sticky z-40">
+			<div
+				v-if="presences.data.length > 0"
+				class="flex mt-5 mb-10 flex-wrap justify-center sticky z-40"
+			>
 				<NuxtLink
 					:to="getLinkProperties({ page: 1 })"
 					:replace="true"
@@ -148,7 +179,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-#filters {
+	#filters {
 	&::-webkit-scrollbar {
 		width: 0.4rem;
 		height: 100%;

apps/website/plugins/fontawesome.ts

@@ -1,4 +1,5 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBrave, faChrome, faDiscord, faEdge, faFirefox, faGithub, faOpera, faPatreon, faSafari, faXTwitter } from "@fortawesome/free-brands-svg-icons";
 import {
 	faBars,
 	faBolt,
@@ -33,7 +34,6 @@ import {
 	faUsers,
 	faVideo,
 } from "@fortawesome/free-solid-svg-icons";
-import { faBrave, faChrome, faDiscord, faEdge, faFirefox, faGithub, faOpera, faPatreon, faSafari, faXTwitter } from "@fortawesome/free-brands-svg-icons";
 
 export default defineNuxtPlugin(() => {
 	library.add(

apps/website/server/api/getStaffData.ts

@@ -1,8 +1,8 @@
+import { ActivityType, PresenceUpdateStatus, flagsToBadges } from "@discord-user-card/vue";
 import { REST } from "@discordjs/rest";
-import type { RESTGetAPIGuildMemberResult, RESTGetAPIGuildRolesResult } from "discord-api-types/v10";
 import { Routes } from "discord-api-types/v10";
 import type { DiscordUserCardActivity, DiscordUserCardUser } from "@discord-user-card/vue";
-import { ActivityType, PresenceUpdateStatus, flagsToBadges } from "@discord-user-card/vue";
+import type { RESTGetAPIGuildMemberResult, RESTGetAPIGuildRolesResult } from "discord-api-types/v10";
 
 const { discord_bot_token } = useRuntimeConfig();
 const rest = new REST({ version: "10" }).setToken(discord_bot_token);
@@ -61,7 +61,8 @@ const activities: Map<string, DiscordUserCardActivity[]> = new Map()
 				},
 			],
 		} satisfies DiscordUserCardActivity,
-	]).set("193714715631812608", [
+	])
+	.set("193714715631812608", [
 		{
 			type: ActivityType.Playing,
 			name: "Kotobade Asobou",
@@ -73,7 +74,8 @@ const activities: Map<string, DiscordUserCardActivity[]> = new Map()
 			],
 			startTimestamp: Date.now(),
 		} satisfies DiscordUserCardActivity,
-	]).set("205984221859151873", [
+	])
+	.set("205984221859151873", [
 		{
 			type: ActivityType.Playing,
 			name: "BeatLeader",
@@ -90,7 +92,8 @@ const activities: Map<string, DiscordUserCardActivity[]> = new Map()
 				},
 			],
 		} satisfies DiscordUserCardActivity,
-	]).set("152155870917033985", [
+	])
+	.set("152155870917033985", [
 		{
 			type: ActivityType.Watching,
 			name: "YouTube",

apps/website/stores/useExtension.ts

@@ -22,6 +22,7 @@ export const useExtensionStore = defineStore("extension", () => {
 		}
 	}
 
+	// eslint-disable-next-line unicorn/consistent-function-scoping
 	function fetchPresences() {
 		window.dispatchEvent(new CustomEvent("PreMiD_GetPresenceList"));
 	}