pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-25 14:26:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

more visual adjustments

Browse Source
This commit is contained in:
miloschwartz
2026-02-20 10:43:25 -08:00
parent 01c15afa74
commit 6442eb12fb
10 changed files with 69 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
messages/en-US.json
View File

@@ -2099,7 +2099,7 @@
"manageMachineClients": "Manage Machine Clients", "manageMachineClients": "Manage Machine Clients",
"manageMachineClientsDescription": "Create and manage clients that servers and systems use to privately connect to resources", "manageMachineClientsDescription": "Create and manage clients that servers and systems use to privately connect to resources",
"machineClientsBannerTitle": "Servers & Automated Systems", "machineClientsBannerTitle": "Servers & Automated Systems",
"machineClientsBannerDescription": "Machine clients are for servers and automated systems that are not associated with a specific user. They authenticate with an ID and secret, and can run with Pangolin CLI, Olm CLI, or Olm as a container.", "machineClientsBannerDescription": "Machine clients are for servers and automated systems that are not associated with a specific user. They authenticate with an ID and secret, and can be deployed as a CLI or a container.",
"machineClientsBannerPangolinCLI": "Pangolin CLI", "machineClientsBannerPangolinCLI": "Pangolin CLI",
"machineClientsBannerOlmCLI": "Olm CLI", "machineClientsBannerOlmCLI": "Olm CLI",
"machineClientsBannerOlmContainer": "Container", "machineClientsBannerOlmContainer": "Container",

2
src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx
View File

@@ -47,7 +47,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
/> />
<ClientProvider client={client}> <ClientProvider client={client}>
<div className="space-y-6"> <div className="space-y-4">
<ClientInfoCard /> <ClientInfoCard />
<HorizontalTabs items={navItems}>{children}</HorizontalTabs> <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
</div> </div>

2
src/app/[orgId]/settings/general/layout.tsx
View File

