feat: show partner local time in direct remotes

KNOWLEDGE_BASE.md

@@ -400,7 +400,7 @@ Settings → Appearance offers:
 
 These appearance choices are saved in the browser, not on the account, so each browser keeps its own. Settings → Profile lets you choose one of six lane colors (Orange, Green, Violet, Teal, Rose, Ochre), a custom color, or the automatic color used around your identity and activity graph.
 
-Profile settings also let you share a timezone. Timestamps can show the author's local time as well as the viewer's when a timezone is shared. Leaving it unset uses the browser's timezone for your display without publishing your timezone. A separate, off-by-default setting shows your current local time on your profile, next to your location and website; it only applies while a timezone is set, and clearing the timezone turns it off. These /dev/null preferences are separate from your GitHub-managed profile information.
+Profile settings also let you share a timezone. Timestamps can show the author's local time as well as the viewer's when a timezone is shared. Leaving it unset uses the browser's timezone for your display without publishing your timezone. A separate, off-by-default setting shows your current local time on your profile, next to your location and website, and in the header of direct Remotes with you. It only applies while a timezone is set, and clearing the timezone turns it off. These /dev/null preferences are separate from your GitHub-managed profile information.
 
 Sources: [appearance settings](resources/js/pages/appearance/update.tsx), [lane picker](resources/js/components/lane-picker.tsx), [timezone picker](resources/js/components/timezone-picker.tsx), [local time](resources/js/components/local-time.tsx), [timestamp tooltip](resources/js/components/timestamp-tooltip.tsx).
 

resources/js/components/chat/chat-dock.tsx

@@ -14,6 +14,7 @@ import OrgController from '@/actions/App/Http/Controllers/OrgController';
 import { ConversationActions } from '@/components/chat/conversation-actions';
 import { ConversationThread } from '@/components/chat/conversation-thread';
 import { InboxPanel } from '@/components/chat/inbox-panel';
