Skip to content

Commit 4d64ee2

Browse files
MbeaulneMbeaulne
committed
moves app footer
1 parent bed7079 commit 4d64ee2

5 files changed

Lines changed: 121 additions & 70 deletions

File tree

‎src/components/Home/PipelineSection/PipelineRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Badge } from "@/components/ui/badge";
1313
import { Button } from "@/components/ui/button";
1414
import { Checkbox } from "@/components/ui/checkbox";
1515
import { Icon } from "@/components/ui/icon";
16-
import { BlockStack, InlineStack } from "@/components/ui/layout";
16+
import { InlineStack } from "@/components/ui/layout";
1717
import {
1818
Popover,
1919
PopoverContent,

‎src/components/Home/PipelineSection/PipelineSection.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,11 @@ export const PipelineSection = withSuspenseWrapper(() => {
213213
</Table>
214214

215215
{totalPages > 1 && (
216-
<InlineStack align="space-between" blockAlign="center" className="w-full">
216+
<InlineStack
217+
align="space-between"
218+
blockAlign="center"
219+
className="w-full"
220+
>
217221
<InlineStack gap="2" blockAlign="center">
218222
<Button
219223
variant="outline"

‎src/components/Home/RunSection/RunRow.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
TooltipContent,
1616
TooltipTrigger,
1717
} from "@/components/ui/tooltip";
18-
import { Paragraph } from "@/components/ui/typography";
1918
import useToastNotification from "@/hooks/useToastNotification";
2019
import { useBackend } from "@/providers/BackendProvider";
2120
import { APP_ROUTES } from "@/routes/router";
@@ -95,14 +94,17 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
9594
return (
9695
<TableRow
9796
onClick={handleRowClick}
98-
className="cursor-pointer text-gray-500 text-xs"
97+
className="cursor-pointer text-gray-500 text-xs h-10"
9998
>
10099
<TableCell>
101100
<InlineStack gap="2" blockAlign="center" wrap="nowrap">
102101
<StatusIcon status={overallStatus} />
103-
<Paragraph className="truncate max-w-100 text-sm" title={name}>
102+
<span
103+
className="truncate max-w-100 text-sm text-foreground"
104+
title={name}
105+
>
104106
{name}
105-
</Paragraph>
107+
</span>
106108
<div
107109
onClick={(e) => e.stopPropagation()}
108110
className="flex items-center text-sm"

‎src/components/layout/RootLayout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Outlet } from "@tanstack/react-router";
1+
import { Outlet, useLocation } from "@tanstack/react-router";
22
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
33
import { ToastContainer } from "react-toastify";
44

@@ -11,6 +11,8 @@ import AppMenu from "./AppMenu";
1111

1212
const RootLayout = () => {
1313
useDocumentTitle();
14+
const { pathname } = useLocation();
15+
const isDashboard = pathname.startsWith("/dashboard");
1416

1517
return (
1618
<BackendProvider>
@@ -24,7 +26,7 @@ const RootLayout = () => {
2426
<Outlet />
2527
</main>
2628

27-
<AppFooter />
29+
{!isDashboard && <AppFooter />}
2830

2931
{import.meta.env.VITE_ENABLE_ROUTER_DEVTOOLS === "true" && (
3032
<TanStackRouterDevtools />

‎src/routes/Dashboard/DashboardLayout.tsx‎

Lines changed: 105 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@ import { Link, Outlet } from "@tanstack/react-router";
33
import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
44
import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
55
import { Icon, type IconName } from "@/components/ui/icon";
6-
import { BlockStack, InlineStack } from "@/components/ui/layout";
7-
import { Heading, Text } from "@/components/ui/typography";
6+
import { InlineStack } from "@/components/ui/layout";
7+
import { Text } from "@/components/ui/typography";
88
import { cn } from "@/lib/utils";
9-
import { DOCUMENTATION_URL } from "@/utils/constants";
9+
import {
10+
ABOUT_URL,
11+
DOCUMENTATION_URL,
12+
GIT_COMMIT,
13+
GIT_REPO_URL,
14+
GIVE_FEEDBACK_URL,
15+
PRIVACY_POLICY_URL,
16+
TOP_NAV_HEIGHT,
17+
} from "@/utils/constants";
1018

1119
interface SidebarItem {
1220
to: string;
@@ -32,74 +40,109 @@ export function DashboardLayout() {
3240
const requiresAuthorization = isAuthorizationRequired();
3341

3442
return (
35-
<div className="w-full px-8 py-6">
36-
<BlockStack gap="6">
37-
<InlineStack gap="2" blockAlign="center">
38-
<Heading level={1}>Dashboard</Heading>
39-
<Text
40-
as="span"
41-
size="xs"
42-
weight="semibold"
43-
className="px-2 py-1 rounded-full bg-amber-100 text-amber-800"
44-
>
45-
Beta
46-
</Text>
47-
</InlineStack>
43+
<div
44+
className="flex w-full overflow-hidden"
45+
style={{ height: `calc(100vh - ${TOP_NAV_HEIGHT}px)` }}
46+
>
47+
{/* Sidebar — fixed height, independent scroll */}
48+
<div className="w-56 shrink-0 border-r border-border flex flex-col overflow-y-auto">
49+
{/* Dashboard heading */}
50+
<div className="px-6 pt-6 pb-4 shrink-0">
51+
<InlineStack gap="2" blockAlign="center">
52+
<Text size="lg" weight="semibold">
53+
Dashboard
54+
</Text>
55+
<Text
56+
as="span"
57+
size="xs"
58+
weight="semibold"
59+
className="px-2 py-0.5 rounded-full bg-amber-100 text-amber-800"
60+
>
61+
Beta
62+
</Text>
63+
</InlineStack>
64+
</div>
65+
66+
{/* Top nav items */}
67+
<div className="flex flex-col gap-1 px-3">
68+
{SIDEBAR_ITEMS.map((item) => (
69+
<Link
70+
key={item.to}
71+
to={item.to}
72+
className="w-full"
73+
activeProps={{ className: "is-active" }}
74+
>
75+
{({ isActive }) => (
76+
<div className={navItemClass(isActive)}>
77+
<Icon name={item.icon} size="sm" />
78+
<Text size="sm">{item.label}</Text>
79+
</div>
80+
)}
81+
</Link>
82+
))}
83+
</div>
4884

49-
<InlineStack gap="8" blockAlign="start" className="w-full min-h-100">
50-
{/* Sidebar */}
51-
<div className="w-48 shrink-0 border-r border-border pr-4 flex flex-col justify-between self-stretch">
52-
{/* Top nav */}
53-
<BlockStack gap="1">
54-
{SIDEBAR_ITEMS.map((item) => (
55-
<Link
56-
key={item.to}
57-
to={item.to}
58-
className="w-full"
59-
activeProps={{ className: "is-active" }}
60-
>
61-
{({ isActive }) => (
62-
<div className={navItemClass(isActive)}>
63-
<Icon name={item.icon} size="sm" />
64-
<Text size="sm">{item.label}</Text>
65-
</div>
66-
)}
67-
</Link>
68-
))}
69-
</BlockStack>
85+
{/* Spacer */}
86+
<div className="flex-1 min-h-4" />
7087

71-
{/* Bottom utilities */}
72-
<BlockStack gap="1" className="border-t border-border pt-3">
88+
{/* Bottom utilities */}
89+
<div className="flex flex-col gap-1 px-3 border-t border-border pt-3 pb-3">
90+
<a
91+
href={DOCUMENTATION_URL}
92+
target="_blank"
93+
rel="noopener noreferrer"
94+
className={navItemClass(false)}
95+
>
96+
<Icon name="BookOpen" size="sm" />
97+
<Text size="sm">Docs</Text>
98+
</a>
99+
<Link to="/settings/backend" className="w-full">
100+
{({ isActive }) => (
101+
<div className={navItemClass(isActive)}>
102+
<Icon name="Settings" size="sm" />
103+
<Text size="sm">Settings</Text>
104+
</div>
105+
)}
106+
</Link>
107+
{requiresAuthorization && (
108+
<div className="px-3 py-2">
109+
<TopBarAuthentication />
110+
</div>
111+
)}
112+
113+
{/* Footer links */}
114+
<div className="flex flex-col gap-0.5 pt-2 mt-1 border-t border-border">
115+
{[
116+
{ label: "About", href: ABOUT_URL },
117+
{ label: "Give feedback", href: GIVE_FEEDBACK_URL },
118+
{ label: "Privacy policy", href: PRIVACY_POLICY_URL },
119+
].map(({ label, href }) => (
73120
<a
74-
href={DOCUMENTATION_URL}
121+
key={label}
122+
href={href}
75123
target="_blank"
76124
rel="noopener noreferrer"
77-
className={navItemClass(false)}
125+
className="px-3 py-1 text-xs text-muted-foreground hover:text-foreground rounded-md hover:bg-accent"
78126
>
79-
<Icon name="BookOpen" size="sm" />
80-
<Text size="sm">Docs</Text>
127+
{label}
81128
</a>
82-
<Link to="/settings/backend" className="w-full">
83-
{({ isActive }) => (
84-
<div className={navItemClass(isActive)}>
85-
<Icon name="Settings" size="sm" />
86-
<Text size="sm">Settings</Text>
87-
</div>
88-
)}
89-
</Link>
90-
{requiresAuthorization && (
91-
<div className="px-3 py-2">
92-
<TopBarAuthentication />
93-
</div>
94-
)}
95-
</BlockStack>
129+
))}
130+
<a
131+
href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
132+
target="_blank"
133+
rel="noopener noreferrer"
134+
className="px-3 py-1 text-xs text-muted-foreground hover:text-foreground rounded-md hover:bg-accent font-mono"
135+
>
136+
ver: {GIT_COMMIT.substring(0, 6)}
137+
</a>
96138
</div>
139+
</div>
140+
</div>
97141

98-
<BlockStack className="flex-1 min-w-0">
99-
<Outlet />
100-
</BlockStack>
101-
</InlineStack>
102-
</BlockStack>
142+
{/* Main content — independent scroll */}
143+
<div className="flex-1 min-w-0 overflow-y-auto px-8 pb-6 pt-4">
144+
<Outlet />
145+
</div>
103146
</div>
104147
);
105148
}

0 commit comments

Comments
 (0)