From 8d31e11b8f4730fc795f22b40c2abbbf150008fd Mon Sep 17 00:00:00 2001
From: Bismark Kojo Arhinful <270801166+kojoarhinful@users.noreply.github.com>
Date: Tue, 27 Oct 2026 15:48:26 +0000
Subject: [PATCH 1/2] feat: add back navigation to profiles

---
 .../js/components/profile-back-button.tsx     | 33 +++++++++++++++++++
 resources/js/pages/user/show.tsx              |  2 ++
 2 files changed, 35 insertions(+)
 create mode 100644 resources/js/components/profile-back-button.tsx

diff --git a/resources/js/components/profile-back-button.tsx b/resources/js/components/profile-back-button.tsx
new file mode 100644
index 000000000..2fe52d632
--- /dev/null
+++ b/resources/js/components/profile-back-button.tsx
@@ -0,0 +1,33 @@
+import { router, usePage } from '@inertiajs/react';
+import { ArrowLeft } from 'lucide-react';
+import LogController from '@/actions/App/Http/Controllers/LogController';
+import { cn } from '@/lib/utils';
+import { home } from '@/routes';
+
+export function ProfileBackButton({ className }: { className?: string }) {
+    const { auth } = usePage().props;
+
+    const goBack = () => {
+        if (window.history.length > 1) {
+            window.history.back();
+
+            return;
+        }
+
+        router.visit(auth.log === null ? home() : LogController.show(auth.log));
+    };
+
+    return (
+        <button
+            type="button"
+            onClick={goBack}
+            aria-label="Back"
+            className={cn(
+                'text-muted-foreground hover:text-foreground',
+                className,
+            )}
+        >
+            <ArrowLeft className="size-4" />
+        </button>
+    );
+}
diff --git a/resources/js/pages/user/show.tsx b/resources/js/pages/user/show.tsx
index 28cc13e3b..10ad4bbf8 100644
--- a/resources/js/pages/user/show.tsx
+++ b/resources/js/pages/user/show.tsx
@@ -32,6 +32,7 @@ import { LocalTime } from '@/components/local-time';
 import { PageTabs } from '@/components/page-tabs';
 import { PinCommitButton } from '@/components/pin-commit-button';
 import { ProfileActionsMenu } from '@/components/profile-actions-menu';
+import { ProfileBackButton } from '@/components/profile-back-button';
 import { ProfileReadme } from '@/components/profile-readme';
 import { ProfileShareButton } from '@/components/profile-share-button';
 import { Button } from '@/components/ui/button';
