authorgravatar for 73941998+UtkarshUsername@users.noreply.github.comUtkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com> 2026-08-11 21:56:24+05:30
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-11 12:26:24-04:00
log44621c345fe7ce7cfa5d8e5286290d9c8dc20ce5
treeb75601f2756b61f5e862858c4df60d975a44ec75
parent220e573b14cea84b6662a7d69047129047433b63
signature Signed by PGP key B5690EEEBB952194

feat(web): add back buttons for the pull requests and usage pages in the sidebar footer (#6031)

Co-authored-by: shivam <91240327+shivamhwp@users.noreply.github.com>

1 files changed, 48 insertions(+), 9 deletions(-)

apps/web/src/components/sidebar/SidebarChrome.tsx+48-9
...@@ -1,6 +1,11 @@...@@ -1,6 +1,11 @@
1import { ChartNoAxesColumnIcon, GitPullRequestIcon, SettingsIcon } from "lucide-react";1import {
2 ArrowLeftIcon,
3 ChartNoAxesColumnIcon,
4 GitPullRequestIcon,
5 SettingsIcon,
6} from "lucide-react";
2import { memo, useCallback } from "react";7import { memo, useCallback } from "react";
3import { Link, useNavigate } from "@tanstack/react-router";8import { Link, useCanGoBack, useLocation, useNavigate } from "@tanstack/react-router";
49
5import { useEnvironmentIdentificationMode } from "../../hooks/useSettings";10import { useEnvironmentIdentificationMode } from "../../hooks/useSettings";
6import { cn } from "../../lib/utils";11import { cn } from "../../lib/utils";
...@@ -114,6 +119,15 @@ function T3Wordmark() {...@@ -114,6 +119,15 @@ function T3Wordmark() {
114export const SidebarChromeFooter = memo(function SidebarChromeFooter() {119export const SidebarChromeFooter = memo(function SidebarChromeFooter() {
115 const navigate = useNavigate();120 const navigate = useNavigate();
116 const { isMobile, setOpenMobile } = useSidebar();121 const { isMobile, setOpenMobile } = useSidebar();
122 const canGoBack = useCanGoBack();
123 const currentFooterPage = useLocation({
124 select: (location) =>
125 location.pathname === "/usage"
126 ? "usage"
127 : location.pathname === "/pull-requests"
128 ? "pull-requests"
129 : null,
130 });
117 const primaryEnvironment = usePrimaryEnvironment();131 const primaryEnvironment = usePrimaryEnvironment();
118 const pullRequestsSupported =132 const pullRequestsSupported =
119 primaryEnvironment?.serverConfig?.environment.capabilities.pullRequests === true;133 primaryEnvironment?.serverConfig?.environment.capabilities.pullRequests === true;
...@@ -138,12 +152,28 @@ export const SidebarChromeFooter = memo(function SidebarChromeFooter() {...@@ -138,12 +152,28 @@ export const SidebarChromeFooter = memo(function SidebarChromeFooter() {
138 void navigate({ to: "/usage" });152 void navigate({ to: "/usage" });
139 }, [isMobile, navigate, setOpenMobile]);153 }, [isMobile, navigate, setOpenMobile]);
140154
155 const handleBackClick = useCallback(() => {
156 closeMobileSidebar();
157 if (canGoBack) {
158 window.history.back();
159 return;
160 }
161 void navigate({ to: "/" });
162 }, [canGoBack, closeMobileSidebar, navigate]);
163
141 return (164 return (
142 <SidebarFooter className="p-[var(--sidebar-content-inset)]">165 <SidebarFooter className="p-[var(--sidebar-content-inset)]">
143 <SidebarProviderUpdatePill />166 <SidebarProviderUpdatePill />
144 <SidebarUpdatePill />167 <SidebarUpdatePill />
145 <SidebarMenu>168 <SidebarMenu>
146 {pullRequestsSupported ? (169 {currentFooterPage === "pull-requests" ? (
170 <SidebarMenuItem>
171 <SidebarMenuButton onClick={handleBackClick}>
172 <ArrowLeftIcon />
173 <span>Back</span>
174 </SidebarMenuButton>
175 </SidebarMenuItem>
176 ) : pullRequestsSupported ? (
147 <SidebarMenuItem>177 <SidebarMenuItem>
148 <SidebarMenuButton onClick={handlePullRequestsClick}>178 <SidebarMenuButton onClick={handlePullRequestsClick}>
149 <GitPullRequestIcon />179 <GitPullRequestIcon />
...@@ -151,12 +181,21 @@ export const SidebarChromeFooter = memo(function SidebarChromeFooter() {...@@ -151,12 +181,21 @@ export const SidebarChromeFooter = memo(function SidebarChromeFooter() {
151 </SidebarMenuButton>181 </SidebarMenuButton>
152 </SidebarMenuItem>182 </SidebarMenuItem>
153 ) : null}183 ) : null}
154 <SidebarMenuItem>184 {currentFooterPage === "usage" ? (
155 <SidebarMenuButton onClick={handleUsageClick}>185 <SidebarMenuItem>
156 <ChartNoAxesColumnIcon />186 <SidebarMenuButton onClick={handleBackClick}>
157 <span>Usage</span>187 <ArrowLeftIcon />
158 </SidebarMenuButton>188 <span>Back</span>
159 </SidebarMenuItem>189 </SidebarMenuButton>
190 </SidebarMenuItem>
191 ) : (
192 <SidebarMenuItem>
193 <SidebarMenuButton onClick={handleUsageClick}>
194 <ChartNoAxesColumnIcon />
195 <span>Usage</span>
196 </SidebarMenuButton>
197 </SidebarMenuItem>
198 )}
160 <SidebarMenuItem>199 <SidebarMenuItem>
161 <SidebarMenuButton onClick={handleSettingsClick}>200 <SidebarMenuButton onClick={handleSettingsClick}>
162 <SettingsIcon />201 <SettingsIcon />