+import { RemoteLocalTime } from '@/components/chat/remote-local-time';
 import { MemberStack, OrgHeader, orgTitle } from '@/components/chat/org';
 import { SearchDialog } from '@/components/search-dialog';
 import {
@@ -306,7 +307,7 @@ function DirectDockHeader({
             />
             <Link
                 href={show(partner)}
-                className="group min-w-0 rounded-md"
+                className="group min-w-0 flex-1 rounded-md"
                 title={partner.name}
             >
                 <span className="block truncate text-sm font-semibold group-hover:underline">
@@ -315,6 +316,7 @@ function DirectDockHeader({
                 <span className="block truncate font-mono text-[11px] text-muted-foreground">
                     @{partner.username}
                 </span>
+                <RemoteLocalTime partner={partner} />
             </Link>
             <ConversationActions
                 target={{ kind: 'direct', partner }}

resources/js/components/chat/remote-local-time.tsx

@@ -0,0 +1,22 @@
+import { LocalTime } from '@/components/local-time';
+import type { User } from '@/types';
+
+export function RemoteLocalTime({
+    partner,
+}: {
+    partner: Pick<User, 'timezone' | 'show_local_time'>;
+}) {
+    if (!partner.show_local_time || !partner.timezone) {
+        return null;
+    }
+
+    return (
+        <ul
+            title={partner.timezone}
+            className="min-w-0 font-mono text-[11px] text-muted-foreground [&_li]:min-w-0 [&_li]:gap-1 [&_li_span]:truncate [&_svg]:size-3 [&_svg]:shrink-0"
+            data-test="remote-local-time"
+        >
+            <LocalTime timeZone={partner.timezone} />
+        </ul>
+    );
+}

resources/js/components/timezone-picker.tsx

@@ -71,7 +71,7 @@ export default function TimezonePicker() {
         <section className="px-4 py-6 sm:px-6">
             <Heading
                 title="Timezone"
-                description="Hover a commit or reply time to see it in your timezone, and in the author's when they have set one. Others see yours the same way. Leave it unset to use your browser's timezone without sharing it. Your local time only shows on your profile if you turn that on below."
+                description="Hover a commit or reply time to see it in your timezone, and in the author's when they have set one. Others see yours the same way. Leave it unset to use your browser's timezone without sharing it. Your current local time is also visible on your profile and in direct Remotes if you opt in below."
             />
 
             <Form
@@ -206,10 +206,10 @@ export default function TimezonePicker() {
                                 htmlFor="show-local-time"
                                 className="block text-sm leading-snug font-normal"
                             >
-                                Show my local time on my profile
+                                Show my local time on my profile and in Remotes
                                 <span className="block text-muted-foreground">
-                                    Anyone who opens your profile sees the
-                                    current time in your timezone.
+                                    People viewing your profile or chatting
+                                    with you can see your current local time.
                                 </span>
                             </Label>
                         </div>

resources/js/pages/conversation/index.tsx

@@ -11,6 +11,7 @@ import OrgController from '@/actions/App/Http/Controllers/OrgController';
 import { ConversationActions } from '@/components/chat/conversation-actions';
 import { ConversationThread } from '@/components/chat/conversation-thread';
 import { InboxPanel } from '@/components/chat/inbox-panel';
+import { RemoteLocalTime } from '@/components/chat/remote-local-time';
 import { OrgHeader, OrgPeopleDialog } from '@/components/chat/org';
 import { RemoteSettingsMenu } from '@/components/chat/remote-settings-menu';
 import { SearchDialog } from '@/components/search-dialog';
@@ -275,7 +276,7 @@ function ThreadHeader({
                         } as React.CSSProperties
                     }
                 />
-                <span className="min-w-0">
+                <div className="min-w-0">
                     <span
                         className="block truncate text-[15px] font-semibold hover:underline"
                         title={partner.name}
@@ -285,7 +286,8 @@ function ThreadHeader({
                     <span className="block truncate font-mono text-xs text-muted-foreground">
                         @{partner.username}
                     </span>
-                </span>
+                    <RemoteLocalTime partner={partner} />
+                </div>
             </Link>
             <ConversationActions
                 target={{ kind: 'direct', partner }}

tests/Unit/RemoteLocalTime.test.tsx

@@ -0,0 +1,31 @@
+import assert from 'node:assert/strict';
+import { isValidElement } from 'react';
+import type { ReactElement } from 'react';
+import { test } from 'vite-plus/test';
+import { RemoteLocalTime } from '../../resources/js/components/chat/remote-local-time';
+
+test('shows time only when the partner has opted in and set a timezone', () => {
+    assert.equal(
+        RemoteLocalTime({
+            partner: { timezone: 'Asia/Kolkata', show_local_time: false },
+        }),
+        null,
+    );
+    assert.equal(
+        RemoteLocalTime({ partner: { timezone: null, show_local_time: true } }),
+        null,
+    );
+
+    const result = RemoteLocalTime({
+        partner: { timezone: 'Asia/Kolkata', show_local_time: true },
+    });
+
+    assert.ok(
+        isValidElement<{
+            title: string;
+            children: ReactElement<{ timeZone: string }>;
+        }>(result),
+    );
+    assert.equal(result.props.title, 'Asia/Kolkata');
+    assert.equal(result.props.children.props.timeZone, 'Asia/Kolkata');
+});

tests/draft-images.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
             VITE_APP_NAME: '/dev/null',
         },
         include: [
+            'tests/Unit/RemoteLocalTime.test.tsx',
             'tests/Unit/CommitPhoto.test.tsx',
             'tests/Unit/CommitSize.test.tsx',
             'tests/Unit/ThreadHistory.test.tsx',

tests/tsconfig.json

@@ -6,6 +6,7 @@
     },
     "include": [
         "Unit/**/*.test.ts",
+        "Unit/RemoteLocalTime.test.tsx",
         "Unit/CommitPhoto.test.tsx",
         "Unit/DraftStash.test.tsx",
         "Unit/ComposerDraft.test.tsx",