feat: richer link preview cards and user local time display

P2-7: Domain-specific URL preview cards — YouTube shows mqdefault.jpg
thumbnail with ▶ play overlay + title; GitHub shows inline SVG icon +
owner/repo parsed from og:title + star/language info from og:description;
generic cards get a Google favicon when og:image is absent; empty cards
(no title or description) are suppressed entirely

P2-9: Live local time in user profiles — useLocalTime(timezone, hour12)
uses Intl.DateTimeFormat with the user's m.tz IANA zone; updates every
60s; shows clock icon + formatted time + timezone abbreviation (EST/JST
etc.) in dim text; respects existing hour24Clock setting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/user-profile/UserHero.tsx

@@ -21,6 +21,9 @@ import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { useLocalTime } from '../../hooks/useLocalTime';
 
 type UserHeroProps = {
   userId: string;
@@ -107,6 +110,8 @@ export function UserHeroName({
   timezone,
 }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const localTimeInfo = useLocalTime(timezone, !hour24Clock);
 
   return (
     <Box grow="Yes" direction="Column" gap="0">
@@ -135,10 +140,12 @@ export function UserHeroName({
           @{username}
         </Text>
       </Box>
-      {timezone && (
+      {localTimeInfo && (
         <Box alignItems="Center" gap="100" style={{ marginTop: '1px', overflow: 'hidden' }}>
+          <Icon size="50" src={Icons.Clock} />
           <Text size="T200" className={classNames(BreakWord, LineClamp2)} style={{ opacity: 0.6 }}>
-            {timezone}
+            {localTimeInfo.time}
+            {localTimeInfo.abbr && <span style={{ opacity: 0.7 }}>{` ${localTimeInfo.abbr}`}</span>}
           </Text>
         </Box>
       )}