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

more tweaks to layout

Browse source
This commit is contained in:
miloschwartz 2025-04-13 14:21:18 -04:00
parent b731a50cc9
commit 8b0c30f19f
No known key found for this signature in database
22 changed files with 172 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Breadcrumbs.tsx
View file

@ -26,7 +26,7 @@ export function Breadcrumbs() {
} else if (segment === "resources") {
label = "Resources";
} else if (segment === "access") {
label = "Users & Roles";
label = "Access Control";
} else if (segment === "general") {
label = "General";
} else if (segment === "share-links") {
@ -48,14 +48,14 @@ export function Breadcrumbs() {
return (
<div className="border-b px-4 py-2 overflow-x-auto scrollbar-hide bg-card">
<nav className="flex items-center space-x-1 text-sm text-muted-foreground">
<nav className="flex items-center space-x-1 text-sm text-muted-foreground whitespace-nowrap">
{breadcrumbs.map((crumb, index) => (
<div key={crumb.href} className="flex items-center">
<div key={crumb.href} className="flex items-center whitespace-nowrap">
{index !== 0 && <ChevronRight className="h-4 w-4" />}
<Link
href={crumb.href}
className={cn(
"ml-1 hover:text-foreground",
"ml-1 hover:text-foreground whitespace-nowrap",
index === breadcrumbs.length - 1 &&
"text-foreground font-medium"
)}

2
src/components/Header.tsx
View file

@ -21,7 +21,7 @@ export function Header({ orgId, orgs }: HeaderProps) {
width={34}
height={34}
/>
<span className="font-bold text-2xl">Pangolin</span>
<span className="font-[Space_Grotesk] font-bold text-2xl text-neutral-500">Pangolin</span>
</Link>
</div>
);

3
src/components/HorizontalTabs.tsx
View file

@ -28,7 +28,8 @@ export function HorizontalTabs({
return href
.replace("{orgId}", params.orgId as string)
.replace("{resourceId}", params.resourceId as string)
.replace("{niceId}", params.niceId as string);
.replace("{niceId}", params.niceId as string)
.replace("{userId}", params.userId as string);
}
return (

29
src/components/Layout.tsx
View file

@ -10,7 +10,7 @@ import { ListOrgsResponse } from "@server/routers/org";
import SupporterStatus from "@app/components/SupporterStatus";
import { Separator } from "@app/components/ui/separator";
import { Button } from "@app/components/ui/button";
import { Menu, X } from "lucide-react";
import { ExternalLink, Menu, X } from "lucide-react";
import {
Sheet,
SheetContent,
@ -20,6 +20,7 @@ import {
} from "@app/components/ui/sheet";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { Breadcrumbs } from "@app/components/Breadcrumbs";
import Link from "next/link";
interface LayoutProps {
children: React.ReactNode;
@ -68,7 +69,10 @@ export function Layout({
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-64 p-0 flex flex-col h-full">
<SheetContent
side="left"
className="w-64 p-0 flex flex-col h-full"
>
<SheetTitle className="sr-only">
Navigation Menu
</SheetTitle>
@ -81,7 +85,7 @@ export function Layout({
</div>
)}
<div className="flex-1 overflow-y-auto p-4">
<SidebarNav items={navItems} />
<SidebarNav items={navItems} onItemClick={() => setIsMobileMenuOpen(false)} />
</div>
<div className="p-4 space-y-4 border-t shrink-0">
<SupporterStatus />
@ -113,7 +117,15 @@ export function Layout({
<OrgSelector orgId={orgId} orgs={orgs} />
<div className="space-y-2">
<div className="text-xs text-muted-foreground text-center">
Open Source
<Link
href="https://github.com/fosrl/pangolin"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-1"
>
Open Source
<ExternalLink size={12}/>
</Link>
</div>
{env?.app?.version && (
<div className="text-xs text-muted-foreground text-center">
@ -126,7 +138,12 @@ export function Layout({
)}
{/* Main content */}
<div className={cn("flex-1 flex flex-col h-full min-w-0", !showSidebar && "w-full")}>
<div
className={cn(
"flex-1 flex flex-col h-full min-w-0",
!showSidebar && "w-full"
)}
>
{showTopBar && (
<div className="h-16 border-b shrink-0 bg-card">
<div className="flex h-full items-center justify-end px-4">
@ -135,7 +152,7 @@ export function Layout({
</div>
)}
{showBreadcrumbs && <Breadcrumbs />}
<main className="flex-1 overflow-y-auto p-6 w-full">
<main className="flex-1 overflow-y-auto p-3 md:p-6 w-full">
<div className="container mx-auto max-w-12xl">
{children}
</div>

12
src/components/SidebarNav.tsx
View file

@ -17,12 +17,14 @@ export interface SidebarNavItem {
export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
items: SidebarNavItem[];
disabled?: boolean;
onItemClick?: () => void;
}
export function SidebarNav({
className,
items,
disabled = false,
onItemClick,
...props
}: SidebarNavProps) {
const pathname = usePathname();
@ -87,13 +89,19 @@ export function SidebarNav({
<Link
href={hydratedHref}
className={cn(
"flex items-center py-2 px-3 w-full transition-colors",
"flex items-center py-1 w-full transition-colors",
isActive
? "text-primary font-medium"
: "text-muted-foreground hover:text-foreground",
disabled && "cursor-not-allowed opacity-60"
)}
onClick={disabled ? (e) => e.preventDefault() : undefined}
onClick={(e) => {
if (disabled) {
e.preventDefault();
} else if (onItemClick) {
onItemClick();
}
}}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
>

2
src/components/TopBar.tsx
View file

@ -21,7 +21,7 @@ export function TopBar({ orgId, orgs }: TopBarProps) {
Documentation
</Link>
<Link
href="https://fossorial.io/support"
href="mailto:support@fossorial.io"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-foreground transition-colors"

2
src/components/tags/autocomplete.tsx
View file

@ -221,7 +221,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
modal={usePortal}
>
<div
className="relative h-full flex items-center rounded-md border bg-transparent pr-3"
className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-3"
ref={triggerContainerRef}
>
{childrenWithProps}

2
src/components/ui/button.tsx
View file

@ -6,7 +6,7 @@ import { cn } from "@app/lib/cn";
import { Loader2 } from "lucide-react";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-full whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"cursor-pointer inline-flex items-center justify-center rounded-full whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {

27
src/components/ui/data-table.tsx
View file

@ -24,7 +24,12 @@ import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@app/components/ui/card";
import {
Card,
CardContent,
CardHeader,
CardTitle
} from "@app/components/ui/card";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@ -47,6 +52,7 @@ export function DataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
@ -57,6 +63,7 @@ export function DataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
@ -65,7 +72,8 @@ export function DataTable<TData, TValue>({
},
state: {
sorting,
columnFilters
columnFilters,
globalFilter
}
});
@ -73,12 +81,12 @@ export function DataTable<TData, TValue>({
<div className="container mx-auto max-w-12xl">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<div className="flex items-center max-w-sm w-full relative">
<div className="flex items-center max-w-sm w-full relative mr-2">
<Input
placeholder={searchPlaceholder}
value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn(searchColumn)?.setFilterValue(event.target.value)
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
@ -101,7 +109,8 @@ export function DataTable<TData, TValue>({
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
@ -114,7 +123,9 @@ export function DataTable<TData, TValue>({
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>

101
src/components/ui/form.tsx
View file

@ -1,32 +1,32 @@
"use client"
"use client";
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import {
Controller,
ControllerProps,
FieldPath,
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form"
useFormContext
} from "react-hook-form";
import { cn } from "@app/lib/cn"
import { Label } from "@/components/ui/label"
import { cn } from "@app/lib/cn";
import { Label } from "@/components/ui/label";
const Form = FormProvider
const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
name: TName
}
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
@ -38,21 +38,21 @@ const FormField = <
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
);
};
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState, formState } = useFormContext()
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState, formState } = useFormContext();
const fieldState = getFieldState(fieldContext.name, formState)
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
throw new Error("useFormField should be used within <FormField>");
}
const { id } = itemContext
const { id } = itemContext;
return {
id,
@ -60,37 +60,37 @@ const useFormField = () => {
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
...fieldState
};
};
type FormItemContextValue = {
id: string
}
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
);
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId()
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
)
})
FormItem.displayName = "FormItem"
);
});
FormItem.displayName = "FormItem";
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()
const { error, formItemId } = useFormField();
return (
<Label
@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
htmlFor={formItemId}
{...props}
/>
)
})
FormLabel.displayName = "FormLabel"
);
});
FormLabel.displayName = "FormLabel";
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot
@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
aria-invalid={!!error}
{...props}
/>
)
})
FormControl.displayName = "FormControl"
);
});
FormControl.displayName = "FormControl";
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()
const { formDescriptionId } = useFormField();
return (
<p
@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
)
})
FormDescription.displayName = "FormDescription"
);
});
FormDescription.displayName = "FormDescription";
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
if (!body) {
return null
return null;
}
return (
@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
>
{body}
</p>
)
})
FormMessage.displayName = "FormMessage"
);
});
FormMessage.displayName = "FormMessage";
export {
useFormField,
@ -174,5 +175,5 @@ export {
FormControl,
FormDescription,
FormMessage,
FormField,
}
FormField
};

2
src/components/ui/input-otp.tsx
View file

@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
<div
ref={ref}
className={cn(
"relative flex h-10 w-10 items-center justify-center border-y-2 border-r-2 border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l-2 last:rounded-r-md",
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "z-10 ring-2 ring-ring ring-offset-background",
className
)}

2
src/components/ui/switch.tsx
View file

@ -19,7 +19,7 @@ const Switch = React.forwardRef<
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
)}
/>
</SwitchPrimitives.Root>