calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-12 15:30:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

add virtual keys link in header on launcher

Browse Source
This commit is contained in:
miloschwartz
2026-08-11 12:09:11 -04:00
parent 2187f23588
commit b33e776072
8 changed files with 123 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
messages/en-US.json
+2
View File
@@ -1646,6 +1646,8 @@
"sidebarAiProviders": "Providers", "sidebarAiProviders": "Providers",
"commandAiProviders": "AI Providers", "commandAiProviders": "AI Providers",
"sidebarVirtualApiKeys": "Virtual API Keys", "sidebarVirtualApiKeys": "Virtual API Keys",
"sidebarMyApiKeys": "Your API Keys",
"sidebarAccount": "Launcher",
"commandVirtualApiKeys": "Virtual API Keys", "commandVirtualApiKeys": "Virtual API Keys",
"virtualApiKeysTitle": "Manage Virtual API Keys", "virtualApiKeysTitle": "Manage Virtual API Keys",
"virtualApiKeysDescription": "Create and manage manual API keys for AI Gateway access to public inference resources", "virtualApiKeysDescription": "Create and manage manual API keys for AI Gateway access to public inference resources",
src/app/[orgId]/keys/page.tsx
+1
View File
@@ -104,6 +104,7 @@ export default async function KeysPage(props: KeysPageProps) {
isPrimaryOrg: primaryOrg isPrimaryOrg: primaryOrg
})} })}
showSidebar={false} showSidebar={false}
launcherMode
showViewAsAdmin={isAdminOrOwner} showViewAsAdmin={isAdminOrOwner}
> >
<UserVirtualApiKeys orgId={orgId} initialData={keysData} /> <UserVirtualApiKeys orgId={orgId} initialData={keysData} />
src/app/[orgId]/resource/[resourceGuid]/keys/page.tsx
+1
View File
@@ -108,6 +108,7 @@ export default async function ResourceKeysPage(props: ResourceKeysPageProps) {
isPrimaryOrg: primaryOrg isPrimaryOrg: primaryOrg
})} })}
showSidebar={false} showSidebar={false}
launcherMode
showViewAsAdmin={isAdminOrOwner} showViewAsAdmin={isAdminOrOwner}
> >
<UserVirtualApiKeys <UserVirtualApiKeys
src/app/navigation.tsx
+5
View File
@@ -53,6 +53,11 @@ export const orgLangingNavItems: SidebarNavItem[] = [
title: "sidebarAccount", title: "sidebarAccount",
href: "/{orgId}", href: "/{orgId}",
icon: <LayoutGrid className="size-4 flex-none" /> icon: <LayoutGrid className="size-4 flex-none" />
},
{
title: "sidebarMyApiKeys",
href: "/{orgId}/keys",
icon: <KeyRound className="size-4 flex-none" />
} }
]; ];
src/components/Layout.tsx
+11 -3
View File
@@ -1,10 +1,12 @@
import React from "react"; import React from "react";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { ListUserOrgsResponse } from "@server/routers/org"; import { ListUserOrgsResponse } from "@server/routers/org";
import type { import {
CommandBarNavSection, orgLangingNavItems,
SidebarNavSection type CommandBarNavSection,
type SidebarNavSection
} from "@app/app/navigation"; } from "@app/app/navigation";
import type { SidebarNavItem } from "@app/components/SidebarNav";
import { LayoutSidebar } from "@app/components/LayoutSidebar"; import { LayoutSidebar } from "@app/components/LayoutSidebar";
import { LayoutHeader } from "@app/components/LayoutHeader"; import { LayoutHeader } from "@app/components/LayoutHeader";
import { LayoutMobileMenu } from "@app/components/LayoutMobileMenu"; import { LayoutMobileMenu } from "@app/components/LayoutMobileMenu";
@@ -46,6 +48,10 @@ export async function Layout({
sidebarStateCookie === "collapsed" || sidebarStateCookie === "collapsed" ||
(sidebarStateCookie !== "expanded" && defaultSidebarCollapsed); (sidebarStateCookie !== "expanded" && defaultSidebarCollapsed);
const launcherNavItems: SidebarNavItem[] = launcherMode
? orgLangingNavItems
: [];
return ( return (
<CommandPaletteProvider <CommandPaletteProvider
orgId={orgId} orgId={orgId}
@@ -77,6 +83,7 @@ export async function Layout({
orgId={orgId} orgId={orgId}
orgs={orgs} orgs={orgs}
navItems={navItems} navItems={navItems}
launcherNavItems={launcherNavItems}
showSidebar={showSidebar} showSidebar={showSidebar}
showTopBar={showTopBar} showTopBar={showTopBar}
launcherMode={launcherMode} launcherMode={launcherMode}
@@ -92,6 +99,7 @@ export async function Layout({
orgId={orgId} orgId={orgId}
orgs={orgs} orgs={orgs}
showViewAsAdmin={showViewAsAdmin} showViewAsAdmin={showViewAsAdmin}
launcherNavItems={launcherNavItems}
/> />
)} )}
src/components/LayoutHeader.tsx
+43 -1
View File
@@ -2,6 +2,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
import ProfileIcon from "@app/components/ProfileIcon"; import ProfileIcon from "@app/components/ProfileIcon";
import ThemeSwitcher from "@app/components/ThemeSwitcher"; import ThemeSwitcher from "@app/components/ThemeSwitcher";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
@@ -13,6 +14,8 @@ import { LauncherOrgSelector } from "@app/components/resource-launcher/LauncherO
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { CommandPaletteTrigger } from "@app/components/command-palette/CommandPaletteTrigger"; import { CommandPaletteTrigger } from "@app/components/command-palette/CommandPaletteTrigger";
import type { SidebarNavItem } from "@app/components/SidebarNav";
import { cn } from "@app/lib/cn";
type LayoutHeaderProps = { type LayoutHeaderProps = {
showTopBar: boolean; showTopBar: boolean;
@@ -20,6 +23,7 @@ type LayoutHeaderProps = {
orgId?: string; orgId?: string;
orgs?: ListUserOrgsResponse["orgs"]; orgs?: ListUserOrgsResponse["orgs"];
showViewAsAdmin?: boolean; showViewAsAdmin?: boolean;
launcherNavItems?: SidebarNavItem[];
}; };
export function LayoutHeader({ export function LayoutHeader({
@@ -27,13 +31,15 @@ export function LayoutHeader({
launcherMode = false, launcherMode = false,
orgId, orgId,
orgs, orgs,
showViewAsAdmin = false showViewAsAdmin = false,
launcherNavItems = []
}: LayoutHeaderProps) { }: LayoutHeaderProps) {
const { theme } = useTheme(); const { theme } = useTheme();
const [path, setPath] = useState<string>(""); const [path, setPath] = useState<string>("");
const { env } = useEnvContext(); const { env } = useEnvContext();
const { isUnlocked } = useLicenseStatusContext(); const { isUnlocked } = useLicenseStatusContext();
const t = useTranslations(); const t = useTranslations();
const pathname = usePathname();
const logoWidth = isUnlocked() const logoWidth = isUnlocked()
? env.branding.logo?.navbar?.width || 98 ? env.branding.logo?.navbar?.width || 98
@@ -85,6 +91,42 @@ export function LayoutHeader({
orgId={orgId} orgId={orgId}
orgs={orgs} orgs={orgs}
/> />
{orgId
? launcherNavItems
.filter((item) => item.href)
.map((item) => {
const href =
item.href!.replace(
"{orgId}",
orgId
);
const isActive =
href === `/${orgId}`
? pathname === href
: pathname === href ||
pathname?.startsWith(
`${href}/`
);
return (
<Button
key={href}
variant="text"
size="sm"
className={cn(
"p-0",
isActive &&
"text-foreground font-medium underline-offset-4 underline"
)}
asChild
>
<Link href={href}>
{t(item.title)}
</Link>
</Button>
);
})
: null}
{showViewAsAdmin && orgId ? ( {showViewAsAdmin && orgId ? (
<Button <Button
variant="text" variant="text"
src/components/LayoutMobileMenu.tsx
+54 -5
View File
@@ -4,7 +4,7 @@ import type { SidebarNavSection } from "@app/app/navigation";
import { CommandPaletteTrigger } from "@app/components/command-palette/CommandPaletteTrigger"; import { CommandPaletteTrigger } from "@app/components/command-palette/CommandPaletteTrigger";
import { OrgSelector } from "@app/components/OrgSelector"; import { OrgSelector } from "@app/components/OrgSelector";
import ProfileIcon from "@app/components/ProfileIcon"; import ProfileIcon from "@app/components/ProfileIcon";
import { SidebarNav } from "@app/components/SidebarNav"; import { SidebarNav, type SidebarNavItem } from "@app/components/SidebarNav";
import ThemeSwitcher from "@app/components/ThemeSwitcher"; import ThemeSwitcher from "@app/components/ThemeSwitcher";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { import {
@@ -27,6 +27,7 @@ interface LayoutMobileMenuProps {
orgId?: string; orgId?: string;
orgs?: ListUserOrgsResponse["orgs"]; orgs?: ListUserOrgsResponse["orgs"];
navItems: SidebarNavSection[]; navItems: SidebarNavSection[];
launcherNavItems?: SidebarNavItem[];
showSidebar: boolean; showSidebar: boolean;
showTopBar: boolean; showTopBar: boolean;
launcherMode?: boolean; launcherMode?: boolean;
@@ -37,6 +38,7 @@ export function LayoutMobileMenu({
orgId, orgId,
orgs, orgs,
navItems, navItems,
launcherNavItems = [],
showSidebar, showSidebar,
showTopBar, showTopBar,
launcherMode = false, launcherMode = false,
@@ -95,8 +97,55 @@ export function LayoutMobileMenu({
/> />
</div> </div>
</div> </div>
{showViewAsAdmin && orgId ? ( <div className="px-3">
<div className="px-3"> {orgId
? launcherNavItems
.filter(
(item) =>
item.href
)
.map((item) => {
const href =
item.href!.replace(
"{orgId}",
orgId
);
return (
<div
key={href}
className="mb-1"
>
<Link
href={
href
}
className={
mobileNavLinkClassName
}
onClick={() =>
setIsMobileMenuOpen(
false
)
}
>
{item.icon ? (
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-muted-foreground mr-3">
{
item.icon
}
</span>
) : null}
<span className="flex-1">
{t(
item.title
)}
</span>
</Link>
</div>
);
})
: null}
{showViewAsAdmin && orgId ? (
<div className="mb-1"> <div className="mb-1">
<Link <Link
href={`/${orgId}/settings`} href={`/${orgId}/settings`}
@@ -119,8 +168,8 @@ export function LayoutMobileMenu({
</span> </span>
</Link> </Link>
</div> </div>
</div> ) : null}
) : null} </div>
</> </>
) : ( ) : (
<> <>
src/components/command-palette/useCommandPaletteActions.tsx
+6
View File
@@ -75,6 +75,12 @@ export function useCommandPaletteActions(
}); });
} }
} else if (orgId) { } else if (orgId) {
actions.push({
id: "my-api-keys",
label: t("sidebarMyApiKeys"),
icon: <KeyRound className="size-4" />,
href: `/${orgId}/keys`
});
actions.push({ actions.push({
id: "create-site", id: "create-site",
label: t("commandPaletteCreateSite"), label: t("commandPaletteCreateSite"),