From bbbbcf9b6e5fa69d565ab672391da615c966476c Mon Sep 17 00:00:00 2001
From: Bohan Jiang <52446949+Bohan-J@users.noreply.github.com>
Date: Fri, 8 May 2026 14:59:01 +0800
Subject: [PATCH] fix(timeline): make Show older / Show newer affordances
 clearly clickable (MUL-1858) (#2257)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pre-fix top "Show older" was a bare <button> sandwiched between two
horizontal divider lines, styled `text-xs text-muted-foreground`. Visually
it read as a divider, not an action — users on issues with hidden older
entries thought the comments had vanished and didn't notice the affordance.

Convert all three timeline pagination affordances to shadcn Button:

- Top: outline button with ChevronUp icon, "Show older"
- Bottom (in around-mode pages): outline button with ChevronDown icon,
  "Show newer"; default-variant button with ArrowDownToLine icon,
  "Jump to latest" (or "Jump to latest · N new")

No behavior change — same fetchOlder / fetchNewer / jumpToLatest hooks,
same i18n keys. Just the visual treatment.

Co-authored-by: multica-agent <github@multica.ai>
---
 .../views/issues/components/issue-detail.tsx  | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/views/issues/components/issue-detail.tsx b/packages/views/issues/components/issue-detail.tsx
index 9528aa5f3..2bd0ff8d9 100644
--- a/packages/views/issues/components/issue-detail.tsx
+++ b/packages/views/issues/components/issue-detail.tsx
@@ -6,10 +6,12 @@ import { AppLink } from "../../navigation";
 import { useNavigation } from "../../navigation";
 import {
   Archive,
+  ArrowDownToLine,
   Calendar,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   CircleCheck,
   MoreHorizontal,
   PanelRight,
@@ -993,18 +995,18 @@ export function IssueDetail({ issueId, onDelete, onDone, defaultSidebarOpen = tr
             ) : (
             <>
             {hasMoreOlder && (
-              <div className="my-4 flex items-center gap-3">
-                <div className="h-px flex-1 bg-border" />
-                <button
+              <div className="my-4 flex justify-center">
+                <Button
+                  variant="outline"
+                  size="sm"
                   onClick={fetchOlder}
                   disabled={isFetchingOlder}
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
                 >
+                  <ChevronUp />
                   {isFetchingOlder
                     ? t(($) => $.timeline.loading)
                     : t(($) => $.timeline.show_older)}
-                </button>
-                <div className="h-px flex-1 bg-border" />
+                </Button>
               </div>
             )}
             <div className="mt-4 flex flex-col gap-3">
@@ -1087,29 +1089,33 @@ export function IssueDetail({ issueId, onDelete, onDone, defaultSidebarOpen = tr
               })}
             </div>
             {(hasMoreNewer || !isAtLatest) && (
-              <div className="mt-4 flex items-center justify-center gap-4">
+              <div className="mt-4 flex items-center justify-center gap-2">
                 {hasMoreNewer && (
-                  <button
+                  <Button
+                    variant="outline"
+                    size="sm"
                     onClick={fetchNewer}
                     disabled={isFetchingNewer}
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
                   >
+                    <ChevronDown />
                     {isFetchingNewer
                       ? t(($) => $.timeline.loading)
                       : t(($) => $.timeline.show_newer)}
-                  </button>
+                  </Button>
                 )}
                 {!isAtLatest && (
-                  <button
+                  <Button
+                    variant="default"
+                    size="sm"
                     onClick={jumpToLatest}
-                    className="text-xs font-medium text-foreground hover:text-foreground/80 transition-colors"
                   >
+                    <ArrowDownToLine />
                     {newEntriesBelowCount > 0
                       ? t(($) => $.timeline.jump_to_latest_with_count, {
                           count: newEntriesBelowCount,
                         })
                       : t(($) => $.timeline.jump_to_latest)}
-                  </button>
+                  </Button>
                 )}
               </div>
             )}