@@ -78,7 +78,7 @@ export default async function GeneralSettingsPage({
description={t("orgSettingsDescription")} description={t("orgSettingsDescription")}
/> />
<div className="space-y-6"> <div className="space-y-4">
<OrgInfoCard /> <OrgInfoCard />
<HorizontalTabs items={navItems}> <HorizontalTabs items={navItems}>
{children} {children}

2
src/app/[orgId]/settings/sites/[niceId]/layout.tsx
View File

@@ -56,7 +56,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
/> />
<SiteProvider site={site}> <SiteProvider site={site}>
<div className="space-y-6"> <div className="space-y-4">
<SiteInfoCard /> <SiteInfoCard />
<HorizontalTabs items={navItems}>{children}</HorizontalTabs> <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
</div> </div>

2
src/components/Layout.tsx
View File

@@ -75,7 +75,7 @@ export async function Layout({
<div <div
className={cn( className={cn(
"container mx-auto max-w-12xl mb-12", "container mx-auto max-w-12xl mb-12",
showHeader && "md:pt-16" // Add top padding only on desktop to account for fixed header showHeader && "md:pt-20" // Add top padding only on desktop to account for fixed header
)} )}
> >
{children} {children}

4
src/components/LayoutHeader.tsx
View File

@@ -48,8 +48,8 @@ export function LayoutHeader({ showTopBar }: LayoutHeaderProps) {
}, [theme]); }, [theme]);
return ( return (
<div className="absolute top-0 left-0 right-0 z-50 hidden md:block"> <div className="absolute top-0 left-0 right-0 z-50 hidden md:block border-b border-border">
<div className="absolute inset-0 bg-background/83 backdrop-blur-sm" /> <div className="absolute inset-0 bg-card" />
<div className="relative z-10 px-6 py-2"> <div className="relative z-10 px-6 py-2">
<div className="container mx-auto max-w-12xl"> <div className="container mx-auto max-w-12xl">
<div className="h-16 flex items-center justify-between"> <div className="h-16 flex items-center justify-between">

4
src/components/LayoutMobileMenu.tsx
View File

@@ -73,14 +73,14 @@ export function LayoutMobileMenu({
{t("navbarDescription")} {t("navbarDescription")}
</SheetDescription> </SheetDescription>
<div className="flex-1 overflow-y-auto relative"> <div className="flex-1 overflow-y-auto relative">
<div className="px-3"> <div className="px-1">
<OrgSelector <OrgSelector
orgId={orgId} orgId={orgId}
orgs={orgs} orgs={orgs}
/> />
</div> </div>
<div className="w-full border-b border-border" /> <div className="w-full border-b border-border" />
<div className="px-3"> <div className="px-3 pt-3">
{!isAdminPage && {!isAdminPage &&
user.serverAdmin && ( user.serverAdmin && (
<div className="py-2"> <div className="py-2">

10
src/components/LayoutSidebar.tsx
View File

@@ -145,7 +145,7 @@ export function LayoutSidebar({
)} )}
/> />
<div className="flex-1 overflow-y-auto relative"> <div className="flex-1 overflow-y-auto relative">
<div className="px-2 pt-1"> <div className="px-2 pt-3">
<SidebarNav <SidebarNav
sections={navItems} sections={navItems}
isCollapsed={isSidebarCollapsed} isCollapsed={isSidebarCollapsed}
@@ -167,9 +167,7 @@ export function LayoutSidebar({
: "px-3 py-1.5" : "px-3 py-1.5"
)} )}
title={ title={
isSidebarCollapsed isSidebarCollapsed ? t("serverAdmin") : undefined
? t("serverAdmin")
: undefined
} }
> >
<span <span
@@ -182,7 +180,9 @@ export function LayoutSidebar({
</span> </span>
{!isSidebarCollapsed && ( {!isSidebarCollapsed && (
<> <>
<span className="flex-1">{t("serverAdmin")}</span> <span className="flex-1">
{t("serverAdmin")}
</span>
<ArrowRight className="h-4 w-4 shrink-0 ml-auto opacity-70" /> <ArrowRight className="h-4 w-4 shrink-0 ml-auto opacity-70" />
</> </>
)} )}

101
src/components/OrgSelector.tsx
View File

@@ -6,8 +6,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList, CommandList
CommandSeparator
} from "@app/components/ui/command"; } from "@app/components/ui/command";
import { import {
Popover, Popover,
@@ -25,6 +24,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
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 { Check, ChevronsUpDown, Plus, Building2, Users } from "lucide-react"; import { Check, ChevronsUpDown, Plus, Building2, Users } from "lucide-react";
import { Button } from "@app/components/ui/button";
import { usePathname, useRouter } from "next/navigation"; import { usePathname, useRouter } from "next/navigation";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { useUserContext } from "@app/hooks/useUserContext"; import { useUserContext } from "@app/hooks/useUserContext";
@@ -93,50 +93,32 @@ export function OrgSelector({
)} )}
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[320px] p-0" align="start"> <PopoverContent
<Command className="rounded-lg"> className="w-[320px] p-0 ml-4 flex flex-col relative overflow-visible"
align="start"
sideOffset={12}
>
{/* Peak pointing up to the trigger */}
<div
className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full w-0 h-0 border-[7px] border-transparent border-b-border"
aria-hidden
/>
<div
className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full w-0 h-0 border-[6px] border-transparent border-b-[var(--color-popover)]"
aria-hidden
/>
<Command className="rounded-lg border-0 flex-1 min-h-0">
<CommandInput <CommandInput
placeholder={t("searchPlaceholder")} placeholder={t("searchPlaceholder")}
className="border-0 focus:ring-0" className="border-0 focus:ring-0 h-9 rounded-b-none"
/> />
<CommandEmpty className="py-6 text-center"> <CommandList className="max-h-[280px]">
<div className="text-muted-foreground text-sm"> <CommandEmpty className="py-4 text-center">
{t("orgNotFound2")} <div className="text-muted-foreground text-sm">
</div> {t("orgNotFound2")}
</CommandEmpty> </div>
{(!env.flags.disableUserCreateOrg || user.serverAdmin) && ( </CommandEmpty>
<> <CommandGroup className="p-1" heading={t("orgs")}>
<CommandGroup
heading={t("create")}
className="py-2"
>
<CommandList>
<CommandItem
onSelect={() => {
setOpen(false);
router.push("/setup");
}}
className="mx-2 rounded-md"
>
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 mr-3">
<Plus className="h-4 w-4 text-primary" />
</div>
<div className="flex flex-col">
<span className="font-medium">
{t("setupNewOrg")}
</span>
<span className="text-xs text-muted-foreground">
{t("createNewOrgDescription")}
</span>
</div>
</CommandItem>
</CommandList>
</CommandGroup>
<CommandSeparator className="my-2" />
</>
)}
<CommandGroup heading={t("orgs")} className="py-2">
<CommandList>
{sortedOrgs.map((org) => ( {sortedOrgs.map((org) => (
<CommandItem <CommandItem
key={org.orgId} key={org.orgId}
@@ -148,13 +130,13 @@ export function OrgSelector({
); );
router.push(newPath); router.push(newPath);
}} }}
className="mx-2 rounded-md" className="mx-1 rounded-md py-1.5 h-auto min-h-0"
> >
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted mr-3"> <div className="flex items-center justify-center w-6 h-6 rounded-md bg-muted mr-2.5 flex-shrink-0">
<Users className="h-4 w-4 text-muted-foreground" /> <Users className="h-3.5 w-3.5 text-muted-foreground" />
</div> </div>
<div className="flex flex-col flex-1 min-w-0"> <div className="flex flex-col flex-1 min-w-0 gap-0.5">
<span className="font-medium truncate"> <span className="font-medium truncate text-sm">
{org.name} {org.name}
</span> </span>
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
@@ -173,7 +155,7 @@ export function OrgSelector({
</div> </div>
<Check <Check
className={cn( className={cn(
"h-4 w-4 text-primary", "h-4 w-4 text-primary flex-shrink-0",
orgId === org.orgId orgId === org.orgId
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0"
@@ -181,9 +163,26 @@ export function OrgSelector({
/> />
</CommandItem> </CommandItem>
))} ))}
</CommandList> </CommandGroup>
</CommandGroup> </CommandList>
</Command> </Command>
{(!env.flags.disableUserCreateOrg ||
user.serverAdmin) && (
<div className="p-2 border-t border-border">
<Button
variant="ghost"
size="sm"
className="w-full justify-start h-8 font-normal text-muted-foreground hover:text-foreground"
onClick={() => {
setOpen(false);
router.push("/setup");
}}
>
<Plus className="h-3.5 w-3.5 mr-2" />
{t("setupNewOrg")}
</Button>
</div>
)}
</PopoverContent> </PopoverContent>
</Popover> </Popover>
); );

10
src/components/SidebarNav.tsx
View File

@@ -122,7 +122,7 @@ function CollapsibleNavItem({
"px-3 py-1.5", "px-3 py-1.5",
isActive isActive
? "bg-secondary font-medium" ? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground", : "text-foreground/80 hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled && "cursor-not-allowed opacity-60" isDisabled && "cursor-not-allowed opacity-60"
)} )}
disabled={isDisabled} disabled={isDisabled}
@@ -290,7 +290,7 @@ export function SidebarNav({
isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5", isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5",
isActive isActive
? "bg-secondary font-medium" ? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground", : "text-foreground/80 hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled && "cursor-not-allowed opacity-60" isDisabled && "cursor-not-allowed opacity-60"
)} )}
onClick={(e) => { onClick={(e) => {
@@ -361,7 +361,7 @@ export function SidebarNav({
className={cn( className={cn(
"flex items-center rounded-md transition-colors", "flex items-center rounded-md transition-colors",
"px-3 py-1.5", "px-3 py-1.5",
"text-muted-foreground", "text-foreground/80",
isDisabled && "cursor-not-allowed opacity-60" isDisabled && "cursor-not-allowed opacity-60"
)} )}
> >
@@ -416,7 +416,7 @@ export function SidebarNav({
"flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full", "flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full",
isActive || isChildActive isActive || isChildActive
? "bg-secondary font-medium" ? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground", : "text-foreground/80 hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled && isDisabled &&
"cursor-not-allowed opacity-60" "cursor-not-allowed opacity-60"
)} )}
@@ -471,7 +471,7 @@ export function SidebarNav({
"flex items-center rounded-md transition-colors px-3 py-1.5 text-sm", "flex items-center rounded-md transition-colors px-3 py-1.5 text-sm",
childIsActive childIsActive
? "bg-secondary font-medium" ? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/50 hover:text-foreground", : "text-foreground/80 hover:bg-secondary/50 hover:text-foreground",
childIsDisabled && childIsDisabled &&
"cursor-not-allowed opacity-60" "cursor-not-allowed opacity-60"
)} )}