mirror of
https://github.com/fosrl/pangolin.git
synced 2026-01-28 22:00:51 +00:00
visual enhancements to sidebar
This commit is contained in:
miloschwartz
@@ -73,13 +73,14 @@ export function LayoutMobileMenu({
|
||||
{t("navbarDescription")}
|
||||
</SheetDescription>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-4">
|
||||
<div className="px-3">
|
||||
<OrgSelector
|
||||
orgId={orgId}
|
||||
orgs={orgs}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-4">
|
||||
<div className="w-full border-b border-border" />
|
||||
<div className="px-3">
|
||||
{!isAdminPage &&
|
||||
user.serverAdmin && (
|
||||
<div className="pb-3">
|
||||
@@ -113,7 +114,7 @@ export function LayoutMobileMenu({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 space-y-4 border-t shrink-0">
|
||||
<div className="px-3 pt-3 pb-3 space-y-4 border-t shrink-0">
|
||||
<SupporterStatus />
|
||||
{env?.app?.version && (
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
|
||||
@@ -109,14 +109,18 @@ export function LayoutSidebar({
|
||||
isSidebarCollapsed ? "w-16" : "w-64"
|
||||
)}
|
||||
>
|
||||
<div className="p-4 shrink-0">
|
||||
<div className="shrink-0">
|
||||
<OrgSelector
|
||||
orgId={orgId}
|
||||
orgs={orgs}
|
||||
isCollapsed={isSidebarCollapsed}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className={cn(
|
||||
"w-full border-b border-border",
|
||||
isSidebarCollapsed && "mb-2"
|
||||
)} />
|
||||
<div className="flex-1 overflow-y-auto relative">
|
||||
<div className="px-2 pt-1">
|
||||
{!isAdminPage && user.serverAdmin && (
|
||||
<div className="pb-4">
|
||||
@@ -153,8 +157,12 @@ export function LayoutSidebar({
|
||||
isCollapsed={isSidebarCollapsed}
|
||||
/>
|
||||
</div>
|
||||
{/* Fade gradient at bottom to indicate scrollable content */}
|
||||
<div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-card to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="w-full border-t border-border" />
|
||||
|
||||
<div className="p-4 pt-1 flex flex-col shrink-0">
|
||||
{canShowProductUpdates && (
|
||||
<div className="mb-3">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
@@ -52,13 +51,14 @@ export function OrgSelector({
|
||||
const orgSelectorContent = (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size={isCollapsed ? "icon" : "lg"}
|
||||
<div
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className={cn(
|
||||
isCollapsed ? "w-8 h-8" : "w-full h-12 px-3 py-4"
|
||||
"cursor-pointer transition-colors",
|
||||
isCollapsed
|
||||
? "w-full h-16 flex items-center justify-center hover:bg-muted"
|
||||
: "w-full px-4 py-4 hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
@@ -66,9 +66,8 @@ export function OrgSelector({
|
||||
) : (
|
||||
<div className="flex items-center justify-between w-full min-w-0">
|
||||
<div className="flex items-center min-w-0 flex-1">
|
||||
<Building2 className="h-4 w-4 mr-3 shrink-0" />
|
||||
<div className="flex flex-col items-start min-w-0 flex-1">
|
||||
<span className="font-bold text-sm">
|
||||
<div className="flex flex-col items-start min-w-0 flex-1 gap-1">
|
||||
<span className="font-bold">
|
||||
{t("org")}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground truncate w-full text-left">
|
||||
@@ -79,7 +78,7 @@ export function OrgSelector({
|
||||
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[320px] p-0" align="start">
|
||||
<Command className="rounded-lg">
|
||||
|
||||
@@ -88,6 +88,10 @@ export default function ProductUpdates({
|
||||
(update) => !productUpdatesRead.includes(update.id)
|
||||
);
|
||||
|
||||
if (filteredUpdates.length === 0 && !showNewVersionPopup) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
|
||||
@@ -115,7 +115,7 @@ function CollapsibleNavItem({
|
||||
<button
|
||||
className={cn(
|
||||
"flex items-center w-full rounded-md transition-colors",
|
||||
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
|
||||
level === 0 ? "px-3 py-1.5" : "px-3 py-1",
|
||||
isActive
|
||||
? "bg-secondary font-medium"
|
||||
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
|
||||
@@ -124,17 +124,18 @@ function CollapsibleNavItem({
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{item.icon && (
|
||||
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">{item.icon}</span>
|
||||
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<span className="text-left truncate">{t(item.title)}</span>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span className="text-left truncate">
|
||||
{t(item.title)}
|
||||
</span>
|
||||
{item.isBeta && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-muted-foreground flex-shrink-0"
|
||||
>
|
||||
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
|
||||
{t("beta")}
|
||||
</Badge>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
|
||||
@@ -256,7 +257,11 @@ export function SidebarNav({
|
||||
href={isDisabled ? "#" : hydratedHref}
|
||||
className={cn(
|
||||
"flex items-center rounded-md transition-colors",
|
||||
isCollapsed ? "px-2 py-2 justify-center" : level === 0 ? "px-3 py-2" : "px-3 py-1.5",
|
||||
isCollapsed
|
||||
? "px-2 py-2 justify-center"
|
||||
: level === 0
|
||||
? "px-3 py-1.5"
|
||||
: "px-3 py-1",
|
||||
isActive
|
||||
? "bg-secondary font-medium"
|
||||
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
|
||||
@@ -284,21 +289,21 @@ export function SidebarNav({
|
||||
)}
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span className="truncate">{t(item.title)}</span>
|
||||
{item.isBeta && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-muted-foreground flex-shrink-0"
|
||||
>
|
||||
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
|
||||
{t("beta")}
|
||||
</Badge>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{build === "enterprise" &&
|
||||
item.showEE &&
|
||||
!isUnlocked() && (
|
||||
<Badge variant="outlinePrimary" className="flex-shrink-0">
|
||||
<Badge
|
||||
variant="outlinePrimary"
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{t("licenseBadge")}
|
||||
</Badge>
|
||||
)}
|
||||
@@ -309,27 +314,31 @@ export function SidebarNav({
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center rounded-md transition-colors",
|
||||
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
|
||||
level === 0 ? "px-3 py-1.5" : "px-3 py-1",
|
||||
"text-muted-foreground",
|
||||
isDisabled && "cursor-not-allowed opacity-60"
|
||||
)}
|
||||
>
|
||||
{item.icon && (
|
||||
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">{item.icon}</span>
|
||||
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span className="truncate">{t(item.title)}</span>
|
||||
{item.isBeta && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-muted-foreground flex-shrink-0"
|
||||
>
|
||||
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
|
||||
{t("beta")}
|
||||
</Badge>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{build === "enterprise" && item.showEE && !isUnlocked() && (
|
||||
<Badge variant="outlinePrimary" className="flex-shrink-0 ml-2">{t("licenseBadge")}</Badge>
|
||||
<Badge
|
||||
variant="outlinePrimary"
|
||||
className="flex-shrink-0 ml-2"
|
||||
>
|
||||
{t("licenseBadge")}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -422,23 +431,23 @@ export function SidebarNav({
|
||||
{childItem.icon}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span className="truncate">
|
||||
{t(childItem.title)}
|
||||
</span>
|
||||
{childItem.isBeta && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-muted-foreground flex-shrink-0"
|
||||
>
|
||||
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
|
||||
{t("beta")}
|
||||
</Badge>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{build === "enterprise" &&
|
||||
childItem.showEE &&
|
||||
!isUnlocked() && (
|
||||
<Badge variant="outlinePrimary" className="flex-shrink-0 ml-2">
|
||||
<Badge
|
||||
variant="outlinePrimary"
|
||||
className="flex-shrink-0 ml-2"
|
||||
>
|
||||
{t(
|
||||
"licenseBadge"
|
||||
)}
|
||||
@@ -481,7 +490,10 @@ export function SidebarNav({
|
||||
{...props}
|
||||
>
|
||||
{sections.map((section, sectionIndex) => (
|
||||
<div key={section.heading} className={cn(sectionIndex > 0 && "mt-4")}>
|
||||
<div
|
||||
key={section.heading}
|
||||
className={cn(sectionIndex > 0 && "mt-4")}
|
||||
>
|
||||
{!isCollapsed && (
|
||||
<div className="px-3 py-2 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider">
|
||||
{t(`${section.heading}`)}
|
||||
|
||||
@@ -56,11 +56,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||
if (props.providerError?.error) {
|
||||
const providerMessage =
|
||||
props.providerError.description ||
|
||||
t("idpErrorOidcProviderRejected", {
|
||||
error: props.providerError.error,
|
||||
defaultValue:
|
||||
"The identity provider returned an error: {error}."
|
||||
});
|
||||
"The identity provider returned an error: {error}.";
|
||||
const suffix = props.providerError.uri
|
||||
? ` (${props.providerError.uri})`
|
||||
: "";
|
||||
@@ -76,10 +72,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||
if (!isCancelled) {
|
||||
setIsProviderError(false);
|
||||
setError(
|
||||
t("idpErrorOidcMissingCode", {
|
||||
defaultValue:
|
||||
"The identity provider did not return an authorization code."
|
||||
})
|
||||
"The identity provider did not return an authorization code."
|
||||
);
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -90,10 +83,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||
if (!isCancelled) {
|
||||
setIsProviderError(false);
|
||||
setError(
|
||||
t("idpErrorOidcMissingState", {
|
||||
defaultValue:
|
||||
"The login request is missing state information. Please restart the login process."
|
||||
})
|
||||
"The login request is missing state information. Please restart the login process."
|
||||
);
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -159,12 +149,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||
console.error(e);
|
||||
if (!isCancelled) {
|
||||
setIsProviderError(false);
|
||||
setError(
|
||||
t("idpErrorOidcTokenValidating", {
|
||||
defaultValue:
|
||||
"An unexpected error occurred. Please try again."
|
||||
})
|
||||
);
|
||||
setError("An unexpected error occurred. Please try again.");
|
||||
}
|
||||
} finally {
|
||||
if (!isCancelled) {
|
||||
@@ -181,7 +166,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
|
||||
@@ -11,7 +11,7 @@ const alertVariants = cva(
|
||||
default: "bg-card border text-foreground",
|
||||
neutral: "bg-card bg-muted border text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 border bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
"border-destructive/50 border bg-destructive/8 text-destructive dark:border-destructive/50 [&>svg]:text-destructive",
|
||||
success:
|
||||
"border-green-500/50 border bg-green-500/10 text-green-500 dark:border-success [&>svg]:text-green-500",
|
||||
info: "border-blue-500/50 border bg-blue-500/10 text-blue-800 dark:text-blue-400 dark:border-blue-400 [&>svg]:text-blue-500",
|
||||
|
||||
Reference in New Issue
Block a user