fix(quote-search): quote length description is incorrect for some languages (@Leonabcd123)

frontend/src/ts/collections/results.ts

@@ -1,6 +1,7 @@
 import { ResultMinified } from "@monkeytype/schemas/results";
 import { Difficulty, Mode, Mode2 } from "@monkeytype/schemas/shared";
 import { ResultFilters } from "@monkeytype/schemas/users";
+import { quoteDescToGroup } from "@monkeytype/schemas/quotes";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
 import {
   avg,
@@ -497,12 +498,7 @@ export function createResultsQueryState(
     numbers: boolFilter(filters.numbers),
     timestamp: timestampFilter(filters.date),
     quoteLength: [
-      ...valueFilter(filters.quoteLength, {
-        short: 0,
-        medium: 1,
-        long: 2,
-        thicc: 3,
-      }),
+      ...valueFilter(filters.quoteLength, quoteDescToGroup),
       -1, // fallback value for results without quoteLength, set in the collection
     ],
     tags: valueFilter(filters.tags),

frontend/src/ts/components/modals/MobileTestConfigModal.tsx

@@ -4,6 +4,7 @@ import type {
 } from "@monkeytype/schemas/configs";
 import type { Mode } from "@monkeytype/schemas/shared";
 
+import { quoteGroupToDesc } from "@monkeytype/schemas/quotes";
 import { For, JSXElement, Show } from "solid-js";
 
 import { setConfig, setQuoteLengthAll } from "../../config/setters";
@@ -26,13 +27,13 @@ const quoteLengths: {
   loginRequired?: boolean;
 }[] = [
   { value: "all", label: "all" },
-  { value: "0", label: "short" },
-  { value: "1", label: "medium" },
-  { value: "2", label: "long" },
-  { value: "3", label: "thicc" },
+  ...Object.entries(quoteGroupToDesc).map(([group, desc]) => ({
+    value: group,
+    label: desc,
+  })),
   { value: "-3", label: "favorite", loginRequired: true },
   { value: "-2", label: "search" },
-] as const;
+];
 
 function MCButton(props: {
   text: string;

frontend/src/ts/components/modals/QuoteRateModal.tsx

@@ -28,16 +28,6 @@ export function QuoteRateModal(): JSXElement {
   const [rating, setRating] = createSignal(0);
   const [hoverRating, setHoverRating] = createSignal(0);
 
-  const getLengthDesc = (): string => {
-    const quote = selectedQuote();
-    if (!quote) return "-";
-    if (quote.group === 0) return "short";
-    if (quote.group === 1) return "medium";
-    if (quote.group === 2) return "long";
-    if (quote.group === 3) return "thicc";
-    return "-";
-  };
-
   const displayRating = (): number => hoverRating() || rating();
 
   const handleBeforeShow = (): void => {
@@ -152,7 +142,7 @@ export function QuoteRateModal(): JSXElement {
           </div>
           <div class="text-xs text-sub">
             <div class="text-sub opacity-50">length</div>
-            {getLengthDesc()}
+            {selectedQuote()?.groupDescription ?? "-"}
           </div>
           <div class="text-xs text-sub">
             <div class="text-sub opacity-50">source</div>

frontend/src/ts/components/modals/QuoteSearchModal.tsx

@@ -92,13 +92,6 @@ function exactSearch(quotes: Quote[], captured: RegExp[]): [Quote[], string[]] {
   return [matches, Array.from(exactSearchQueryTerms)];
 }
 
-function getLengthDesc(quote: Quote): string {
-  if (quote.length < 101) return "short";
-  if (quote.length < 301) return "medium";
-  if (quote.length < 601) return "long";
-  return "thicc";
-}
-
 function Item(props: {
   quote: Quote;
   matchedTerms: string[];
@@ -146,7 +139,7 @@ function Item(props: {
         </div>
         <div class="text-xs text-sub">
           <div class="opacity-50">length</div>
-          {getLengthDesc(props.quote)}
+          {props.quote.groupDescription}
         </div>
         <div class="col-span-2 flex sm:col-span-1">
           <div class="grow text-xs text-sub">

frontend/src/ts/components/pages/test/TestConfig.tsx

@@ -1,3 +1,4 @@
+import { quoteDescToGroup, QuoteLength } from "@monkeytype/schemas/quotes";
 import { ComponentProps, For, JSXElement, Show } from "solid-js";
 
 import { configMetadata } from "../../../config/metadata";
@@ -303,13 +304,6 @@ function Mode2Words(props: ComponentProps<"div">): JSXElement {
 }
 
 function Mode2Quote(props: ComponentProps<"div">): JSXElement {
-  const quoteLengths = [
-    { text: "short", length: 0 },
-    { text: "medium", length: 1 },
-    { text: "long", length: 2 },
-    { text: "thicc", length: 3 },
-  ] as const;
-
   return (
     <div {...props}>
       <TCButton
@@ -320,13 +314,15 @@ function Mode2Quote(props: ComponentProps<"div">): JSXElement {
           restartTestEvent.dispatch();
         }}
       />
-      <For each={quoteLengths}>
-        {({ text, length }) => (
+      <For each={Object.keys(quoteDescToGroup)}>
+        {(desc) => (
           <TCButton
-            text={text}
-            active={areUnsortedArraysEqual(getConfig.quoteLength, [length])}
+            text={desc}
+            active={areUnsortedArraysEqual(getConfig.quoteLength, [
+              quoteDescToGroup[desc as QuoteLength],
+            ])}
             onClick={() => {
-              setConfig("quoteLength", [length]);
+              setConfig("quoteLength", [quoteDescToGroup[desc as QuoteLength]]);
               restartTestEvent.dispatch();
             }}
           />

frontend/src/ts/controllers/quotes-controller.ts

@@ -6,7 +6,11 @@ import * as DB from "../db";
 import Ape from "../ape";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { Language } from "@monkeytype/schemas/languages";
-import { QuoteData } from "@monkeytype/schemas/quotes";
+import {
+  QuoteData,
+  QuoteLength,
+  quoteGroupToDesc,
+} from "@monkeytype/schemas/quotes";
 import {
   Quote as QuoteType,
   QuoteWithTextSplit as QuoteWithTextSplitType,
@@ -28,6 +32,10 @@ const defaultQuoteCollection: QuoteCollection = {
   groups: [],
 };
 
+function getLengthDesc(quote: Quote): QuoteLength | "-" {
+  return quoteGroupToDesc[quote.group] ?? "-";
+}
+
 class QuotesController {
   private quoteCollection: QuoteCollection = defaultQuoteCollection;
 
@@ -77,6 +85,7 @@ class QuotesController {
           id: quote.id,
           language: data.language,
           group: 0,
+          groupDescription: "-",
         };
 
         this.quoteCollection.quotes.push(monkeyTypeQuote);
@@ -90,6 +99,7 @@ class QuotesController {
           this.quoteCollection.quotes.filter((quote) => {
             if (quote.length >= lower && quote.length <= upper) {
               quote.group = groupIndex;
+              quote.groupDescription = getLengthDesc(quote);
               return true;
             }
             return false;

frontend/src/ts/test/result.ts

@@ -784,7 +784,7 @@ function updateTestType(randomQuote: Quote | null): void {
     testType += ` ${Config.words}`;
   } else if (Config.mode === "quote") {
     if (randomQuote?.group !== undefined) {
-      testType += ` ${["short", "medium", "long", "thicc"][randomQuote.group]}`;
+      testType += ` ${randomQuote.groupDescription}`;
     }
   }
   const ignoresLanguage = isFunboxActiveWithProperty("ignoresLanguage");

frontend/src/ts/types/quotes.ts

@@ -1,9 +1,10 @@
 import { Language } from "@monkeytype/schemas/languages";
-import { QuoteDataQuote } from "@monkeytype/schemas/quotes";
+import { QuoteDataQuote, QuoteLength } from "@monkeytype/schemas/quotes";
 import { RequiredProperties } from "../utils/misc";
 
 export type Quote = QuoteDataQuote & {
   group: number;
+  groupDescription: QuoteLength | "-";
   language: Language;
   textSplit?: string[];
 };

packages/schemas/src/quotes.ts

@@ -9,6 +9,23 @@ export const QuoteIdSchema = z
   .or(z.string().regex(/^\d+$/).transform(Number));
 export type QuoteId = z.infer<typeof QuoteIdSchema>;
 
+export const quoteDescToGroup = {
+  short: 0,
+  medium: 1,
+  long: 2,
+  thicc: 3,
+} as const;
+
+export const QuoteLengthSchema = z.enum(
+  Object.keys(quoteDescToGroup) as [keyof typeof quoteDescToGroup],
+);
+
+export type QuoteLength = z.infer<typeof QuoteLengthSchema>;
+
+export const quoteGroupToDesc = Object.fromEntries(
+  Object.entries(quoteDescToGroup).map(([desc, group]) => [group, desc]),
+) as unknown as Record<number, QuoteLength>;
+
 export const ApproveQuoteSchema = z.object({
   id: QuoteIdSchema,
   text: z.string(),

packages/schemas/src/shared.ts

@@ -51,13 +51,6 @@ export const DefaultTimeModeSchema = z.union([
   z.literal("120"),
 ]);
 
-export const QuoteLengthSchema = z.union([
-  z.literal("short"),
-  z.literal("medium"),
-  z.literal("long"),
-  z.literal("thicc"),
-]);
-
 // // Step 1: Define the schema for specific string values "10" and "25"
 // const SpecificKeySchema = z.union([z.literal("10"), z.literal("25")]);
 

packages/schemas/src/users.ts

@@ -7,10 +7,10 @@ import {
   PersonalBestsSchema,
   DefaultWordsModeSchema,
   DefaultTimeModeSchema,
-  QuoteLengthSchema,
   DifficultySchema,
   PersonalBestSchema,
 } from "./shared";
+import { QuoteLengthSchema } from "./quotes";
 import { CustomThemeColorsSchema, FunboxNameSchema } from "./configs";
 import { doesNotContainDisallowedWords } from "./validation/validation";
 import { ConnectionSchema } from "./connections";