Qa fixes

echo/frontend/src/components/chat/TemplatesModal.tsx

@@ -569,6 +569,18 @@ export const TemplatesModal = ({
 										<PencilSimpleIcon size={12} />
 									</ActionIcon>
 								</Tooltip>
+								<Tooltip label={t`Duplicate`}>
+									<ActionIcon
+										size="xs"
+										variant="subtle"
+										onClick={(e) => {
+											e.stopPropagation();
+											handleDuplicate(tmpl.title, tmpl.content);
+										}}
+									>
+										<CopyIcon size={12} />
+									</ActionIcon>
+								</Tooltip>
 								<Tooltip label={t`Delete`}>
 									<ActionIcon
 										size="xs"

echo/frontend/src/components/language/LanguagePicker.module.css

@@ -0,0 +1,15 @@
+.option:hover,
+.option[data-combobox-selected] {
+	background-color: var(--mantine-color-primary-6);
+	color: var(--mantine-color-white);
+}
+
+.partial {
+	color: var(--mantine-color-dimmed);
+	font-size: var(--mantine-font-size-xs);
+}
+
+.option:hover .partial,
+.option[data-combobox-selected] .partial {
+	color: inherit;
+}

echo/frontend/src/components/language/LanguagePicker.tsx

@@ -1,13 +1,15 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { NativeSelect } from "@mantine/core";
-import type { ChangeEvent } from "react";
+import { Box, Group, Select } from "@mantine/core";
 import { useState } from "react";
 import { useLocation } from "react-router";
 import { ConfirmModal } from "@/components/common/ConfirmModal";
 import { SUPPORTED_LANGUAGES } from "@/config";
 import { useLanguage } from "@/hooks/useLanguage";
 import { testId } from "@/lib/testUtils";
+import classes from "./LanguagePicker.module.css";
+
+const PARTIAL_LANGUAGES = new Set(["it-IT", "uk-UA"]);
 
 const data: Array<{
 	language: (typeof SUPPORTED_LANGUAGES)[number];
@@ -60,12 +62,12 @@ const data: Array<{
 ];
 
 export const languageOptions = data.map((d) => ({
-	label: `${d.label}`,
+	label: d.label,
 	value: d.language,
 }));
 
 export const languageOptionsByIso639_1 = data.map((d) => ({
-	label: `${d.label}`,
+	label: d.label,
 	value: d.iso639_1,
 }));
 
@@ -93,37 +95,48 @@ export const LanguagePicker = () => {
 		window.location.href = `/${validLanguage}${newPathname}${search}${hash}`;
 	};
 
-	const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
-		const selectedLanguage = e.target.value;
-
-		if (selectedLanguage === currentLanguage) return;
+	const handleChange = (value: string | null) => {
+		if (!value || value === currentLanguage) return;
 
 		const isInChat = pathname.includes("/chats/");
 		if (isInChat) {
-			setPendingLanguage(selectedLanguage);
+			setPendingLanguage(value);
 			return;
 		}
 
-		applyLanguageChange(selectedLanguage);
+		applyLanguageChange(value);
 	};
 
 	return (
 		<>
-			<NativeSelect
-				value={currentLanguage}
-				onChange={handleChange}
-				{...testId("header-language-picker")}
-			>
-				{languageOptions.map((option) => (
-					<option
-						key={option.value}
-						value={option.value}
-						data-testid={`header-language-option-${option.value}`}
-					>
-						{option.label}
-					</option>
-				))}
-			</NativeSelect>
+			<Box onMouseDown={(e) => e.stopPropagation()}>
+				<Select
+					value={currentLanguage}
+					onChange={handleChange}
+					data={languageOptions}
+					allowDeselect={false}
+					withCheckIcon={false}
+					comboboxProps={{ offset: 2 }}
+					classNames={{ option: classes.option }}
+					styles={{
+						dropdown: {
+							border: "1px solid var(--mantine-color-dark-9)",
+						},
+						option: {
+							paddingBlock: 4,
+						},
+					}}
+					renderOption={({ option }) => (
+						<Group gap="xs" wrap="nowrap">
+							<span>{option.label}</span>
+							{PARTIAL_LANGUAGES.has(option.value) && (
+								<span className={classes.partial}>(Partial)</span>
+							)}
+						</Group>
+					)}
+					{...testId("header-language-picker")}
+				/>
+			</Box>
 
 			<ConfirmModal
 				opened={!!pendingLanguage}

echo/frontend/src/components/participant/ParticipantOnboardingCards.tsx

@@ -174,29 +174,6 @@ const ParticipantOnboardingCards = ({
 				],
 			},
 		],
-		"it-IT": [
-			...getSystemCards("it-IT", tutorialSlug, legalBasis, privacyPolicyUrl),
-			{
-				section: "Controllo Microfono",
-				slides: [
-					{
-						component: MicrophoneTestComponent,
-						content: "Assicuriamoci di poterti sentire.",
-						title: "Controllo Microfono",
-						type: "microphone",
-					},
-				],
-			},
-			{
-				section: "Pronti a iniziare?",
-				slides: [
-					{
-						component: InitiateFormComponent,
-						title: "Pronti a iniziare?",
-					},
-				],
-			},
-		],
 		"nl-NL": [
 			...getSystemCards("nl-NL", tutorialSlug, legalBasis, privacyPolicyUrl),
 			{
@@ -220,33 +197,9 @@ const ParticipantOnboardingCards = ({
 				],
 			},
 		],
-		"uk-UA": [
-			...getSystemCards("uk-UA", tutorialSlug, legalBasis, privacyPolicyUrl),
-			{
-				section: "Перевірка мікрофона",
-				slides: [
-					{
-						component: MicrophoneTestComponent,
-						content: "Переконаймось, що ми вас чуємо.",
-						title: "Перевірка мікрофона",
-						type: "microphone",
-					},
-				],
-			},
-			{
-				section: "Почати",
-				slides: [
-					{
-						component: InitiateFormComponent,
-						title: "Готові розпочати?",
-					},
-				],
-			},
-		],
 	};
 
-	// Add this check to ensure we have valid data
-	const languageCards = cards[language as keyof typeof cards] || [];
+	const languageCards = cards[language as keyof typeof cards] || cards["en-US"];
 
 	// Flatten the slides into a single array
 	const allSlides = languageCards.flatMap((section) => section.slides);