Skip to content

Commit 449c2a9

Browse files
MananTankMananTank
committed
Dashboard: Use sidebar layout in team layout
1 parent 26b8c32 commit 449c2a9

File tree

60 files changed

+836
-1148
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+836
-1148
lines changed

‎apps/dashboard/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@radix-ui/react-alert-dialog": "^1.1.14",
1212
"@radix-ui/react-avatar": "^1.1.10",
1313
"@radix-ui/react-checkbox": "^1.3.2",
14+
"@radix-ui/react-collapsible": "^1.1.11",
1415
"@radix-ui/react-dialog": "1.1.14",
1516
"@radix-ui/react-dropdown-menu": "^2.1.15",
1617
"@radix-ui/react-hover-card": "^1.1.14",

‎apps/dashboard/redirects.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,27 @@ const projectPageRedirects = [
106106
source: `${projectRoute}/nebula/:path*`,
107107
},
108108
{
109-
source: `${projectRoute}/connect/analytics`,
110109
destination: `${projectRoute}`,
111110
permanent: false,
111+
source: `${projectRoute}/connect/analytics`,
112+
},
113+
];
114+
115+
const teamPageRedirects = [
116+
{
117+
destination: "/team/:team_slug/~/billing/:path*",
118+
permanent: false,
119+
source: "/team/:team_slug/~/settings/billing/:path*",
120+
},
121+
{
122+
destination: "/team/:team_slug/~/billing/invoices/:path*",
123+
permanent: false,
124+
source: "/team/:team_slug/~/settings/invoices/:path*",
125+
},
126+
{
127+
destination: "/team/:team_slug/~/billing",
128+
permanent: false,
129+
source: "/team/:team_slug/~/settings/credits",
112130
},
113131
];
114132

@@ -426,6 +444,7 @@ async function redirects() {
426444
},
427445
...legacyDashboardToTeamRedirects,
428446
...projectPageRedirects,
447+
...teamPageRedirects,
429448
];
430449
}
431450

‎apps/dashboard/src/@/components/analytics/date-range-selector.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ import {
88
SelectValue,
99
} from "@/components/ui/select";
1010
import { normalizeTime } from "@/lib/time";
11+
import { cn } from "@/lib/utils";
1112

