a very good jj gui
style: improve UI components styling
+20
-8
+1
-1
apps/desktop/src/components/ui/badge.tsx
+1
-1
apps/desktop/src/components/ui/badge.tsx
···
5
5
import { cn } from "@/lib/utils";
6
6
7
7
const badgeVariants = cva(
8
-
"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
8
+
"h-5 gap-1 rounded-md border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
9
9
{
10
10
variants: {
11
11
variant: {
+9
-5
apps/desktop/src/components/ui/command.tsx
+9
-5
apps/desktop/src/components/ui/command.tsx
···
32
32
children,
33
33
className,
34
34
showCloseButton = false,
35
+
filter,
36
+
shouldFilter = true,
35
37
...props
36
38
}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
37
39
title?: string;
···
39
41
className?: string;
40
42
showCloseButton?: boolean;
41
43
children: React.ReactNode;
44
+
filter?: (value: string, search: string, keywords?: string[]) => number;
45
+
shouldFilter?: boolean;
42
46
}) {
43
47
return (
44
48
<Dialog {...props}>
···
46
50
<DialogTitle>{title}</DialogTitle>
47
51
<DialogDescription>{description}</DialogDescription>
48
52
</DialogHeader>
49
-
<DialogContent
50
-
className={cn("rounded-sm overflow-hidden p-0 top-[20%] translate-y-0", className)}
51
-
showCloseButton={showCloseButton}
52
-
>
53
-
<Command>{children}</Command>
53
+
<DialogContent
54
+
className={cn("rounded-lg overflow-hidden p-0 top-[20%] translate-y-0", className)}
55
+
showCloseButton={showCloseButton}
56
+
>
57
+
<Command filter={filter} shouldFilter={shouldFilter}>{children}</Command>
54
58
</DialogContent>
55
59
</Dialog>
56
60
);
+4
-2
apps/desktop/src/components/ui/resizable.tsx
+4
-2
apps/desktop/src/components/ui/resizable.tsx
···
28
28
<Separator
29
29
data-slot="resizable-handle"
30
30
className={cn(
31
-
"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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
31
+
"bg-transparent hover:bg-border/50 focus-visible:ring-ring relative flex w-px items-center justify-center shrink-0 transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 after:bg-transparent 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2",
32
32
className,
33
33
)}
34
34
{...props}
35
35
>
36
-
{withHandle && <div className="bg-border h-6 w-1 rounded-none z-10 flex shrink-0" />}
36
+
{withHandle && (
37
+
<div className="bg-border/60 hover:bg-border h-6 w-1 rounded-none z-10 flex shrink-0 transition-colors data-[panel-group-direction=vertical]:h-1 data-[panel-group-direction=vertical]:w-6" />
38
+
)}
37
39
</Separator>
38
40
);
39
41
}
+6
apps/desktop/src/styles/index.css
+6
apps/desktop/src/styles/index.css