Merge branch 'develop' into fix/search-filter-behavior

locales/en-US.yml

@@ -968,6 +968,9 @@ rateLimitExceeded: "Rate limit exceeded"
 cropImage: "Crop image"
 cropImageAsk: "Do you want to crop this image?"
 file: "File"
+image: "Image"
+video: "Video"
+audio: "Audio"
 recentNHours: "Last {n} hours"
 recentNDays: "Last {n} days"
 noEmailServerWarning: "Email server not configured."
@@ -1442,6 +1445,14 @@ _time:
   minute: "Minute(s)"
   hour: "Hour(s)"
   day: "Day(s)"
+_filters:
+  fromUser: "From user"
+  withFile: "With file"
+  fromDomain: "From domain"
+  notesBefore: "Posts before"
+  notesAfter: "Posts after"
+  followingOnly: "Following only"
+  followersOnly: "Followers only"
 _tutorial:
   title: "How to use Calckey"
   step1_1: "Welcome!"

packages/backend/native-utils/src/mastodon_api.rs

@@ -29,7 +29,7 @@ pub fn convert_id(in_id: String, id_convert_type: IdConvertType) -> napi::Result
                 Err(_) => {
                     return Err(Error::new(
                         Status::InvalidArg,
-                        "Unable to parse ID as MasstodonId",
+                        "Unable to parse ID as MastodonId",
                     ))
                 }
             };

packages/backend/src/server/api/endpoints/notes/search.ts

@@ -2,9 +2,9 @@ import { In } from "typeorm";
 import { Notes } from "@/models/index.js";
 import { Note } from "@/models/entities/note.js";
 import config from "@/config/index.js";
-import es from "../../../../db/elasticsearch.js";
+import es from "@/db/elasticsearch.js";
-import sonic from "../../../../db/sonic.js";
+import sonic from "@/db/sonic.js";
-import meilisearch, { MeilisearchNote } from "../../../../db/meilisearch.js";
+import meilisearch, { MeilisearchNote } from "@/db/meilisearch.js";
 import define from "../../define.js";
 import { makePaginationQuery } from "../../common/make-pagination-query.js";
 import { generateVisibilityQuery } from "../../common/generate-visibility-query.js";

packages/backend/src/server/api/endpoints/patrons.ts

