) {
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
return (
);
}
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
const { formDescriptionId } = useFormField();
return (
);
}
-function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
const { error, formMessageId } = useFormField();
- const body = error ? String(error?.message ?? '') : props.children;
+ const body = error ? String(error?.message ?? "") : props.children;
if (!body) {
return null;
@@ -130,7 +146,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
{body}
diff --git a/apps/desktop/src/components/ui/hover-card.tsx b/apps/desktop/src/components/ui/hover-card.tsx
index a93f424..db70095 100644
--- a/apps/desktop/src/components/ui/hover-card.tsx
+++ b/apps/desktop/src/components/ui/hover-card.tsx
@@ -1,19 +1,25 @@
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-function HoverCard({ ...props }: React.ComponentProps) {
+function HoverCard({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function HoverCardTrigger({ ...props }: React.ComponentProps) {
- return ;
+function HoverCardTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
}
function HoverCardContent({
className,
- align = 'center',
+ align = "center",
sideOffset = 4,
...props
}: React.ComponentProps) {
@@ -24,8 +30,8 @@ function HoverCardContent({
align={align}
sideOffset={sideOffset}
className={cn(
- 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
- className
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+ className,
)}
{...props}
/>
diff --git a/apps/desktop/src/components/ui/input-otp.tsx b/apps/desktop/src/components/ui/input-otp.tsx
index da708e8..40f1aa0 100644
--- a/apps/desktop/src/components/ui/input-otp.tsx
+++ b/apps/desktop/src/components/ui/input-otp.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
-import * as React from 'react';
-import { OTPInput, OTPInputContext } from 'input-otp';
-import { MinusIcon } from 'lucide-react';
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function InputOTP({
className,
@@ -16,16 +16,23 @@ function InputOTP({
return (
);
}
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
-
+
);
}
@@ -33,7 +40,7 @@ function InputOTPSlot({
index,
className,
...props
-}: React.ComponentProps<'div'> & {
+}: React.ComponentProps<"div"> & {
index: number;
}) {
const inputOTPContext = React.useContext(OTPInputContext);
@@ -44,8 +51,8 @@ function InputOTPSlot({
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
- 'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
- className
+ "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+ className,
)}
{...props}
>
@@ -59,7 +66,7 @@ function InputOTPSlot({
);
}
-function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
return (
diff --git a/apps/desktop/src/components/ui/input.tsx b/apps/desktop/src/components/ui/input.tsx
index b34e014..b1a060f 100644
--- a/apps/desktop/src/components/ui/input.tsx
+++ b/apps/desktop/src/components/ui/input.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
+import * as React from "react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
diff --git a/apps/desktop/src/components/ui/label.tsx b/apps/desktop/src/components/ui/label.tsx
index cd30a95..79d77b4 100644
--- a/apps/desktop/src/components/ui/label.tsx
+++ b/apps/desktop/src/components/ui/label.tsx
@@ -1,17 +1,20 @@
-'use client';
+"use client";
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-function Label({ className, ...props }: React.ComponentProps
) {
+function Label({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
diff --git a/apps/desktop/src/components/ui/menubar.tsx b/apps/desktop/src/components/ui/menubar.tsx
index ccaf297..4c257cc 100644
--- a/apps/desktop/src/components/ui/menubar.tsx
+++ b/apps/desktop/src/components/ui/menubar.tsx
@@ -1,36 +1,49 @@
-import * as React from 'react';
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-function Menubar({ className, ...props }: React.ComponentProps) {
+function Menubar({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
);
}
-function MenubarMenu({ ...props }: React.ComponentProps) {
+function MenubarMenu({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function MenubarGroup({ ...props }: React.ComponentProps) {
+function MenubarGroup({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function MenubarPortal({ ...props }: React.ComponentProps) {
+function MenubarPortal({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function MenubarRadioGroup({ ...props }: React.ComponentProps) {
- return ;
+function MenubarRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
}
function MenubarTrigger({
@@ -41,8 +54,8 @@ function MenubarTrigger({
@@ -51,7 +64,7 @@ function MenubarTrigger({
function MenubarContent({
className,
- align = 'start',
+ align = "start",
alignOffset = -4,
sideOffset = 8,
...props
@@ -64,8 +77,8 @@ function MenubarContent({
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn(
- 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
- className
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+ className,
)}
{...props}
/>
@@ -76,11 +89,11 @@ function MenubarContent({
function MenubarItem({
className,
inset,
- variant = 'default',
+ variant = "default",
...props
}: React.ComponentProps & {
inset?: boolean;
- variant?: 'default' | 'destructive';
+ variant?: "default" | "destructive";
}) {
return (
@@ -107,7 +120,7 @@ function MenubarCheckboxItem({
data-slot="menubar-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
checked={checked}
{...props}
@@ -132,7 +145,7 @@ function MenubarRadioItem({
data-slot="menubar-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
>
@@ -157,7 +170,10 @@ function MenubarLabel({
);
@@ -170,23 +186,31 @@ function MenubarSeparator({
return (
);
}
-function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+function MenubarShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
return (
);
}
-function MenubarSub({ ...props }: React.ComponentProps) {
+function MenubarSub({
+ ...props
+}: React.ComponentProps) {
return ;
}
@@ -203,8 +227,8 @@ function MenubarSubTrigger({
data-slot="menubar-sub-trigger"
data-inset={inset}
className={cn(
- 'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
- className
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+ className,
)}
{...props}
>
@@ -222,8 +246,8 @@ function MenubarSubContent({
diff --git a/apps/desktop/src/components/ui/navigation-menu.tsx b/apps/desktop/src/components/ui/navigation-menu.tsx
index 3d4eec8..0bcc784 100644
--- a/apps/desktop/src/components/ui/navigation-menu.tsx
+++ b/apps/desktop/src/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from 'class-variance-authority';
-import { ChevronDownIcon } from 'lucide-react';
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function NavigationMenu({
className,
@@ -18,8 +18,8 @@ function NavigationMenu({
data-slot="navigation-menu"
data-viewport={viewport}
className={cn(
- 'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
- className
+ "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+ className,
)}
{...props}
>
@@ -36,7 +36,10 @@ function NavigationMenuList({
return (
);
@@ -49,14 +52,14 @@ function NavigationMenuItem({
return (
);
}
const navigationMenuTriggerStyle = cva(
- 'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1'
+ "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
);
function NavigationMenuTrigger({
@@ -67,10 +70,10 @@ function NavigationMenuTrigger({
return (
- {children}{' '}
+ {children}{" "}
@@ -101,12 +104,16 @@ function NavigationMenuViewport({
...props
}: React.ComponentProps) {
return (
-
+
@@ -123,7 +130,7 @@ function NavigationMenuLink({
data-slot="navigation-menu-link"
className={cn(
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
/>
@@ -138,8 +145,8 @@ function NavigationMenuIndicator({
diff --git a/apps/desktop/src/components/ui/pagination.tsx b/apps/desktop/src/components/ui/pagination.tsx
index 7f03b7a..1621cf3 100644
--- a/apps/desktop/src/components/ui/pagination.tsx
+++ b/apps/desktop/src/components/ui/pagination.tsx
@@ -1,64 +1,79 @@
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+import * as React from "react";
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ MoreHorizontalIcon,
+} from "lucide-react";
-import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from '@/components/ui/button';
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
return (
);
}
-function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
+function PaginationContent({
+ className,
+ ...props
+}: React.ComponentProps<"ul">) {
return (
);
}
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
return ;
}
type PaginationLinkProps = {
isActive?: boolean;
-} & Pick, 'size'> &
- React.ComponentProps<'a'>;
+} & Pick, "size"> &
+ React.ComponentProps<"a">;
-function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {
+function PaginationLink({
+ className,
+ isActive,
+ size = "icon",
+ ...props
+}: PaginationLinkProps) {
return (
);
}
-function PaginationPrevious({ className, ...props }: React.ComponentProps) {
+function PaginationPrevious({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
@@ -67,12 +82,15 @@ function PaginationPrevious({ className, ...props }: React.ComponentProps) {
+function PaginationNext({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
Next
@@ -81,12 +99,15 @@ function PaginationNext({ className, ...props }: React.ComponentProps) {
+function PaginationEllipsis({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
return (
diff --git a/apps/desktop/src/components/ui/popover.tsx b/apps/desktop/src/components/ui/popover.tsx
index 2cdac58..5d6f78d 100644
--- a/apps/desktop/src/components/ui/popover.tsx
+++ b/apps/desktop/src/components/ui/popover.tsx
@@ -1,21 +1,25 @@
-'use client';
+"use client";
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-function Popover({ ...props }: React.ComponentProps) {
+function Popover({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function PopoverTrigger({ ...props }: React.ComponentProps) {
+function PopoverTrigger({
+ ...props
+}: React.ComponentProps) {
return ;
}
function PopoverContent({
className,
- align = 'center',
+ align = "center",
sideOffset = 4,
...props
}: React.ComponentProps) {
@@ -26,8 +30,8 @@ function PopoverContent({
align={align}
sideOffset={sideOffset}
className={cn(
- 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
- className
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+ className,
)}
{...props}
/>
@@ -35,7 +39,9 @@ function PopoverContent({
);
}
-function PopoverAnchor({ ...props }: React.ComponentProps) {
+function PopoverAnchor({
+ ...props
+}: React.ComponentProps) {
return ;
}
diff --git a/apps/desktop/src/components/ui/progress.tsx b/apps/desktop/src/components/ui/progress.tsx
index 4b23dcb..d683666 100644
--- a/apps/desktop/src/components/ui/progress.tsx
+++ b/apps/desktop/src/components/ui/progress.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function Progress({
className,
@@ -11,7 +11,10 @@ function Progress({
return (
);
@@ -27,8 +27,8 @@ function RadioGroupItem({
diff --git a/apps/desktop/src/components/ui/resizable.tsx b/apps/desktop/src/components/ui/resizable.tsx
index 0db23d5..c955634 100644
--- a/apps/desktop/src/components/ui/resizable.tsx
+++ b/apps/desktop/src/components/ui/resizable.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { GripVerticalIcon } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function ResizablePanelGroup({
className,
@@ -11,13 +11,18 @@ function ResizablePanelGroup({
return (
);
}
-function ResizablePanel({ ...props }: React.ComponentProps) {
+function ResizablePanel({
+ ...props
+}: React.ComponentProps) {
return ;
}
@@ -32,8 +37,8 @@ function ResizableHandle({
div]:rotate-90',
- className
+ "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+ className,
)}
{...props}
>
diff --git a/apps/desktop/src/components/ui/scroll-area.tsx b/apps/desktop/src/components/ui/scroll-area.tsx
index 1b3ed8c..5524f1c 100644
--- a/apps/desktop/src/components/ui/scroll-area.tsx
+++ b/apps/desktop/src/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client";
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function ScrollArea({
className,
@@ -13,7 +13,7 @@ function ScrollArea({
return (
) {
return (
@@ -38,10 +38,12 @@ function ScrollBar({
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
- 'flex touch-none p-px transition-colors select-none',
- orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
- orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
- className
+ "flex touch-none p-px transition-colors select-none",
+ orientation === "vertical" &&
+ "h-full w-2.5 border-l border-l-transparent",
+ orientation === "horizontal" &&
+ "h-2.5 flex-col border-t border-t-transparent",
+ className,
)}
{...props}
>
diff --git a/apps/desktop/src/components/ui/select.tsx b/apps/desktop/src/components/ui/select.tsx
index d50ab80..0c883e3 100644
--- a/apps/desktop/src/components/ui/select.tsx
+++ b/apps/desktop/src/components/ui/select.tsx
@@ -1,28 +1,34 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-function Select({ ...props }: React.ComponentProps) {
+function Select({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function SelectGroup({ ...props }: React.ComponentProps) {
+function SelectGroup({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function SelectValue({ ...props }: React.ComponentProps) {
+function SelectValue({
+ ...props
+}: React.ComponentProps) {
return ;
}
function SelectTrigger({
className,
- size = 'default',
+ size = "default",
children,
...props
}: React.ComponentProps & {
- size?: 'sm' | 'default';
+ size?: "sm" | "default";
}) {
return (
@@ -45,7 +51,7 @@ function SelectTrigger({
function SelectContent({
className,
children,
- position = 'popper',
+ position = "popper",
...props
}: React.ComponentProps) {
return (
@@ -53,10 +59,10 @@ function SelectContent({
{children}
@@ -77,11 +83,14 @@ function SelectContent({
);
}
-function SelectLabel({ className, ...props }: React.ComponentProps) {
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
);
@@ -97,7 +106,7 @@ function SelectItem({
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
- className
+ className,
)}
{...props}
>
@@ -118,7 +127,7 @@ function SelectSeparator({
return (
);
@@ -131,7 +140,10 @@ function SelectScrollUpButton({
return (
@@ -146,7 +158,10 @@ function SelectScrollDownButton({
return (
diff --git a/apps/desktop/src/components/ui/separator.tsx b/apps/desktop/src/components/ui/separator.tsx
index 104b25d..06d1380 100644
--- a/apps/desktop/src/components/ui/separator.tsx
+++ b/apps/desktop/src/components/ui/separator.tsx
@@ -1,13 +1,13 @@
-'use client';
+"use client";
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function Separator({
className,
- orientation = 'horizontal',
+ orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps) {
@@ -17,8 +17,8 @@ function Separator({
decorative={decorative}
orientation={orientation}
className={cn(
- 'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
- className
+ "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+ className,
)}
{...props}
/>
diff --git a/apps/desktop/src/components/ui/sheet.tsx b/apps/desktop/src/components/ui/sheet.tsx
index 6dc2527..609cff0 100644
--- a/apps/desktop/src/components/ui/sheet.tsx
+++ b/apps/desktop/src/components/ui/sheet.tsx
@@ -1,22 +1,28 @@
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function Sheet({ ...props }: React.ComponentProps) {
return ;
}
-function SheetTrigger({ ...props }: React.ComponentProps) {
+function SheetTrigger({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function SheetClose({ ...props }: React.ComponentProps) {
+function SheetClose({
+ ...props
+}: React.ComponentProps) {
return ;
}
-function SheetPortal({ ...props }: React.ComponentProps) {
+function SheetPortal({
+ ...props
+}: React.ComponentProps) {
return ;
}
@@ -28,8 +34,8 @@ function SheetOverlay({
@@ -39,10 +45,10 @@ function SheetOverlay({
function SheetContent({
className,
children,
- side = 'right',
+ side = "right",
...props
}: React.ComponentProps & {
- side?: 'top' | 'right' | 'bottom' | 'left';
+ side?: "top" | "right" | "bottom" | "left";
}) {
return (
@@ -50,16 +56,16 @@ function SheetContent({
@@ -73,31 +79,34 @@ function SheetContent({
);
}
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
-function SheetTitle({ className, ...props }: React.ComponentProps) {
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
);
@@ -110,7 +119,7 @@ function SheetDescription({
return (
);
diff --git a/apps/desktop/src/components/ui/sidebar.tsx b/apps/desktop/src/components/ui/sidebar.tsx
index 866cf1b..f8a0a3e 100644
--- a/apps/desktop/src/components/ui/sidebar.tsx
+++ b/apps/desktop/src/components/ui/sidebar.tsx
@@ -1,34 +1,39 @@
-'use client';
+"use client";
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { VariantProps, cva } from 'class-variance-authority';
-import { PanelLeftIcon } from 'lucide-react';
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
type SidebarContextProps = {
- state: 'expanded' | 'collapsed';
+ state: "expanded" | "collapsed";
open: boolean;
setOpen: (open: boolean) => void;
openMobile: boolean;
@@ -42,7 +47,7 @@ const SidebarContext = React.createContext(null);
function useSidebar() {
const context = React.useContext(SidebarContext);
if (!context) {
- throw new Error('useSidebar must be used within a SidebarProvider.');
+ throw new Error("useSidebar must be used within a SidebarProvider.");
}
return context;
@@ -56,7 +61,7 @@ function SidebarProvider({
style,
children,
...props
-}: React.ComponentProps<'div'> & {
+}: React.ComponentProps<"div"> & {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
@@ -70,7 +75,7 @@ function SidebarProvider({
const open = openProp ?? _open;
const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => {
- const openState = typeof value === 'function' ? value(open) : value;
+ const openState = typeof value === "function" ? value(open) : value;
if (setOpenProp) {
setOpenProp(openState);
} else {
@@ -80,7 +85,7 @@ function SidebarProvider({
// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
- [setOpenProp, open]
+ [setOpenProp, open],
);
// Helper to toggle the sidebar.
@@ -91,19 +96,22 @@ function SidebarProvider({
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+ if (
+ event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+ (event.metaKey || event.ctrlKey)
+ ) {
event.preventDefault();
toggleSidebar();
}
};
- window.addEventListener('keydown', handleKeyDown);
- return () => window.removeEventListener('keydown', handleKeyDown);
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar]);
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
- const state = open ? 'expanded' : 'collapsed';
+ const state = open ? "expanded" : "collapsed";
const contextValue = React.useMemo(
() => ({
@@ -115,7 +123,7 @@ function SidebarProvider({
setOpenMobile,
toggleSidebar,
}),
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
);
return (
@@ -125,14 +133,14 @@ function SidebarProvider({
data-slot="sidebar-wrapper"
style={
{
- '--sidebar-width': SIDEBAR_WIDTH,
- '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+ "--sidebar-width": SIDEBAR_WIDTH,
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style,
} as React.CSSProperties
}
className={cn(
- 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
- className
+ "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+ className,
)}
{...props}
>
@@ -144,26 +152,26 @@ function SidebarProvider({
}
function Sidebar({
- side = 'left',
- variant = 'sidebar',
- collapsible = 'offcanvas',
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
className,
children,
...props
-}: React.ComponentProps<'div'> & {
- side?: 'left' | 'right';
- variant?: 'sidebar' | 'floating' | 'inset';
- collapsible?: 'offcanvas' | 'icon' | 'none';
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
}) {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
- if (collapsible === 'none') {
+ if (collapsible === "none") {
return (
@@ -182,7 +190,7 @@ function Sidebar({
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
style={
{
- '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+ "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
} as React.CSSProperties
}
side={side}
@@ -201,7 +209,7 @@ function Sidebar({
@@ -245,7 +253,11 @@ function Sidebar({
);
}
-function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps
) {
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps) {
const { toggleSidebar } = useSidebar();
return (
@@ -254,7 +266,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps {
onClick?.(event);
toggleSidebar();
@@ -267,7 +279,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps) {
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
const { toggleSidebar } = useSidebar();
return (
@@ -279,97 +291,103 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
- 'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
- 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
- '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
- 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
- '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
- '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
- className
+ "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+ "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+ "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+ "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+ "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+ "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+ className,
)}
{...props}
/>
);
}
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return (
);
}
-function SidebarInput({ className, ...props }: React.ComponentProps) {
+function SidebarInput({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
);
}
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
-function SidebarSeparator({ className, ...props }: React.ComponentProps) {
+function SidebarSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
);
}
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
);
@@ -379,17 +397,17 @@ function SidebarGroupLabel({
className,
asChild = false,
...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
- const Comp = asChild ? Slot : 'div';
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "div";
return (
svg]:size-4 [&>svg]:shrink-0',
- 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
- className
+ "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ className,
)}
{...props}
/>
@@ -400,94 +418,97 @@ function SidebarGroupAction({
className,
asChild = false,
...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
- const Comp = asChild ? Slot : 'button';
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "button";
return (
svg]:size-4 [&>svg]:shrink-0',
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
- 'after:absolute after:-inset-2 md:after:hidden',
- 'group-data-[collapsible=icon]:hidden',
- className
+ "after:absolute after:-inset-2 md:after:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ className,
)}
{...props}
/>
);
}
-function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroupContent({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
return (
);
}
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
return (
);
}
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
return (
);
}
const sidebarMenuButtonVariants = cva(
- 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
- default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
outline:
- 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+ "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
},
size: {
- default: 'h-8 text-sm',
- sm: 'h-7 text-xs',
- lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+ default: "h-8 text-sm",
+ sm: "h-7 text-xs",
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
},
},
defaultVariants: {
- variant: 'default',
- size: 'default',
+ variant: "default",
+ size: "default",
},
- }
+ },
);
function SidebarMenuButton({
asChild = false,
isActive = false,
- variant = 'default',
- size = 'default',
+ variant = "default",
+ size = "default",
tooltip,
className,
...props
-}: React.ComponentProps<'button'> & {
+}: React.ComponentProps<"button"> & {
asChild?: boolean;
isActive?: boolean;
tooltip?: string | React.ComponentProps;
} & VariantProps