lee/backrest
1
0
Fork 0
mirror of https://github.com/garethgeorge/backrest.git synced 2026-09-23 00:15:45 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: keep the current repo / plan visibly selected in the side nav
Release Please / release-please (push) Has been cancelled
Details
Release Preview / call-reusable-release (push) Has been cancelled
Details
Test / test-nix (push) Has been cancelled
Details
Test / test-win (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Gareth
2026-01-16 16:41:07 -08:00
parent 3c5682ae70
commit e222ec0280
1 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/app/App.tsx
+48 -32
View File
@@ -67,6 +67,7 @@ import {
useNavigate,
useParams,
Link as RouterLink,
useLocation,
} from "react-router-dom";
import { MainContentAreaTemplate } from "../components/layout/MainContentArea";
import { create } from "@bufbuild/protobuf";
@@ -208,12 +209,15 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
const peerStates = useSyncStates();
const showModal = useShowModal();
const navigate = useNavigate();
const location = useLocation();
const handleNav = (path: string) => {
navigate(path);
onClose?.();
};
const isActive = (path: string) => location.pathname === path;
// Replicate getSidenavItems functionality with Chakra components
if (!config) return null;
@@ -244,6 +248,7 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
onClick={() => handleNav("/")}
px={4}
py={2}
bg={isActive("/") ? "bg.muted" : undefined}
_hover={{ bg: "bg.muted" }}
userSelect="none"
>
@@ -285,6 +290,8 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
planId: plan.id,
repoGuid: reposById[plan.repo]?.guid,
});
const planPath = `/plan/${plan.id}`;
const active = isActive(planPath);
return (
<Flex
key={plan.id}
@@ -292,6 +299,7 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
pl={9}
pr={2}
py={1}
bg={active ? "bg.emphasized" : undefined}
_hover={{ bg: "bg.muted" }}
className="group"
>
@@ -301,10 +309,12 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
<Box
flex="1"
cursor="pointer"
onClick={() => handleNav(`/plan/${plan.id}`)}
onClick={() => handleNav(planPath)}
userSelect="none"
>
<Text truncate>{plan.id}</Text>
<Text wordBreak="break-word">
{plan.id}
</Text>
</Box>
<Box
opacity={0}
@@ -358,6 +368,8 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
<FiPlus /> {m.app_menu_add_repo()}
</Button>
{configRepos.map((repo) => {
const repoPath = `/repo/${repo.id}`;
const active = isActive(repoPath);
return (
<Flex
key={repo.id}
@@ -365,6 +377,7 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
pl={9}
pr={2}
py={1}
bg={active ? "bg.emphasized" : undefined}
_hover={{ bg: "bg.muted" }}
className="group"
>
@@ -379,10 +392,12 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
<Box
flex="1"
cursor="pointer"
onClick={() => handleNav(`/repo/${repo.id}`)}
onClick={() => handleNav(repoPath)}
userSelect="none"
>
<Text truncate>{repo.id}</Text>
<Text wordBreak="break-word">
{repo.id}
</Text>
</Box>
<Box
opacity={0}
@@ -438,34 +453,35 @@ const SidebarContent = ({ onClose }: { onClose?: () => void }) => {
</Flex>
{/* Nested Repos for Peer */}
{peerState.knownRepos.map((repo: RepoMetadata) => (
<Flex
key={repo.guid}
align="center"
pl={12}
pr={2}
py={1}
_hover={{ bg: "bg.muted" }}
cursor="pointer"
onClick={() =>
navigate(
`/peer/${peerState.peerInstanceId}/repo/${repo.id}`,
)
}
>
<Box flexShrink={0} mr={2}>
<IconForResource
selector={create(OpSelectorSchema, {
originalInstanceKeyid: peerState.peerKeyid,
repoGuid: repo.guid,
})}
/>
</Box>
<Text fontSize="sm" truncate>
{repo.id}
</Text>
</Flex>
))}
{peerState.knownRepos.map((repo: RepoMetadata) => {
const repoPath = `/peer/${peerState.peerInstanceId}/repo/${repo.id}`;
const active = isActive(repoPath);
return (
<Flex
key={repo.guid}
align="center"
pl={12}
pr={2}
py={1}
bg={active ? "bg.emphasized" : undefined}
_hover={{ bg: "bg.muted" }}
cursor="pointer"
onClick={() => handleNav(repoPath)}
>
<Box flexShrink={0} mr={2}>
<IconForResource
selector={create(OpSelectorSchema, {
originalInstanceKeyid: peerState.peerKeyid,
repoGuid: repo.guid,
})}
/>
</Box>
<Text fontSize="sm" wordBreak="break-word">
{repo.id}
</Text>
</Flex>
);
})}
</Box>
);
})}