mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-02 00:55:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add server admin button

Browse source
This commit is contained in:
miloschwartz 2025-04-16 21:37:15 -04:00
parent ab933d48de
commit 334fc55dd0
No known key found for this signature in database
2 changed files with 62 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/Layout.tsx
View file

@ -10,7 +10,7 @@ import { ListOrgsResponse } from "@server/routers/org";
import SupporterStatus from "@app/components/SupporterStatus"; import SupporterStatus from "@app/components/SupporterStatus";
import { Separator } from "@app/components/ui/separator"; import { Separator } from "@app/components/ui/separator";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { ExternalLink, Menu, X } from "lucide-react"; import { ExternalLink, Menu, X, Server } from "lucide-react";
import { import {
Sheet, Sheet,
SheetContent, SheetContent,
@ -21,6 +21,7 @@ import {
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { Breadcrumbs } from "@app/components/Breadcrumbs"; import { Breadcrumbs } from "@app/components/Breadcrumbs";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
interface LayoutProps { interface LayoutProps {
children: React.ReactNode; children: React.ReactNode;
@ -54,6 +55,8 @@ export function Layout({
}: LayoutProps) { }: LayoutProps) {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const { env } = useEnvContext(); const { env } = useEnvContext();
const pathname = usePathname();
const isAdminPage = pathname?.startsWith("/admin");
return ( return (
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
@ -85,7 +88,26 @@ export function Layout({
</div> </div>
)} )}
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-4">
<SidebarNav items={navItems} onItemClick={() => setIsMobileMenuOpen(false)} /> <SidebarNav
items={navItems}
onItemClick={() =>
setIsMobileMenuOpen(false)
}
/>
{!isAdminPage && (
<div className="mt-8 pt-4 border-t">
<Link
href="/admin"
className="flex items-center justify-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/20 w-full"
onClick={() =>
setIsMobileMenuOpen(false)
}
>
<Server className="h-4 w-4" />
Server Admin
</Link>
</div>
)}
</div> </div>
<div className="p-4 space-y-4 border-t shrink-0"> <div className="p-4 space-y-4 border-t shrink-0">
<SupporterStatus /> <SupporterStatus />
@ -109,8 +131,21 @@ export function Layout({
<Header orgId={orgId} orgs={orgs} /> <Header orgId={orgId} orgs={orgs} />
</div> </div>
)} )}
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-4 flex flex-col">
<SidebarNav items={navItems} /> <div className="flex-1">
<SidebarNav items={navItems} />
</div>
{!isAdminPage && (
<div className="mt-8 pt-4 border-t">
<Link
href="/admin"
className="flex items-center justify-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/20 w-full"
>
<Server className="h-4 w-4" />
Server Admin
</Link>
</div>
)}
</div> </div>
<div className="p-4 space-y-4 border-t shrink-0"> <div className="p-4 space-y-4 border-t shrink-0">
<SupporterStatus /> <SupporterStatus />
@ -124,7 +159,7 @@ export function Layout({
className="flex items-center justify-center gap-1" className="flex items-center justify-center gap-1"
> >
Open Source Open Source
<ExternalLink size={12}/> <ExternalLink size={12} />
</Link> </Link>
</div> </div>
{env?.app?.version && ( {env?.app?.version && (

31
src/components/SidebarNav.tsx
View file

@ -5,6 +5,7 @@ import Link from "next/link";
import { useParams, usePathname } from "next/navigation"; import { useParams, usePathname } from "next/navigation";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { ChevronDown, ChevronRight } from "lucide-react"; import { ChevronDown, ChevronRight } from "lucide-react";
import { useUserContext } from "@app/hooks/useUserContext";
export interface SidebarNavItem { export interface SidebarNavItem {
href: string; href: string;
@ -35,6 +36,8 @@ export function SidebarNav({
const userId = params.userId as string; const userId = params.userId as string;
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set()); const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
const { user } = useUserContext();
function hydrateHref(val: string): string { function hydrateHref(val: string): string {
return val return val
.replace("{orgId}", orgId) .replace("{orgId}", orgId)
@ -47,19 +50,22 @@ export function SidebarNav({
useEffect(() => { useEffect(() => {
const autoExpanded = new Set<string>(); const autoExpanded = new Set<string>();
function findAutoExpandedAndActivePath(items: SidebarNavItem[], parentHrefs: string[] = []) { function findAutoExpandedAndActivePath(
items.forEach(item => { items: SidebarNavItem[],
parentHrefs: string[] = []
) {
items.forEach((item) => {
const hydratedHref = hydrateHref(item.href); const hydratedHref = hydrateHref(item.href);
// Add current item's href to the path // Add current item's href to the path
const currentPath = [...parentHrefs, hydratedHref]; const currentPath = [...parentHrefs, hydratedHref];
// Auto expand if specified or if this item or any child is active // Auto expand if specified or if this item or any child is active
if (item.autoExpand || pathname.startsWith(hydratedHref)) { if (item.autoExpand || pathname.startsWith(hydratedHref)) {
// Expand all parent sections when a child is active // Expand all parent sections when a child is active
currentPath.forEach(href => autoExpanded.add(href)); currentPath.forEach((href) => autoExpanded.add(href));
} }
// Recursively check children // Recursively check children
if (item.children) { if (item.children) {
findAutoExpandedAndActivePath(item.children, currentPath); findAutoExpandedAndActivePath(item.children, currentPath);
@ -72,7 +78,7 @@ export function SidebarNav({
}, [items, pathname]); }, [items, pathname]);
function toggleItem(href: string) { function toggleItem(href: string) {
setExpandedItems(prev => { setExpandedItems((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
if (newSet.has(href)) { if (newSet.has(href)) {
newSet.delete(href); newSet.delete(href);
@ -93,7 +99,10 @@ export function SidebarNav({
return ( return (
<div key={hydratedHref}> <div key={hydratedHref}>
<div className="flex items-center group" style={{ marginLeft: `${indent}px` }}> <div
className="flex items-center group"
style={{ marginLeft: `${indent}px` }}
>
<div <div
className={cn( className={cn(
"flex items-center w-full transition-colors rounded-md", "flex items-center w-full transition-colors rounded-md",
@ -120,7 +129,11 @@ export function SidebarNav({
tabIndex={disabled ? -1 : undefined} tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled} aria-disabled={disabled}
> >
{item.icon && <span className="mr-3 opacity-70">{item.icon}</span>} {item.icon && (
<span className="mr-3 opacity-70">
{item.icon}
</span>
)}
{item.title} {item.title}
</Link> </Link>
{hasChildren && ( {hasChildren && (