chore: add deselect for language cards

frontend/src/features/language/components/LanguageCards/LanguageCards.jsx

@@ -16,6 +16,7 @@ function LanguageCards({ label, description }) {
       params.set("langId", id);
     }
 
+    params.delete("name");
     setParams(params);
   }
 

frontend/src/features/language/components/LanguageForm/LanguageForm.jsx

@@ -27,7 +27,6 @@ import LanguageRadioLabel from "./components/LanguageRadioLabel";
 import InsertDictionaryButton from "./components/InsertDictionaryButton";
 import {
   parsersQuery,
-  predefinedLanguagesQuery,
   userLanguageQuery,
   predefinedLanguageQuery,
 } from "../../api/query";
@@ -44,7 +43,6 @@ function LanguageForm() {
     predefinedLanguageQuery(params.get("name", null))
   );
   const defSettingsQuery = useQuery(userLanguageQuery(langId));
-  const { data: predefined } = useQuery(predefinedLanguagesQuery);
   const { data: parsers } = useQuery(parsersQuery);
   const { data: initial } = useQuery(initialQuery);
 
@@ -109,7 +107,7 @@ function LanguageForm() {
           description="Edit existing language"
         />
       )}
-      <LanguageSelect form={form} languages={predefined} />
+      <LanguageSelect form={form} />
 
       <Divider mt="md" mb="xs" />
 

frontend/src/features/language/components/LanguageForm/LanguageSelect.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, memo } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { useLocation, useSearchParams } from "react-router-dom";
 import {
   Combobox,
@@ -8,10 +9,12 @@ import {
   useCombobox,
 } from "@mantine/core";
 import { IconLanguage } from "@tabler/icons-react";
+import { predefinedLanguagesQuery } from "@language/api/query";
 
-function LanguageSelect({ languages }) {
+function LanguageSelect() {
   const [params, setParams] = useSearchParams();
   const { pathname } = useLocation();
+  const { data: languages } = useQuery(predefinedLanguagesQuery);
 
   const [value, setValue] = useState(null);
   const [search, setSearch] = useState("");

frontend/src/features/language/components/LanguageForm/components/DeleteLanguageButton/DeleteLanguageButton.jsx

@@ -3,8 +3,11 @@ import { ActionIcon, Paper, Text, Tooltip } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { initialQuery } from "@settings/api/settings";
 import { IconSquareRoundedMinusFilled } from "@tabler/icons-react";
+import { useSearchParams } from "react-router-dom";
 
-function DeleteLanguageButton({ langId }) {
+function DeleteLanguageButton() {
+  const [params] = useSearchParams();
+  const langId = params.get("langId");
   const { data: initial } = useQuery(initialQuery);
   const selectedLangName = initial.languageChoices.filter(
     (lang) => lang.id === Number(langId)

frontend/src/features/language/components/LanguageForm/components/LanguageRadioLabel.jsx

@@ -1,13 +1,13 @@
 import { Group, Text } from "@mantine/core";
 import DeleteLanguageButton from "./DeleteLanguageButton/DeleteLanguageButton";
 
-function LanguageRadioLabel({ langId }) {
+function LanguageRadioLabel() {
   return (
     <Group wrap="nowrap" gap={5} align="center">
       <Text component="span" fw={500} fz="sm">
         My languages
       </Text>
-      <DeleteLanguageButton langId={langId} />
+      <DeleteLanguageButton />
     </Group>
   );
 }