fix(web): resolve duplicate keyboard modal and HTML entity decoding

Author: Mearman

apps/web/src/components/AutocompletePage.tsx

@@ -29,6 +29,7 @@ import { IconInfoCircle, IconSearch } from "@tabler/icons-react";
 
 import { AutocompleteEntityFilter } from "@/components/AutocompleteEntityFilter";
 import { BORDER_STYLE_GRAY_3 } from "@/config/style-constants";
+import { decodeHtmlEntities } from "@/utils/decode-html-entities";
 
 export interface AutocompletePageProps {
   /** The entity type this page is for */
@@ -215,7 +216,7 @@ const AutocompleteResultCard = ({ result, entityType }: AutocompleteResultCardPr
       <Stack gap="xs">
         <Group justify="space-between" wrap="nowrap">
           <Anchor href={href} fw={500} size="md">
-            {result.display_name}
+            {decodeHtmlEntities(result.display_name ?? "")}
           </Anchor>
           <Badge size="sm" variant="light" color={metadata.color}>
             {metadata.displayName}
@@ -224,7 +225,7 @@ const AutocompleteResultCard = ({ result, entityType }: AutocompleteResultCardPr
 
         {result.hint && (
           <Text size="sm" c="dimmed" lineClamp={2}>
-            {result.hint}
+            {decodeHtmlEntities(result.hint)}
           </Text>
         )}
 

apps/web/src/components/layout/HeaderSearchInput.tsx

@@ -32,6 +32,7 @@ import { NOTIFICATION_DURATION } from "@/config/notification-constants";
 import { ICON_SIZE } from "@/config/style-constants";
 import { useNavigationEnhancements } from "@/hooks/useNavigationEnhancements";
 import { announceToScreenReader } from "@/utils/accessibility";
+import { decodeHtmlEntities } from "@/utils/decode-html-entities";
 
 // Type for OpenAlex autocomplete API response
 interface OpenAlexAutocompleteItem {
@@ -188,7 +189,7 @@ export const HeaderSearchInput = () => {
 
         const suggestion: SearchSuggestion = {
           id: item.id || `${item.entity_type}-${item.display_name}`,
-          displayName: item.display_name,
+          displayName: decodeHtmlEntities(item.display_name),
           entityType: mapEntityType(item.entity_type),
           description: item.entity_type,
           worksCount: item.works_count,

apps/web/src/components/layout/MainLayout.tsx

@@ -456,10 +456,6 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
             <KeyboardShortcutsButton
               onClick={() => setShortcutsHelpOpened(true)}
             />
-            <KeyboardShortcutsHelp
-              opened={shortcutsHelpOpened}
-              onClose={() => setShortcutsHelpOpened(false)}
-            />
           </Group>
         </Group>
       </AppShell.Header>

apps/web/src/routes/autocomplete/index.lazy.tsx

@@ -31,6 +31,7 @@ import { BaseTable } from "@/components/tables/BaseTable";
 import { type TableViewMode,TableViewModeToggle } from "@/components/TableViewModeToggle";
 import { API, BORDER_STYLE_GRAY_3, ICON_SIZE, TEXT, TIME_MS } from '@/config/style-constants';
 import { useThemeColors } from "@/hooks/use-theme-colors";
+import { decodeHtmlEntities } from "@/utils/decode-html-entities";
 import { transformAutocompleteResultToGridItem } from "@/utils/entity-mappers";
 
 /**
@@ -128,7 +129,7 @@ const AutocompleteGeneralRoute = () => {
         const routePath = routeMap[result.entity_type] || result.entity_type;
         return (
           <Anchor href={`#/${routePath}/${cleanId}`} fw={500}>
-            {info.getValue() as string}
+            {decodeHtmlEntities(info.getValue() as string)}
           </Anchor>
         );
       },

apps/web/src/utils/decode-html-entities.ts

@@ -19,9 +19,12 @@ const HTML_ENTITIES: Record<string, string> = {
 };
 
 /**
- * Pattern to match HTML entities we want to decode
+ * Pattern to match HTML entities we want to decode:
+ * - Named entities: &amp; &lt; &gt; &quot; &apos; &nbsp; &#39;
+ * - Decimal numeric entities: &#123;
+ * - Hex numeric entities: &#x00EF; &#xAB;
  */
-const ENTITY_PATTERN = /&(?:amp|lt|gt|quot|apos|nbsp|#39);/g;
+const ENTITY_PATTERN = /&(?:amp|lt|gt|quot|apos|nbsp|#39|#\d+|#x[0-9a-fA-F]+);/g;
 
 /**
  * Maximum iterations to prevent infinite loops
@@ -52,7 +55,27 @@ export const decodeHtmlEntities = (text: string): string => {
 	while (iterations < MAX_DECODE_ITERATIONS) {
 		const decoded = result.replaceAll(
 			ENTITY_PATTERN,
-			(match) => HTML_ENTITIES[match] ?? match
+			(match) => {
+				// Check named entities first
+				if (HTML_ENTITIES[match]) {
+					return HTML_ENTITIES[match];
+				}
+				// Handle hex numeric entities: &#x00EF; -> ï
+				if (match.startsWith("&#x") || match.startsWith("&#X")) {
+					const codePoint = parseInt(match.slice(3, -1), 16);
+					if (!isNaN(codePoint)) {
+						return String.fromCodePoint(codePoint);
+					}
+				}
+				// Handle decimal numeric entities: &#239; -> ï
+				if (match.startsWith("&#")) {
+					const codePoint = parseInt(match.slice(2, -1), 10);
+					if (!isNaN(codePoint)) {
+						return String.fromCodePoint(codePoint);
+					}
+				}
+				return match;
+			}
 		);
 
 		// No more entities to decode