feat: show the local time in profile previews

resources/js/components/local-time.tsx

@@ -1,6 +1,6 @@
 import { Clock } from 'lucide-react';
 import { useSyncExternalStore } from 'react';
-import { formatUtcOffset, formatZonedTime } from '@/lib/utils';
+import { cn, formatUtcOffset, formatZonedTime } from '@/lib/utils';
 
 const MINUTE = 60_000;
 
@@ -21,7 +21,15 @@ function currentMinute(): number {
  * What time it is for someone who chose to share their timezone. It renders nothing on the server, where the
  * current time is not the reader's.
  */
-export function LocalTime({ timeZone }: { timeZone: string }) {
+export function LocalTime({
+    timeZone,
+    as: Element = 'li',
+    className,
+}: {
+    timeZone: string;
+    as?: 'li' | 'p';
+    className?: string;
+}) {
     const minute = useSyncExternalStore(subscribe, currentMinute, () => null);
 
     if (minute === null) {
@@ -31,14 +39,17 @@ export function LocalTime({ timeZone }: { timeZone: string }) {
     const now = new Date(minute);
 
     return (
-        <li className="flex items-center gap-1.5" data-test="local-time">
+        <Element
+            className={cn('flex items-center gap-1.5', className)}
+            data-test="local-time"
+        >
             <Clock className="size-4" />
             <span>
                 <time dateTime={now.toISOString()}>
                     {formatZonedTime(now.toISOString(), timeZone)}
                 </time>{' '}
                 ({formatUtcOffset(now, timeZone)})
             </span>
-        </li>
+        </Element>
     );
 }

resources/js/components/user-preview.tsx

@@ -17,6 +17,7 @@ import {
     LiveAvatarMarker,
     LiveStreamCard,
 } from '@/components/live-stream-card';
+import { LocalTime } from '@/components/local-time';
 import { Button } from '@/components/ui/button';
 import { UserAvatar } from '@/components/user-avatar';
 import { UserSafetyMenu } from '@/components/user-safety-menu';
@@ -481,6 +482,14 @@ function UserPreviewContent({
                 </p>
             )}
 
+            {user.show_local_time && user.timezone && !data?.isUnavailable && (
+                <LocalTime
+                    as="p"
+                    timeZone={user.timezone}
+                    className="mt-2 text-sm text-muted-foreground"
+                />
+            )}
+
             <div className="mt-3 flex gap-4 text-sm">
                 {data?.isUnavailable ? (
                     <p className="text-muted-foreground">

tests/Feature/Controllers/UserPreviewControllerTest.php

@@ -172,3 +172,18 @@
         ->assertJsonMissingPath('user.commits_count')
         ->assertJsonMissingPath('user.followers_count');
 });
+
+it('includes the shared local time in the user preview', function (): void {
+    User::factory()->create(['username' => 'octocat', 'timezone' => 'Europe/Berlin', 'show_local_time' => true]);
+
+    $this->actingAs(User::factory()->create())
+        ->getJson('/@octocat/preview')
+        ->assertOk()
+        ->assertJsonPath('user.timezone', 'Europe/Berlin')
+        ->assertJsonPath('user.show_local_time', true);
+
+    $this->getJson('/@octocat/preview')
+        ->assertOk()
+        ->assertJsonPath('user.timezone', 'Europe/Berlin')
+        ->assertJsonPath('user.show_local_time', true);
+});

tests/Unit/LocalTime.test.tsx

@@ -0,0 +1,37 @@
+/// <reference types="node" />
+import assert from 'node:assert/strict';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, test, vi } from 'vite-plus/test';
+
+vi.doMock('react', () => ({
+    ...React,
+    useSyncExternalStore: (_subscribe: unknown, read: () => unknown) => read(),
+}));
+
+const { LocalTime } = await import('../../resources/js/components/local-time');
+
+afterEach(() => vi.useRealTimers());
+
+test('shows the time in the given timezone with its offset', () => {
+    vi.useFakeTimers({ now: new Date('2026-07-01T10:06:30Z') });
+
+    const html = renderToStaticMarkup(
+        <LocalTime timeZone="Europe/Berlin" as="p" className="mt-2" />,
+    );
+    const expected = new Date('2026-07-01T10:06:00Z').toLocaleTimeString(
+        undefined,
+        { hour: 'numeric', minute: '2-digit', timeZone: 'Europe/Berlin' },
+    );
+
+    assert.ok(html.startsWith('<p class="flex items-center gap-1.5 mt-2"'));
+    assert.ok(html.includes('dateTime="2026-07-01T10:06:00.000Z"'));
+    assert.ok(html.includes(`${expected}</time> (UTC +02:00)`));
+});
+
+test('renders as a list item by default, for the profile details', () => {
+    const html = renderToStaticMarkup(<LocalTime timeZone="UTC" />);
+
+    assert.ok(html.startsWith('<li'));
+    assert.ok(html.includes('(UTC)'));
+});