feat(opendock): added in new article link setup for fine tuning how od works

frontend/src/components/Sidebar/TransportationBar.tsx

@@ -0,0 +1,94 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { ChevronRight, Link as link } from "lucide-react";
+import { permissionQuery } from "../../lib/queries/permsCheck";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "../ui/collapsible";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	useSidebar,
+} from "../ui/sidebar";
+
+export default function TransportationBar() {
+	const { data: canCreate = false } = useQuery(
+		permissionQuery({
+			openDock: ["create"],
+		}),
+	);
+
+	const { setOpen } = useSidebar();
+	const items = [
+		{
+			title: "Open Dock",
+			url: "/transportation",
+			//icon,
+			isActive: canCreate,
+			items: [
+				{
+					title: "ArticleLink",
+					icon: link,
+					url: "/transportation/opendock",
+				},
+			],
+		},
+	];
+
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Transportation</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<div key={item.title}>
+							{item.isActive && (
+								<Collapsible
+									asChild
+									//defaultOpen={isNotifications}
+									className="group/collapsible"
+								>
+									<SidebarMenuItem>
+										<CollapsibleTrigger asChild>
+											<SidebarMenuButton tooltip={item.title}>
+												{item.title}
+
+												<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+											</SidebarMenuButton>
+										</CollapsibleTrigger>
+										<CollapsibleContent>
+											<SidebarMenuSub>
+												{item.items?.map((subItem) => (
+													<SidebarMenuSubItem key={subItem.title}>
+														<SidebarMenuSubButton asChild>
+															<Link
+																to={subItem.url}
+																onClick={() => setOpen(false)}
+															>
+																<subItem.icon />
+																<span>{subItem.title}</span>
+															</Link>
+														</SidebarMenuSubButton>
+													</SidebarMenuSubItem>
+												))}
+											</SidebarMenuSub>
+										</CollapsibleContent>
+									</SidebarMenuItem>
+								</Collapsible>
+							)}
+						</div>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/Sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import {
 	Sidebar,
 	SidebarContent,
@@ -8,13 +8,20 @@ import {
 } from "@/components/ui/sidebar";
 import { useSession } from "@/lib/auth-client";
 import { getSettings } from "../../lib/queries/getSettings";
+import { permissionQuery } from "../../lib/queries/permsCheck";
 import AdminSidebar from "./AdminBar";
 import DocBar from "./DocBar";
 import MobileBar from "./MobileBar";
+import TransportationBar from "./TransportationBar";
 
 export function AppSidebar() {
 	const { data: session } = useSession();
 	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
+	const { data: canRead = false } = useQuery(
+		permissionQuery({
+			openDock: ["read"],
+		}),
+	);
 
 	return (
 		<Sidebar
@@ -32,6 +39,11 @@ export function AppSidebar() {
 									<MobileBar />
 								)}
 
+							{!isLoading &&
+								settings.filter((n: any) => n.name === "opendock_sync")[0]
+									?.active &&
+								canRead && <TransportationBar />}
+
 							{session &&
 								(session.user.role === "admin" ||
 									session.user.role === "systemAdmin" ||