@@ -20,8 +20,7 @@ export default define(meta, paramDef, async () => {
 	const cachedPatrons = await redisClient.get("patrons");
 	if (cachedPatrons) {
 		patrons = JSON.parse(cachedPatrons);
-	}
+	} else {
-	else {
 		patrons = await fetch(
 			"https://codeberg.org/calckey/calckey/raw/branch/develop/patrons.json",
 		).then((response) => response.json());

packages/backend/src/server/api/endpoints/stats.ts

@@ -1,6 +1,6 @@
 import { Instances, NoteReactions, Notes, Users } from "@/models/index.js";
 import define from "../define.js";
-import {} from "@/services/chart/index.js";
+import { driveChart, notesChart, usersChart } from "@/services/chart/index.js";
 import { IsNull } from "typeorm";
 
 export const meta = {
@@ -60,19 +60,25 @@ export const paramDef = {
 } as const;
 
 export default define(meta, paramDef, async () => {
+	const notesChartData = await notesChart.getChart("hour", 1, null);
+	const notesCount =
+		notesChartData.local.total[0] + notesChartData.remote.total[0];
+	const originalNotesCount = notesChartData.local.total[0];
+
+	const usersChartData = await usersChart.getChart("hour", 1, null);
+	const usersCount =
+		usersChartData.local.total[0] + usersChartData.remote.total[0];
+	const originalUsersCount = usersChartData.local.total[0];
+	const driveChartData = await driveChart.getChart("hour", 1, null);
+	//TODO: fixme currently returns 0
+	const driveUsageLocal = driveChartData.local.incSize[0];
+	const driveUsageRemote = driveChartData.remote.incSize[0];
+
 	const [
-		notesCount,
-		originalNotesCount,
-		usersCount,
-		originalUsersCount,
 		reactionsCount,
 		//originalReactionsCount,
 		instances,
 	] = await Promise.all([
-		Notes.count({ cache: 3600000 }), // 1 hour
-		Notes.count({ where: { userHost: IsNull() }, cache: 3600000 }),
-		Users.count({ cache: 3600000 }),
-		Users.count({ where: { host: IsNull() }, cache: 3600000 }),
 		NoteReactions.count({ cache: 3600000 }), // 1 hour
 		//NoteReactions.count({ where: { userHost: IsNull() }, cache: 3600000 }),
 		Instances.count({ cache: 3600000 }),
@@ -86,7 +92,7 @@ export default define(meta, paramDef, async () => {
 		reactionsCount,
 		//originalReactionsCount,
 		instances,
-		driveUsageLocal: 0,
+		driveUsageLocal,
-		driveUsageRemote: 0,
+		driveUsageRemote,
 	};
 });

packages/backend/src/server/api/endpoints/users/followers.ts

@@ -37,6 +37,12 @@ export const meta = {
 			code: "FORBIDDEN",
 			id: "3c6a84db-d619-26af-ca14-06232a21df8a",
 		},
+
+		nullFollowers: {
+			message: "No followers found.",
+			code: "NULL_FOLLOWERS",
+			id: "174a6507-a6c2-4925-8e5d-92fd08aedc9e",
+		},
 	},
 } as const;
 
@@ -97,7 +103,7 @@ export default define(meta, paramDef, async (ps, me) => {
 				followerId: me.id,
 			});
 			if (following == null) {
-				throw new ApiError(meta.errors.forbidden);
+				throw new ApiError(meta.errors.nullFollowers);
 			}
 		}
 	}

packages/client/src/components/MkButton.vue

@@ -2,7 +2,7 @@
 	<button
 		v-if="!link"
 		class="bghgjjyj _button"
-		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
+		:class="{ inline, primary, gradate, danger, rounded, full, mini, chip }"
 		:type="type"
 		@click="emit('click', $event)"
 		@mousedown="onMousedown"
@@ -41,7 +41,8 @@ const props = defineProps<{
 	wait?: boolean;
 	danger?: boolean;
 	full?: boolean;
-	mini: boolean;
+	mini?: boolean;
+	chip?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -198,6 +199,13 @@ function onMousedown(evt: MouseEvent): void {
 		border-radius: 100px;
 	}
 
+	&.chip {
+		padding: 4px 12px;
+		font-size: max(12px, 0.9em);
+		min-width: unset;
+		border-radius: 100px;
+	}
+
 	&:disabled {
 		opacity: 0.7;
 	}

packages/client/src/components/MkDialog.vue

@@ -2,7 +2,6 @@
 	<MkModal
 		ref="modal"
 		:prefer-type="'dialog'"
-		:z-priority="'high'"
 		@click="done(true)"
 		@closed="emit('closed')"
 	>
@@ -56,16 +55,29 @@
 			</header>
 			<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
 			<MkInput
+				ref="inputEl"
 				v-if="input && input.type !== 'paragraph'"
 				v-model="inputValue"
 				autofocus
-				:type="input.type || 'text'"
+				:type="input.type == 'search' ? 'search' : input.type || 'text'"
 				:placeholder="input.placeholder || undefined"
 				@keydown="onInputKeydown"
+				:style="{
+					width: input.type === 'search' ? '300px' : null,
+				}"
 			>
 				<template v-if="input.type === 'password'" #prefix
 					><i class="ph-password ph-bold ph-lg"></i
 				></template>
+				<template v-if="input.type === 'search'" #suffix>
+					<button
+						class="_buttonIcon"
+						@click.stop="openSearchFilters"
+						v-tooltip.noDelay="i18n.ts.filter"
+					>
+						<i class="ph-funnel ph-bold"></i>
+					</button>
+				</template>
 			</MkInput>
 			<MkTextarea
 				v-if="input && input.type === 'paragraph'"
@@ -95,6 +107,7 @@
 					</optgroup>
 				</template>
 			</MkSelect>
+
 			<div
 				v-if="(showOkButton || showCancelButton) && !actions"
 				:class="$style.buttons"
@@ -162,7 +175,9 @@ import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import MkSelect from "@/components/form/select.vue";
+import * as os from "@/os";
 import { i18n } from "@/i18n";
+import * as Acct from "calckey-js/built/acct";
 
 type Input = {
 	type: HTMLInputElement["type"];
@@ -193,7 +208,8 @@ const props = withDefaults(
 			| "warning"
 			| "info"
 			| "question"
-			| "waiting";
+			| "waiting"
+			| "search";
 		title: string;
 		text?: string;
 		input?: Input;
@@ -229,9 +245,11 @@ const emit = defineEmits<{
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
-const inputValue = ref(props.input?.default || null);
+const inputValue = ref(props.input?.default || "");
 const selectedValue = ref(props.select?.default || null);
 
+const inputEl = ref<typeof MkInput>();
+
 function done(canceled: boolean, result?) {
 	emit("done", { canceled, result });
 	modal.value?.close();
@@ -268,6 +286,115 @@ function onInputKeydown(evt: KeyboardEvent) {
 	}
 }
 
+function formatDateToYYYYMMDD(date) {
+	const year = date.getFullYear();
+	const month = ("0" + (date.getMonth() + 1)).slice(-2);
+	const day = ("0" + date.getDate()).slice(-2);
+	return `${year}${month}${day}`;
+}
+
+async function openSearchFilters(ev) {
+	await os.popupMenu(
+		[
+			{
+				icon: "ph-user ph-bold ph-lg",
+				text: i18n.ts._filters.fromUser,
+				action: () => {
+					os.selectUser().then((user) => {
+						inputValue.value += " from:@" + Acct.toString(user);
+					});
+				},
+			},
+			{
+				type: "parent",
+				text: i18n.ts._filters.withFile,
+				icon: "ph-paperclip ph-bold ph-lg",
+				children: [
+					{
+						text: i18n.ts.image,
+						icon: "ph-image-square ph-bold ph-lg",
+						action: () => {
+							inputValue.value += " has:image";
+						},
+					},
+					{
+						text: i18n.ts.video,
+						icon: "ph-video-camera ph-bold ph-lg",
+						action: () => {
+							inputValue.value += " has:video";
+						},
+					},
+					{
+						text: i18n.ts.audio,
+						icon: "ph-music-note ph-bold ph-lg",
+						action: () => {
+							inputValue.value += " has:audio";
+						},
+					},
+					{
+						text: i18n.ts.file,
+						icon: "ph-file ph-bold ph-lg",
+						action: () => {
+							inputValue.value += " has:file";
+						},
+					},
+				],
+			},
+			{
+				icon: "ph-link ph-bold ph-lg",
+				text: i18n.ts._filters.fromDomain,
+				action: () => {
+					inputValue.value += " domain:";
+				},
+			},
+			{
+				icon: "ph-calendar-blank ph-bold ph-lg",
+				text: i18n.ts._filters.notesBefore,
+				action: () => {
+					os.inputDate({
+						title: i18n.ts._filters.notesBefore,
+					}).then((res) => {
+						if (res.canceled) return;
+						inputValue.value +=
+							" before:" + formatDateToYYYYMMDD(res.result);
+					});
+				},
+			},
+			{
+				icon: "ph-calendar-blank ph-bold ph-lg",
+				text: i18n.ts._filters.notesAfter,
+				action: () => {
+					os.inputDate({
+						title: i18n.ts._filters.notesAfter,
+					}).then((res) => {
+						if (res.canceled) return;
+						inputValue.value +=
+							" after:" + formatDateToYYYYMMDD(res.result);
+					});
+				},
+			},
+			{
+				icon: "ph-eye ph-bold ph-lg",
+				text: i18n.ts._filters.followingOnly,
+				action: () => {
+					inputValue.value += " filter:following ";
+				},
+			},
+			{
+				icon: "ph-users-three ph-bold ph-lg",
+				text: i18n.ts._filters.followersOnly,
+				action: () => {
+					inputValue.value += " filter:followers ";
+				},
+			},
+		],
+		ev.target,
+		{ noReturnFocus: true }
+	);
+	inputEl.value.focus();
+	inputEl.value.selectRange(inputValue.value.length, inputValue.value.length); // cursor at end
+}
+
 onMounted(() => {
 	document.addEventListener("keydown", onKeydown);
 });

packages/client/src/components/MkMenu.vue

@@ -1,5 +1,9 @@
 <template>
-	<FocusTrap :active="false" ref="focusTrap">
+	<FocusTrap
+		:active="false"
+		ref="focusTrap"
+		:return-focus-on-deactivate="!noReturnFocus"
+	>
 		<div tabindex="-1">
 			<div
 				ref="itemsEl"
@@ -205,6 +209,7 @@ const props = defineProps<{
 	align?: "center" | string;
 	width?: number;
 	maxHeight?: number;
+	noReturnFocus?: boolean;
 }>();
 
 const emit = defineEmits<{

packages/client/src/components/MkModal.vue

@@ -18,7 +18,10 @@
 		@enter="emit('opening')"
 		@after-enter="onOpened"
 	>
-		<FocusTrap v-model:active="isActive">
+		<FocusTrap
+			v-model:active="isActive"
+			:return-focus-on-deactivate="!noReturnFocus"
+		>
 			<div
 				v-show="manualShowing != null ? manualShowing : showing"
 				v-hotkey.global="keymap"
@@ -102,6 +105,7 @@ const props = withDefaults(
 		zPriority?: "low" | "middle" | "high";
 		noOverlap?: boolean;
 		transparentBg?: boolean;
+		noReturnFocus?: boolean;
 	}>(),
 	{
 		manualShowing: null,
@@ -111,6 +115,7 @@ const props = withDefaults(
 		zPriority: "low",
 		noOverlap: true,
 		transparentBg: false,
+		noReturnFocus: false,
 	}
 );
 
@@ -189,12 +194,16 @@ function close(ev, opts: { useSendAnimation?: boolean } = {}) {
 	if (props.src) props.src.style.pointerEvents = "auto";
 	showing = false;
 	emit("close");
-	focusedElement.focus();
+	if (!props.noReturnFocus) {
+		focusedElement.focus();
+	}
 }
 
 function onBgClick() {
 	if (contentClicking) return;
-	focusedElement.focus();
+	if (!props.noReturnFocus) {
+		focusedElement.focus();
+	}
 	emit("click");
 }
 

packages/client/src/components/MkNotePreview.vue

@@ -7,7 +7,7 @@
 			</div>
 			<div class="body">
 				<div class="content">
-					<Mfm 
+					<Mfm
 						:text="preprocess(text).trim()"
 						:author="$i"
 						:i="$i"

packages/client/src/components/MkPopupMenu.vue

@@ -18,6 +18,7 @@
 			:as-drawer="type === 'drawer'"
 			class="sfhdhdhq"
 			:class="{ drawer: type === 'drawer' }"
+			:no-return-focus="noReturnFocus"
 			@close="modal.close()"
 		/>
 	</MkModal>
@@ -35,6 +36,7 @@ defineProps<{
 	width?: number;
 	viaKeyboard?: boolean;
 	src?: any;
+	noReturnFocus?;
 }>();
 
 const emit = defineEmits<{

packages/client/src/components/form/input.vue

@@ -108,6 +108,7 @@ const suffixEl = ref<HTMLElement>();
 const height = props.small ? 36 : props.large ? 40 : 38;
 
 const focus = () => inputEl.value.focus();
+const selectRange = (start, end) => inputEl.value.setSelectionRange(start, end);
 const onInput = (ev: KeyboardEvent) => {
 	changed.value = true;
 	emit("change", ev);
@@ -178,6 +179,11 @@ onMounted(() => {
 		}
 	});
 });
+
+defineExpose({
+	focus,
+	selectRange,
+});
 </script>
 
 <style lang="scss" scoped>
@@ -255,6 +261,9 @@ onMounted(() => {
 					white-space: nowrap;
 					text-overflow: ellipsis;
 				}
+				> :deep(button) {
+					pointer-events: all;
+				}
 			}
 
 			> .prefix {

packages/client/src/os.ts

@@ -346,7 +346,7 @@ export function yesno(props: {
 }
 
 export function inputText(props: {
-	type?: "text" | "email" | "password" | "url";
+	type?: "text" | "email" | "password" | "url" | "search";
 	title?: string | null;
 	text?: string | null;
 	placeholder?: string | null;
@@ -366,6 +366,7 @@ export function inputText(props: {
 				delay: 1000,
 			}),
 			{
+				type: props.type,
 				title: props.title,
 				text: props.text,
 				input: {
@@ -491,7 +492,7 @@ export function inputDate(props: {
 			{
 				done: (result) => {
 					resolve(
-						result
+						(result && isFinite(new Date(result.result)))
 							? { result: new Date(result.result), canceled: false }
 							: { canceled: true },
 					);
@@ -837,6 +838,7 @@ export function popupMenu(
 		align?: string;
 		width?: number;
 		viaKeyboard?: boolean;
+		noReturnFocus?: boolean;
 	},
 ) {
 	return new Promise((resolve, reject) => {
@@ -853,6 +855,7 @@ export function popupMenu(
 				width: options?.width,
 				align: options?.align,
 				viaKeyboard: options?.viaKeyboard,
+				noReturnFocus: options?.noReturnFocus,
 			},
 			{
 				closed: () => {

packages/client/src/pages/mfm-cheat-sheet.vue

@@ -472,12 +472,24 @@ let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
 let preview_search = $ref(
 	`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索`
 );
-let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]");
+let preview_jelly = $ref(
-let preview_tada = $ref("$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]");
+	"$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]"
-let preview_jump = $ref("$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]");
+);
-let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]");
+let preview_tada = $ref(
-let preview_shake = $ref("$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]");
+	"$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]"
-let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]");
+);
+let preview_jump = $ref(
+	"$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]"
+);
+let preview_bounce = $ref(
+	"$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]"
+);
+let preview_shake = $ref(
+	"$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]"
+);
+let preview_twitch = $ref(
+	"$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]"
+);
 let preview_spin = $ref(
 	"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮] $[spin.loop=3 🍮]"
 );
@@ -491,14 +503,14 @@ let preview_x2 = $ref("$[x2 🍮]");
 let preview_x3 = $ref("$[x3 🍮]");
 let preview_x4 = $ref("$[x4 🍮]");
 let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]");
+let preview_rainbow = $ref(
+	"$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]"
+);
 let preview_sparkle = $ref("$[sparkle 🍮]");
 let preview_rotate = $ref(
 	"$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]"
 );
-let preview_position = $ref(
+let preview_position = $ref("$[position.y=-1 🍮]\n$[position.x=-1 🍮]");
-	"$[position.y=-1 🍮]\n$[position.x=-1 🍮]"
-);
 let preview_crop = $ref(
 	"$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]"
 );
@@ -510,7 +522,9 @@ let preview_bg = $ref("$[bg.color=31748f Background color]");
 let preview_plain = $ref(
 	"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>"
 );
-let preview_fade = $ref("$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[fade.delay=3s 🍮]");
+let preview_fade = $ref(
+	"$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[fade.delay=3s 🍮]"
+);
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,

packages/client/src/scripts/search.ts

@@ -1,26 +1,13 @@
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
-// import { instance } from "@/instance";
+import { instance } from "@/instance";
 
 export async function search() {
-	// const searchOptions =
-	// 	"Advanced search operators\n" +
-	// 	"from:user => filter by user\n" +
-	// 	"has:image/video/audio/text/file => filter by attachment types\n" +
-	// 	"domain:domain.com => filter by domain\n" +
-	// 	"before:Date => show posts made before Date\n" +
-	// 	"after:Date => show posts made after Date\n" +
-	// 	'"text" => get posts with exact text between quotes\n' +
-	// 	"filter:following => show results only from users you follow\n" +
-	// 	"filter:followers => show results only from followers\n";
-
-	// const searchFiltersAvailable = instance.searchFilters;
-
 	const { canceled, result: query } = await os.inputText({
+		type: instance.features.searchFilters ? "search" : "text",
 		title: i18n.ts.search,
 		placeholder: i18n.ts.searchPlaceholder,
-		// text: searchOptions,
 	});
 	if (canceled || query == null || query === "") return;
 

packages/client/src/style.scss

@@ -482,6 +482,17 @@ hr {
 	}
 }
 
+._flexList {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .2em;
+	width: min-content;
+	min-width: 100%;
+	&._center {
+		justify-content: center;
+	}
+}
+
 ._formLinks {
 	> *:not(:last-child) {
 		margin-bottom: 8px;

packages/client/src/widgets/server-metric/index.vue

@@ -39,7 +39,9 @@
 				:meta="meta"
 			/>
 			<XMeili
-				v-else-if="instance.searchFilters && widgetProps.view === 5"
+				v-else-if="
+					instance.features.searchFilters && widgetProps.view === 5
+				"
 				:connection="connection"
 				:meta="meta"
 			/>
@@ -110,8 +112,8 @@ os.api("server-info", {}).then((res) => {
 
 const toggleView = () => {
 	if (
-		(widgetProps.view === 5 && instance.searchFilters) ||
+		(widgetProps.view === 5 && instance.features.searchFilters) ||
-		(widgetProps.view === 4 && !instance.searchFilters)
+		(widgetProps.view === 4 && !instance.features.searchFilters)
 	) {
 		widgetProps.view = 0;
 	} else {

packages/client/src/widgets/server-metric/meilisearch.vue

@@ -4,6 +4,7 @@
 			v-tooltip="i18n.ts.meiliIndexCount"
 			class="pie"
 			:value="progress"
+			:reverse="true"
 		/>
 		<div>
 			<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>

packages/client/src/widgets/server-metric/pie.vue

@@ -29,11 +29,17 @@ import {} from "vue";
 
 const props = defineProps<{
 	value: number;
+	reverse?: boolean;
 }>();
 
 const r = 0.45;
 
-const color = $computed(() => `hsl(${180 - props.value * 180}, 80%, 70%)`);
+const color = $computed(
+	() =>
+		`hsl(${
+			props.reverse ? props.value * 180 : 180 - props.value * 180
+		}, 80%, 70%)`
+);
 const strokeDashoffset = $computed(
 	() => (1 - props.value) * (Math.PI * (r * 2))
 );