fix: implement external link handling with Tauri shell in UrlPreviewCard and react-custom-html-parser

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@@ -12,9 +12,21 @@ import * as css from './UrlPreviewCard.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { openExternalUrl } from '../../utils/tauri';
 
 const linkStyles = { color: color.Success.Main };
 
+/**
+ * Click handler for external links - uses Tauri shell on desktop/mobile
+ */
+const handleExternalLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  const href = e.currentTarget.href;
+  if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
+    e.preventDefault();
+    openExternalUrl(href);
+  }
+};
+
 export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
   ({ url, ts, ...props }, ref) => {
     const mx = useMatrixClient();
@@ -45,6 +57,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
               rel="no-referrer"
               size="T200"
               priority="300"
+              onClick={handleExternalLinkClick}
             >
               {typeof prev['og:site_name'] === 'string' && `${prev['og:site_name']} | `}
               {tryDecodeURIComponent(url)}