1213
export function DateRangeSelector(props: {
1314
range: Range;
1415
setRange: (range: Range) => void;
1516
popoverAlign?: "start" | "end" | "center";
17+
className?: string;
1618
}) {
1719
const { range, setRange } = props;
1820
const daysDiff = differenceInCalendarDays(range.to, range.from);
@@ -26,7 +28,7 @@ export function DateRangeSelector(props: {
2628

2729
return (
2830
<DatePickerWithRange
29-
className="w-auto bg-card"
31+
className={cn("w-auto bg-card", props.className)}
3032
from={range.from}
3133
header={
3234
<div className="mb-2 border-border border-b p-4">

‎apps/dashboard/src/@/components/analytics/range-selector.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,9 @@ export function RangeSelector({
7676
});
7777

7878
return (
79-
<div className="flex justify-end gap-4">
79+
<div className="flex justify-end gap-3 flex-col lg:flex-row">
8080
<DateRangeSelector
81+
className="rounded-full"
8182
range={localRange}
8283
setRange={(newRange) => {
8384
setRange(newRange);
@@ -89,7 +90,7 @@ export function RangeSelector({
8990
}}
9091
/>
9192
<IntervalSelector
92-
className="bg-card"
93+
className="bg-card rounded-full"
9394
intervalType={localInterval}
9495
setIntervalType={(newInterval) => {
9596
setInterval(newInterval);

‎apps/dashboard/src/@/components/billing/CancelPlanModal/CancelPlanModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function UnpaidInvoicesWarning({ teamSlug }: { teamSlug: string }) {
8282

8383
<Button asChild className="w-full gap-2 bg-card" variant="outline">
8484
<Link
85-
href={`/team/${teamSlug}/~/settings/invoices?status=open`}
85+
href={`/team/${teamSlug}/~/billing/invoices?status=open`}
8686
rel="noopener noreferrer"
8787
target="_blank"
8888
>

‎apps/dashboard/src/@/components/billing/billing.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function BillingWarning({ teamSlug }: { teamSlug: string }) {
6060
You have outstanding invoices. Please{" "}
6161
<Link
6262
className="font-medium text-amber-700 underline transition-colors hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300"
63-
href={`/team/${teamSlug}/~/settings/invoices?status=open`}
63+
href={`/team/${teamSlug}/~/billing/invoices?status=open`}
6464
>
6565
pay them
6666
</Link>{" "}

‎apps/dashboard/src/@/components/blocks/GatedSwitch.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
4444
<div className="flex w-full flex-col gap-2">
4545
<Button asChild className="justify-start gap-2" size="sm">
4646
<Link
47-
href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${props.requiredPlan}`}
47+
href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${props.requiredPlan}`}
4848
rel="noopener noreferrer"
4949
target="_blank"
5050
>

‎apps/dashboard/src/@/components/blocks/MobileSidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function MobileSidebar(props: {
5353
);
5454
}
5555

56-
export function useActiveSidebarLink(links: SidebarLink[]) {
56+
function useActiveSidebarLink(links: SidebarLink[]) {
5757
const pathname = usePathname();
5858

5959
const activeLink = useMemo(() => {

‎apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

Lines changed: 3 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
1-
import {
2-
Sidebar,
3-
SidebarContent,
4-
SidebarFooter,
5-
SidebarGroup,
6-
SidebarGroupContent,
7-
SidebarGroupLabel,
8-
SidebarMenu,
9-
SidebarMenuButton,
10-
SidebarMenuItem,
11-
SidebarMenuSubItem,
12-
SidebarRail,
13-
SidebarSeparator,
14-
SidebarTrigger,
15-
useSidebar,
16-
} from "@/components/ui/sidebar";
1+
"use client";
2+
173
import { cn } from "../../lib/utils";
18-
import { AppFooter } from "../footers/app-footer";
19-
import { NavLink } from "../ui/NavLink";
20-
import { Separator } from "../ui/separator";
21-
import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
4+
import { MobileSidebar } from "./MobileSidebar";
225
import { CustomSidebar, type SidebarLink } from "./Sidebar";
236

247
export function SidebarLayout(props: {
@@ -51,129 +34,3 @@ export function SidebarLayout(props: {
5134
</div>
5235
);
5336
}
54-
55-
export function FullWidthSidebarLayout(props: {
56-
contentSidebarLinks: SidebarLink[];
57-
footerSidebarLinks?: SidebarLink[];
58-
children: React.ReactNode;
59-
className?: string;
60-
}) {
61-
const { contentSidebarLinks, children, footerSidebarLinks } = props;
62-
return (
63-
<div
64-
className={cn(
65-
"relative flex w-full flex-1 overflow-y-hidden",
66-
props.className,
67-
)}
68-
>
69-
{/* left - sidebar */}
70-
<Sidebar className="pt-2" collapsible="icon" side="left">
71-
<SidebarContent className="p-2">
72-
<RenderSidebarMenu links={contentSidebarLinks} />
73-
</SidebarContent>
74-
75-
{footerSidebarLinks && (
76-
<SidebarFooter className="pb-3">
77-
<RenderSidebarMenu links={footerSidebarLinks} />
78-
</SidebarFooter>
79-
)}
80-
81-
<SidebarRail />
82-
</Sidebar>
83-
84-
{/* right - content */}
85-
<div className="flex h-full flex-grow flex-col overflow-y-auto">
86-
<MobileSidebarTrigger
87-
links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
88-
/>
89-
90-
<main className="flex min-w-0 grow flex-col max-sm:w-full">
91-
{children}
92-
</main>
93-
<AppFooter containerClassName="max-w-7xl" />
94-
</div>
95-
</div>
96-
);
97-
}
98-
99-
function RenderSidebarGroup(props: {
100-
sidebarLinks: SidebarLink[];
101-
groupName: string;
102-
}) {
103-
return (
104-
<SidebarGroup className="p-0">
105-
<SidebarMenuItem>
106-
<SidebarGroupLabel> {props.groupName}</SidebarGroupLabel>
107-
<SidebarGroupContent>
108-
<RenderSidebarMenu links={props.sidebarLinks} />
109-
</SidebarGroupContent>
110-
</SidebarMenuItem>
111-
</SidebarGroup>
112-
);
113-
}
114-
115-
function RenderSidebarMenu(props: { links: SidebarLink[] }) {
116-
const sidebar = useSidebar();
117-
return (
118-
<SidebarMenu className="gap-1.5">
119-
{props.links.map((link, idx) => {
120-
// link
121-
if ("href" in link) {
122-
return (
123-
<SidebarMenuSubItem key={link.href}>
124-
<SidebarMenuButton asChild>
125-
<NavLink
126-
activeClassName="text-foreground bg-accent"
127-
className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
128-
exactMatch={link.exactMatch}
129-
href={link.href}
130-
isActive={link.isActive}
131-
onClick={() => {
132-
sidebar.setOpenMobile(false);
133-
}}
134-
>
135-
{link.icon && <link.icon className="size-4" />}
136-
<span>{link.label}</span>
137-
</NavLink>
138-
</SidebarMenuButton>
139-
</SidebarMenuSubItem>
140-
);
141-
}
142-
143-
// separator
144-
if ("separator" in link) {
145-
return (
146-
<SidebarSeparator
147-
className="my-1"
148-
key={`separator-${
149-
// biome-ignore lint/suspicious/noArrayIndexKey: index is fine here
150-
idx
151-
}`}
152-
/>
153-
);
154-
}
155-
156-
// group
157-
return (
158-
<RenderSidebarGroup
159-
groupName={link.group}
160-
key={link.group}
161-
sidebarLinks={link.links}
162-
/>
163-
);
164-
})}
165-
</SidebarMenu>
166-
);
167-
}
168-
169-
function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
170-
const activeLink = useActiveSidebarLink(props.links);
171-
172-
return (
173-
<div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
174-
<SidebarTrigger className="size-4" />
175-
<Separator className="h-4" orientation="vertical" />
176-
{activeLink && <span className="text-sm">{activeLink.label}</span>}
177-
</div>
178-
);
179-
}

‎apps/dashboard/src/@/components/blocks/TeamPlanBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function TeamPlanBadge(props: {
4545
}
4646
e.stopPropagation();
4747
e.preventDefault();
48-
router.push(`/team/${props.teamSlug}/~/settings/billing?showPlans=true`);
48+
router.push(`/team/${props.teamSlug}/~/billing?showPlans=true`);
4949
}
5050

5151
return (

0 commit comments

Comments
 (0)