fix: there is no back button to thread

resources/js/hooks/use-go-back.ts

@@ -0,0 +1,23 @@
+import type { InertiaLinkProps } from '@inertiajs/react';
+import { router, usePage } from '@inertiajs/react';
+import LogController from '@/actions/App/Http/Controllers/LogController';
+import { home } from '@/routes';
+
+export function useGoBack(
+    fallback?: NonNullable<InertiaLinkProps['href']>,
+): () => void {
+    const { auth } = usePage().props;
+
+    return () => {
+        if (window.history.length > 1) {
+            window.history.back();
+
+            return;
+        }
+
+        router.visit(
+            fallback ??
+                (auth.log === null ? home() : LogController.show(auth.log)),
+        );
+    };
+}

resources/js/pages/commit/show.tsx

@@ -1,13 +1,12 @@
-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 { 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,
@@ -28,7 +27,7 @@ export default function Show({
     continuation: ThreadContinuation;
     replies: CursorPaginated<ThreadCommit> | null;
 }) {
-    const { auth } = usePage().props;
+    const goBack = useGoBack();
     const { shown, nextId, size, isCapped, isLoading, loadMore } =
         useContinuation(continuation);
     const focusedPosition = continuation.position;
@@ -40,16 +39,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 (

resources/js/pages/user/connections.tsx

@@ -8,6 +8,7 @@ import { FollowButton } from '@/components/follow-button';
 import { PageTabs } from '@/components/page-tabs';
 import { Spinner } from '@/components/ui/spinner';
 import { UserAvatar } from '@/components/user-avatar';
+import { useGoBack } from '@/hooks/use-go-back';
 import AppLayout from '@/layouts/app-layout';
 import { laneColor } from '@/lib/utils';
 import { show } from '@/routes/user';
@@ -40,20 +41,22 @@ export default function Connections({
 }) {
     const { auth } = usePage().props;
     const title = type === 'following' ? 'Following' : 'Followers';
+    const goBack = useGoBack(show(user));
 
     return (
         <>
             <Head title={`${title} · @${user.username}`} />
 
             <div className="sticky top-0 z-10 bg-card">
                 <div className="flex h-14 items-center gap-3 border-b px-4 sm:px-6">
-                    <Link
-                        href={show(user)}
+                    <button
+                        type="button"
+                        onClick={goBack}
                         aria-label={`Back to @${user.username}`}
                         className="text-muted-foreground hover:text-foreground"
                     >
                         <ArrowLeft className="size-4" />
-                    </Link>
+                    </button>
                     <h1 className="min-w-0 truncate font-semibold">
                         {user.name}
                     </h1>

resources/js/pages/user/show.tsx

@@ -1,5 +1,6 @@
 import { Head, Link, router, usePage } from '@inertiajs/react';
 import {
+    ArrowLeft,
     Building2,
     CalendarDays,
     Heart,
@@ -39,6 +40,7 @@ import {
     UserModerationStatus,
 } from '@/components/user-moderation-menu';
 import { UserSafetyMenu } from '@/components/user-safety-menu';
+import { useGoBack } from '@/hooks/use-go-back';
 import { refreshSharedState, useSharedState } from '@/hooks/use-shared-state';
 import AppLayout from '@/layouts/app-layout';
 import { commitStateKey } from '@/lib/commit-state';
@@ -88,6 +90,7 @@ export default function Show({
 }) {
     const { auth } = usePage().props;
     const isCurrentUser = auth.user?.id === user.id;
+    const goBack = useGoBack();
     const lane = laneColor(user.lane);
     const [highlightedPeriod, setHighlightedPeriod] = useState<string | null>(
         null,
@@ -116,6 +119,15 @@ export default function Show({
             <Head title={`${user.name} (@${user.username})`} />
 
             <div className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b bg-card px-4 sm:px-6">
+                <button
+                    type="button"
+                    onClick={goBack}
+                    aria-label="Back"
+                    className="text-muted-foreground hover:text-foreground"
+                    data-test="profile-back"
+                >
+                    <ArrowLeft className="size-4" />
+                </button>
                 <p className="min-w-0 truncate font-semibold">{user.name}</p>
                 <p
                     className="shrink-0 font-mono text-[13px] text-muted-foreground"