@@ -123,6 +124,7 @@ export default function Show({
             <Head title={`${user.name} (@${user.handle})`} />
 
             <div className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b bg-card px-4 sm:px-6">
+                <ProfileBackButton className="shrink-0 transition-colors" />
                 <p className="min-w-0 truncate font-semibold">{user.name}</p>
                 <p
                     className="shrink-0 font-mono text-[13px] text-muted-foreground"

From bf31ecbc2ff483e13804cb52c4a2807ec1f3888e Mon Sep 17 00:00:00 2001
From: Bismark Kojo Arhinful <270801166+kojoarhinful@users.noreply.github.com>
Date: Tue, 27 Oct 2026 16:52:57 +0000
Subject: [PATCH 2/2] fix: check for a previous entry before going back

---
 .../js/components/profile-back-button.tsx     | 18 ++---------
 resources/js/hooks/use-go-back.ts             | 31 +++++++++++++++++++
 resources/js/pages/commit/show.tsx            | 19 +++---------
 resources/js/pages/user/show.tsx              |  2 +-
 4 files changed, 39 insertions(+), 31 deletions(-)
 create mode 100644 resources/js/hooks/use-go-back.ts

diff --git a/resources/js/components/profile-back-button.tsx b/resources/js/components/profile-back-button.tsx
index 2fe52d632..fdce5151e 100644
--- a/resources/js/components/profile-back-button.tsx
+++ b/resources/js/components/profile-back-button.tsx
@@ -1,21 +1,9 @@
-import { router, usePage } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
-import LogController from '@/actions/App/Http/Controllers/LogController';
+import { useGoBack } from '@/hooks/use-go-back';
 import { cn } from '@/lib/utils';
-import { home } from '@/routes';
 
 export function ProfileBackButton({ className }: { className?: string }) {
-    const { auth } = usePage().props;
-
-    const goBack = () => {
-        if (window.history.length > 1) {
-            window.history.back();
-
-            return;
-        }
-
-        router.visit(auth.log === null ? home() : LogController.show(auth.log));
-    };
+    const goBack = useGoBack();
 
     return (
         <button
@@ -23,7 +11,7 @@ export function ProfileBackButton({ className }: { className?: string }) {
             onClick={goBack}
             aria-label="Back"
             className={cn(
-                'text-muted-foreground hover:text-foreground',
+                '-m-3 inline-flex shrink-0 items-center justify-center p-3 text-muted-foreground transition-colors hover:text-foreground',
                 className,
             )}
         >
diff --git a/resources/js/hooks/use-go-back.ts b/resources/js/hooks/use-go-back.ts
new file mode 100644
index 000000000..44808496d
--- /dev/null
+++ b/resources/js/hooks/use-go-back.ts
@@ -0,0 +1,31 @@
+import { router, usePage } from '@inertiajs/react';
+import LogController from '@/actions/App/Http/Controllers/LogController';
+import { home } from '@/routes';
+
+function hasPreviousEntry(): boolean {
+    // `history.length` counts forward entries too, so it cannot tell whether
+    // `history.back()` will actually navigate. The Navigation API can.
+    if (typeof window.navigation?.canGoBack === 'boolean') {
+        return window.navigation.canGoBack;
+    }
+
+    return window.history.length > 1;
+}
+
+/**
+ * Navigates back, falling back to the viewer's log (or the home page for
+ * guests) when there is no previous entry to go back to.
+ */
+export function useGoBack(): () => void {
+    const { auth } = usePage().props;
+
+    return () => {
+        if (hasPreviousEntry()) {
+            window.history.back();
+
+            return;
+        }
+
+        router.visit(auth.log === null ? home() : LogController.show(auth.log));
+    };
+}
diff --git a/resources/js/pages/commit/show.tsx b/resources/js/pages/commit/show.tsx
index 1daf2f57d..7b9ea6cdf 100644
--- a/resources/js/pages/commit/show.tsx
+++ b/resources/js/pages/commit/show.tsx
@@ -1,14 +1,13 @@
-import { Head, router, usePage } from '@inertiajs/react';
+import { Head } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
-import LogController from '@/actions/App/Http/Controllers/LogController';
 import { CommitCard, CommitTombstone } from '@/components/commit-card';
 import { CopyLinkButton } from '@/components/copy-link-button';
 import { GraphCanvas } from '@/components/graph-canvas';
 import { RelatedCommits } from '@/components/related-commits';
 import { useContinuation } from '@/hooks/use-continuation';
+import { useGoBack } from '@/hooks/use-go-back';
 import AppLayout from '@/layouts/app-layout';
 import { isDeleted, laneOf, shortHash } from '@/lib/utils';
-import { home } from '@/routes';
 import type {
     Commit,
     CursorPaginated,
@@ -29,9 +28,9 @@ export default function Show({
     continuation: ThreadContinuation;
     replies: CursorPaginated<ThreadCommit> | null;
 }) {
-    const { auth } = usePage().props;
     const { shown, nextId, size, isCapped, isLoading, loadMore } =
         useContinuation(continuation);
+    const goBack = useGoBack();
     const focusedPosition = continuation.position;
     const positionAt = (position: number) =>
         size > 1 && position >= 1 ? { position, size, isCapped } : undefined;
@@ -41,16 +40,6 @@ export default function Show({
             ? `${commit.body.slice(0, titleLength).trimEnd()}…`
             : commit.body;
 
-    const goBack = () => {
-        if (window.history.length > 1) {
-            window.history.back();
-
-            return;
-        }
-
-        router.visit(auth.log === null ? home() : LogController.show(auth.log));
-    };
-
     const lastAncestor = ancestors.at(-1);
 
     return (
@@ -62,7 +51,7 @@ export default function Show({
                     type="button"
                     onClick={goBack}
                     aria-label="Back"
-                    className="text-muted-foreground hover:text-foreground"
+                    className="-m-3 inline-flex items-center justify-center p-3 text-muted-foreground transition-colors hover:text-foreground"
                 >
                     <ArrowLeft className="size-4" />
                 </button>
diff --git a/resources/js/pages/user/show.tsx b/resources/js/pages/user/show.tsx
index 10ad4bbf8..9ce1218c3 100644
--- a/resources/js/pages/user/show.tsx
+++ b/resources/js/pages/user/show.tsx
@@ -124,7 +124,7 @@ export default function Show({
             <Head title={`${user.name} (@${user.handle})`} />
 
             <div className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b bg-card px-4 sm:px-6">
-                <ProfileBackButton className="shrink-0 transition-colors" />
+                <ProfileBackButton />
                 <p className="min-w-0 truncate font-semibold">{user.name}</p>
                 <p
                     className="shrink-0 font-mono text-[13px] text-muted-foreground"