Autocommit test+ui polish
This commit is contained in:
mixa
File diff suppressed because it is too large
Load Diff
@@ -3,12 +3,12 @@ import type { HTMLAttributes } from 'react'
|
||||
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
const badgeVariants = cva('inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold', {
|
||||
const badgeVariants = cva('inline-flex items-center rounded-none border-[3px] px-2.5 py-1 text-[10px] font-black uppercase tracking-[0.16em] shadow-[3px_3px_0_hsl(var(--shadow-strong))]', {
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-transparent bg-primary text-primary-foreground',
|
||||
secondary: 'border-transparent bg-muted text-foreground',
|
||||
outline: 'text-foreground',
|
||||
default: 'border-border bg-primary text-primary-foreground',
|
||||
secondary: 'border-border bg-accent text-accent-foreground',
|
||||
outline: 'border-border bg-card text-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -4,20 +4,20 @@ import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-none border-2 border-transparent text-sm font-semibold uppercase tracking-[0.08em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:pointer-events-none disabled:opacity-50',
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-none border-[3px] text-sm font-black uppercase tracking-[0.14em] transition-[transform,box-shadow,background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-primary bg-primary text-primary-foreground hover:bg-primary/85',
|
||||
outline: 'border-input bg-background hover:bg-muted',
|
||||
secondary: 'border-border bg-muted text-foreground hover:bg-muted/70',
|
||||
ghost: 'border-transparent hover:border-border hover:bg-muted/40 hover:text-foreground',
|
||||
destructive: 'border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/85',
|
||||
default: 'border-border bg-primary text-primary-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
outline: 'border-border bg-card text-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:bg-muted hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
secondary: 'border-border bg-accent text-accent-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
ghost: 'border-transparent bg-transparent text-foreground shadow-none hover:border-border hover:bg-muted/65',
|
||||
destructive: 'border-border bg-destructive text-destructive-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-8 px-3 text-xs',
|
||||
lg: 'h-11 px-8',
|
||||
default: 'h-11 px-4 py-2',
|
||||
sm: 'h-9 px-3 text-[11px]',
|
||||
lg: 'h-12 px-6 text-base',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -3,11 +3,11 @@ import * as React from 'react'
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn('rounded-none border-2 border-border bg-card text-card-foreground shadow-[6px_6px_0_hsl(var(--shadow-strong))]', className)} {...props} />
|
||||
return <div className={cn('rounded-none border-[3px] border-border bg-card text-card-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]', className)} {...props} />
|
||||
}
|
||||
|
||||
export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
||||
return <div className={cn('flex flex-col space-y-2 p-6', className)} {...props} />
|
||||
}
|
||||
|
||||
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
||||
@@ -15,7 +15,7 @@ export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHead
|
||||
}
|
||||
|
||||
export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
||||
return <p className={cn('text-sm text-muted-foreground', className)} {...props} />
|
||||
return <p className={cn('text-sm leading-relaxed text-muted-foreground', className)} {...props} />
|
||||
}
|
||||
|
||||
export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
|
||||
@@ -13,7 +13,7 @@ const ContextMenuContent = React.forwardRef<
|
||||
<ContextMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-none border-[3px] border-border bg-popover p-1.5 text-popover-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -28,7 +28,7 @@ const ContextMenuItem = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-none border border-transparent px-2 py-2 text-sm font-semibold uppercase tracking-[0.08em] outline-none focus:border-border focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -38,7 +38,7 @@ const ContextMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
|
||||
<ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-[3px] bg-border', className)} {...props} />
|
||||
))
|
||||
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
|
||||
|
||||
|
||||
@@ -14,7 +14,11 @@ export const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay ref={ref} className={cn('fixed inset-0 z-50 bg-black/70 backdrop-blur-[1px]', className)} {...props} />
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn('fixed inset-0 z-50 bg-black/75 backdrop-blur-[2px] [background-image:repeating-linear-gradient(45deg,transparent_0,transparent_18px,rgba(255,255,255,0.06)_18px,rgba(255,255,255,0.06)_20px)]', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
@@ -27,13 +31,13 @@ export const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-none border-2 border-border bg-card p-6 shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
'fixed left-[50%] top-[50%] z-50 grid max-h-[90vh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-none border-[3px] border-border bg-card p-6 shadow-[12px_12px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary/40">
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 border-[3px] border-border bg-card p-1 opacity-100 transition-colors hover:bg-muted focus:outline-none focus:ring-4 focus:ring-primary/25">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
@@ -43,14 +47,14 @@ export const DialogContent = React.forwardRef<
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
|
||||
<div className={cn('flex flex-col space-y-2 text-left', className)} {...props} />
|
||||
)
|
||||
|
||||
export const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
|
||||
<DialogPrimitive.Title ref={ref} className={cn('font-display text-xl font-semibold leading-none tracking-tight', className)} {...props} />
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ const DropdownMenuContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-none border-[3px] border-border bg-popover p-1.5 text-popover-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -29,7 +29,7 @@ const DropdownMenuItem = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-none border border-transparent px-2 py-2 text-sm font-semibold uppercase tracking-[0.08em] outline-none focus:border-border focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -39,7 +39,7 @@ const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
|
||||
<DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-[3px] bg-border', className)} {...props} />
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-none border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-12 w-full rounded-none border-[3px] border-input bg-background/95 px-3 py-2 text-sm shadow-[4px_4px_0_hsl(var(--shadow-strong))] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex h-10 w-full items-center justify-between rounded-none border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-12 w-full items-center justify-between rounded-none border-[3px] border-input bg-background/95 px-3 py-2 text-sm font-semibold uppercase tracking-[0.08em] shadow-[4px_4px_0_hsl(var(--shadow-strong))] ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-4 focus:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -34,7 +34,7 @@ export const SelectContent = React.forwardRef<
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn('relative z-50 min-w-[8rem] overflow-hidden rounded-none border-2 border-border bg-card text-card-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))]', className)}
|
||||
className={cn('relative z-50 min-w-[8rem] overflow-hidden rounded-none border-[3px] border-border bg-card text-card-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]', className)}
|
||||
{...props}
|
||||
>
|
||||
<SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
|
||||
@@ -49,7 +49,7 @@ export const SelectItem = React.forwardRef<
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn('relative flex w-full cursor-default select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-muted', className)}
|
||||
className={cn('relative flex w-full cursor-default select-none items-center rounded-none border border-transparent py-2 pl-8 pr-2 text-sm font-semibold uppercase tracking-[0.08em] outline-none focus:border-border focus:bg-muted', className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
|
||||
@@ -12,7 +12,7 @@ export const TabsList = React.forwardRef<
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex h-10 items-center justify-center rounded-none border border-[#415273] bg-[#253149] p-1 text-[#95a4bf] shadow-[inset_0_0_0_1px_rgba(138,164,210,0.08)]',
|
||||
'inline-flex items-center justify-center rounded-none border-[3px] border-border bg-card p-1 text-foreground shadow-[6px_6px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -27,7 +27,7 @@ export const TabsTrigger = React.forwardRef<
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-none border border-transparent px-3 py-1.5 text-sm font-semibold uppercase tracking-[0.08em] text-[#99a8c4] transition-colors focus:outline-none focus:ring-2 focus:ring-[#6a84b5]/60 hover:bg-[#2a3750] hover:text-[#d2deef] data-[state=active]:border-[#566a8e] data-[state=active]:bg-[#303e58] data-[state=active]:text-[#e6eefb]',
|
||||
'inline-flex min-w-[96px] items-center justify-center whitespace-nowrap rounded-none border-[3px] border-transparent px-3 py-2 text-sm font-black uppercase tracking-[0.14em] text-muted-foreground transition-colors focus:outline-none focus:ring-4 focus:ring-primary/25 hover:border-border hover:bg-muted hover:text-foreground data-[state=active]:border-border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
'flex min-h-[80px] w-full rounded-none border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex min-h-[80px] w-full rounded-none border-[3px] border-input bg-background/95 px-3 py-2 text-sm shadow-[4px_4px_0_hsl(var(--shadow-strong))] ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -6,134 +6,199 @@
|
||||
:root {
|
||||
--radius: 0rem;
|
||||
|
||||
--background: 220 20% 9%;
|
||||
--foreground: 200 20% 92%;
|
||||
--card: 222 18% 12%;
|
||||
--card-foreground: 200 20% 92%;
|
||||
--background: 42 37% 94%;
|
||||
--foreground: 220 17% 10%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 220 17% 10%;
|
||||
--popover: var(--card);
|
||||
--popover-foreground: var(--card-foreground);
|
||||
--border: 213 14% 33%;
|
||||
--input: 213 14% 33%;
|
||||
--primary: 355 96% 59%;
|
||||
--border: 220 17% 10%;
|
||||
--input: 220 17% 10%;
|
||||
--primary: 5 88% 54%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 219 16% 16%;
|
||||
--muted-foreground: 214 15% 70%;
|
||||
--accent: var(--muted);
|
||||
--accent-foreground: var(--foreground);
|
||||
--destructive: 354 91% 52%;
|
||||
--muted: 48 40% 88%;
|
||||
--muted-foreground: 220 10% 28%;
|
||||
--accent: 54 100% 66%;
|
||||
--accent-foreground: 220 17% 10%;
|
||||
--destructive: 356 84% 48%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--shadow-strong: 220 30% 5%;
|
||||
--shadow-strong: 220 17% 10%;
|
||||
--surface-pop: 190 92% 46%;
|
||||
--paper: 38 50% 90%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222 20% 8%;
|
||||
--foreground: 210 24% 92%;
|
||||
--card: 220 16% 11%;
|
||||
--card-foreground: 210 24% 92%;
|
||||
--border: 213 14% 30%;
|
||||
--input: 213 14% 30%;
|
||||
--primary: 355 96% 59%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 219 16% 14%;
|
||||
--muted-foreground: 214 14% 68%;
|
||||
--destructive: 354 91% 52%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--shadow-strong: 220 30% 4%;
|
||||
--background: 220 14% 8%;
|
||||
--foreground: 48 45% 94%;
|
||||
--card: 220 14% 11%;
|
||||
--card-foreground: 48 45% 94%;
|
||||
--border: 48 45% 94%;
|
||||
--input: 48 45% 94%;
|
||||
--primary: 14 97% 63%;
|
||||
--primary-foreground: 220 14% 8%;
|
||||
--muted: 220 12% 18%;
|
||||
--muted-foreground: 45 15% 73%;
|
||||
--accent: 54 100% 67%;
|
||||
--accent-foreground: 220 14% 8%;
|
||||
--destructive: 356 92% 60%;
|
||||
--destructive-foreground: 220 14% 8%;
|
||||
--shadow-strong: 0 0% 0%;
|
||||
--surface-pop: 187 92% 55%;
|
||||
--paper: 220 12% 16%;
|
||||
}
|
||||
|
||||
html[data-theme='dracula'] {
|
||||
--background: 231 15% 14%;
|
||||
--foreground: 60 30% 96%;
|
||||
--card: 232 14% 18%;
|
||||
--card-foreground: 60 30% 96%;
|
||||
--border: 232 12% 28%;
|
||||
--input: 232 12% 28%;
|
||||
--background: 225 13% 9%;
|
||||
--foreground: 50 45% 95%;
|
||||
--card: 225 13% 12%;
|
||||
--card-foreground: 50 45% 95%;
|
||||
--border: 50 45% 95%;
|
||||
--input: 50 45% 95%;
|
||||
--primary: 326 100% 74%;
|
||||
--primary-foreground: 231 15% 14%;
|
||||
--muted: 232 13% 22%;
|
||||
--muted-foreground: 225 18% 74%;
|
||||
--primary-foreground: 225 13% 9%;
|
||||
--muted: 225 13% 18%;
|
||||
--muted-foreground: 236 12% 78%;
|
||||
--accent: 53 100% 65%;
|
||||
--accent-foreground: 225 13% 9%;
|
||||
--surface-pop: 191 100% 54%;
|
||||
--paper: 225 12% 16%;
|
||||
}
|
||||
|
||||
html[data-theme='nord'] {
|
||||
--background: 220 16% 17%;
|
||||
--foreground: 214 32% 91%;
|
||||
--card: 221 16% 21%;
|
||||
--card-foreground: 214 32% 91%;
|
||||
--border: 220 12% 31%;
|
||||
--input: 220 12% 31%;
|
||||
--primary: 193 43% 67%;
|
||||
--primary-foreground: 220 16% 17%;
|
||||
--muted: 220 15% 24%;
|
||||
--muted-foreground: 214 17% 71%;
|
||||
--background: 210 29% 94%;
|
||||
--foreground: 215 21% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 215 21% 15%;
|
||||
--border: 215 21% 15%;
|
||||
--input: 215 21% 15%;
|
||||
--primary: 198 80% 42%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 210 29% 86%;
|
||||
--muted-foreground: 215 17% 35%;
|
||||
--accent: 44 100% 67%;
|
||||
--accent-foreground: 215 21% 15%;
|
||||
--surface-pop: 198 88% 45%;
|
||||
--paper: 201 33% 88%;
|
||||
}
|
||||
|
||||
html[data-theme='monokai'] {
|
||||
--background: 70 12% 14%;
|
||||
--foreground: 60 18% 91%;
|
||||
--card: 72 11% 18%;
|
||||
--card-foreground: 60 18% 91%;
|
||||
--border: 74 10% 29%;
|
||||
--input: 74 10% 29%;
|
||||
--primary: 54 93% 68%;
|
||||
--primary-foreground: 70 12% 14%;
|
||||
--muted: 74 11% 22%;
|
||||
--muted-foreground: 58 11% 73%;
|
||||
--background: 42 17% 11%;
|
||||
--foreground: 58 43% 93%;
|
||||
--card: 42 16% 15%;
|
||||
--card-foreground: 58 43% 93%;
|
||||
--border: 58 43% 93%;
|
||||
--input: 58 43% 93%;
|
||||
--primary: 26 96% 60%;
|
||||
--primary-foreground: 42 17% 11%;
|
||||
--muted: 42 14% 22%;
|
||||
--muted-foreground: 58 14% 74%;
|
||||
--accent: 67 100% 58%;
|
||||
--accent-foreground: 42 17% 11%;
|
||||
--surface-pop: 143 70% 54%;
|
||||
--paper: 42 14% 20%;
|
||||
}
|
||||
|
||||
html[data-theme='solarized'] {
|
||||
--background: 193 76% 15%;
|
||||
--foreground: 44 88% 85%;
|
||||
--card: 193 70% 19%;
|
||||
--card-foreground: 44 88% 85%;
|
||||
--border: 192 38% 31%;
|
||||
--input: 192 38% 31%;
|
||||
--primary: 18 80% 55%;
|
||||
--primary-foreground: 193 76% 15%;
|
||||
--muted: 193 58% 23%;
|
||||
--muted-foreground: 44 39% 72%;
|
||||
--background: 43 38% 92%;
|
||||
--foreground: 194 74% 19%;
|
||||
--card: 48 63% 98%;
|
||||
--card-foreground: 194 74% 19%;
|
||||
--border: 194 74% 19%;
|
||||
--input: 194 74% 19%;
|
||||
--primary: 18 80% 49%;
|
||||
--primary-foreground: 48 63% 98%;
|
||||
--muted: 43 31% 82%;
|
||||
--muted-foreground: 195 26% 30%;
|
||||
--accent: 45 94% 58%;
|
||||
--accent-foreground: 194 74% 19%;
|
||||
--surface-pop: 189 72% 38%;
|
||||
--paper: 43 46% 86%;
|
||||
}
|
||||
|
||||
html[data-theme='github'] {
|
||||
--background: 0 0% 99%;
|
||||
--foreground: 220 14% 18%;
|
||||
--background: 0 0% 98%;
|
||||
--foreground: 220 14% 10%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 220 14% 18%;
|
||||
--border: 210 18% 87%;
|
||||
--input: 210 18% 87%;
|
||||
--card-foreground: 220 14% 10%;
|
||||
--border: 220 14% 10%;
|
||||
--input: 220 14% 10%;
|
||||
--primary: 212 84% 44%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 210 30% 96%;
|
||||
--muted-foreground: 214 10% 43%;
|
||||
--muted: 210 30% 92%;
|
||||
--muted-foreground: 214 10% 33%;
|
||||
--accent: 48 100% 63%;
|
||||
--accent-foreground: 220 14% 10%;
|
||||
--surface-pop: 184 88% 41%;
|
||||
--paper: 41 52% 91%;
|
||||
}
|
||||
|
||||
html[data-theme='github'].dark {
|
||||
--background: 222 20% 10%;
|
||||
--foreground: 210 17% 93%;
|
||||
--card: 222 18% 14%;
|
||||
--card-foreground: 210 17% 93%;
|
||||
--border: 218 18% 27%;
|
||||
--input: 218 18% 27%;
|
||||
--background: 220 18% 9%;
|
||||
--foreground: 214 28% 94%;
|
||||
--card: 220 18% 13%;
|
||||
--card-foreground: 214 28% 94%;
|
||||
--border: 214 28% 94%;
|
||||
--input: 214 28% 94%;
|
||||
--primary: 212 88% 66%;
|
||||
--primary-foreground: 222 20% 10%;
|
||||
--muted: 221 18% 18%;
|
||||
--muted-foreground: 214 13% 71%;
|
||||
--primary-foreground: 220 18% 9%;
|
||||
--muted: 220 17% 18%;
|
||||
--muted-foreground: 214 13% 74%;
|
||||
--accent: 48 100% 63%;
|
||||
--accent-foreground: 220 18% 9%;
|
||||
--surface-pop: 184 88% 51%;
|
||||
--paper: 220 14% 17%;
|
||||
}
|
||||
|
||||
html[data-theme='bureau'] {
|
||||
--background: 36 30% 92%;
|
||||
--foreground: 220 18% 9%;
|
||||
--card: 38 35% 97%;
|
||||
--card-foreground: 220 18% 9%;
|
||||
--border: 220 18% 9%;
|
||||
--input: 220 18% 9%;
|
||||
--primary: 6 78% 54%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 38 24% 84%;
|
||||
--muted-foreground: 220 10% 28%;
|
||||
--accent: 52 98% 63%;
|
||||
--accent-foreground: 220 18% 9%;
|
||||
--surface-pop: 186 68% 43%;
|
||||
--paper: 38 28% 88%;
|
||||
}
|
||||
|
||||
html[data-theme='bureau'].dark {
|
||||
--background: 220 15% 8%;
|
||||
--foreground: 42 35% 93%;
|
||||
--card: 220 15% 10%;
|
||||
--card-foreground: 42 35% 93%;
|
||||
--border: 42 35% 93%;
|
||||
--input: 42 35% 93%;
|
||||
--primary: 8 92% 62%;
|
||||
--primary-foreground: 220 15% 8%;
|
||||
--muted: 220 12% 17%;
|
||||
--muted-foreground: 42 15% 76%;
|
||||
--accent: 51 96% 66%;
|
||||
--accent-foreground: 220 15% 8%;
|
||||
--surface-pop: 185 70% 50%;
|
||||
--paper: 220 12% 14%;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-family: 'Space Grotesk', 'IBM Plex Sans Condensed', 'Sora', sans-serif;
|
||||
min-height: 100vh;
|
||||
font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', 'Segoe UI', sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.01em;
|
||||
background-image:
|
||||
linear-gradient(180deg, hsl(var(--background)) 0%, hsl(222 26% 7%) 100%),
|
||||
linear-gradient(hsla(0 0% 100% / 0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsla(0 0% 100% / 0.045) 1px, transparent 1px),
|
||||
radial-gradient(1200px 650px at 74% -8%, hsl(var(--primary) / 0.16), transparent 56%),
|
||||
radial-gradient(980px 560px at -8% 102%, hsl(196 100% 58% / 0.11), transparent 62%);
|
||||
background-size: auto, 42px 42px, 42px 42px, auto, auto;
|
||||
linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--paper)) 100%),
|
||||
radial-gradient(circle at 78% 14%, hsl(var(--primary) / 0.16), transparent 24%),
|
||||
radial-gradient(circle at 18% 76%, hsl(var(--surface-pop) / 0.12), transparent 20%),
|
||||
radial-gradient(circle at 48% 48%, hsl(var(--accent) / 0.06), transparent 28%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@@ -145,26 +210,96 @@
|
||||
h2,
|
||||
h3,
|
||||
.font-display {
|
||||
font-family: 'Archivo Black', 'Anton', 'Space Grotesk', sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
font-family: 'Archivo Black', 'Arial Black', 'Impact', sans-serif;
|
||||
letter-spacing: 0.045em;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.94;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.control-shell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid hsl(var(--border));
|
||||
background: linear-gradient(165deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.82));
|
||||
border: 3px solid hsl(var(--border));
|
||||
background:
|
||||
linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card) / 0.98) 100%),
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.08), transparent 38%);
|
||||
box-shadow: 8px 8px 0 hsl(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.control-shell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(120deg, transparent 20%, hsl(var(--primary) / 0.07) 70%, transparent 100%);
|
||||
mix-blend-mode: screen;
|
||||
.control-shell > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.control-shell::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.brutal-block {
|
||||
position: relative;
|
||||
border: 3px solid hsl(var(--border));
|
||||
background:
|
||||
linear-gradient(180deg, hsl(var(--background) / 0.9), hsl(var(--muted) / 0.74)),
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.05), transparent 42%);
|
||||
box-shadow: 5px 5px 0 hsl(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.brutal-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 3px solid hsl(var(--border));
|
||||
background: hsl(var(--card));
|
||||
padding: 0.45rem 0.8rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 4px 4px 0 hsl(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.brutal-grid {
|
||||
background-image:
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.12), transparent 34%),
|
||||
radial-gradient(circle at bottom left, hsl(var(--surface-pop) / 0.08), transparent 24%);
|
||||
}
|
||||
|
||||
.brutal-rule {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: hsl(var(--border));
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 3px solid hsl(var(--muted));
|
||||
background: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.markdown-preview {
|
||||
@@ -222,7 +357,8 @@
|
||||
}
|
||||
|
||||
.markdown-preview code {
|
||||
border-radius: 0.375rem;
|
||||
border-radius: 0;
|
||||
border: 2px solid hsl(var(--border));
|
||||
background: hsl(var(--muted));
|
||||
padding: 0.1rem 0.35rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
@@ -236,7 +372,7 @@
|
||||
}
|
||||
|
||||
.markdown-preview blockquote {
|
||||
border-left: 3px solid hsl(var(--border));
|
||||
border-left: 4px solid hsl(var(--border));
|
||||
padding-left: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Button } from '../components/ui/button'
|
||||
import { Badge } from '../components/ui/badge'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
|
||||
import { Input } from '../components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select'
|
||||
@@ -47,54 +48,83 @@ export default function AdminPanel(props: Props) {
|
||||
} = props
|
||||
|
||||
return (
|
||||
<Card className="control-shell bg-card/95">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="font-display text-3xl">{t('admin')}</CardTitle>
|
||||
<CardDescription className="uppercase tracking-[0.14em]">{admin}</CardDescription>
|
||||
<Card className="control-shell overflow-hidden bg-card/95">
|
||||
<CardHeader className="gap-5 border-b-[3px] border-border bg-[linear-gradient(135deg,hsl(var(--accent)/0.18),transparent_70%)] pb-6">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>{t('admin')}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="font-display text-5xl md:text-6xl">{t('admin')}</CardTitle>
|
||||
<CardDescription className="mt-2 uppercase tracking-[0.14em]">{admin}</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" onClick={onLogout}>
|
||||
<LogOut className="mr-2 h-4 w-4" /> {t('logout')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 lg:grid-cols-2">
|
||||
<Card className="border-2 border-border bg-background/70 shadow-[5px_5px_0_hsl(var(--shadow-strong))]">
|
||||
<CardHeader><CardTitle className="font-display text-2xl">{t('createUser')}</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<form className="space-y-3" onSubmit={onCreateUser}>
|
||||
<CardContent className="grid gap-6 p-6 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
|
||||
<div className="brutal-block p-6">
|
||||
<div className="mb-5 space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('createUser')}</p>
|
||||
<CardTitle className="font-display text-3xl">{t('createUser')}</CardTitle>
|
||||
<CardDescription>{t('configuredFromEnv')}</CardDescription>
|
||||
</div>
|
||||
<form className="space-y-3" onSubmit={onCreateUser}>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('username')}</p>
|
||||
<Input value={newUsername} onChange={(e) => setNewUsername(e.target.value)} placeholder={t('username')} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('password')}</p>
|
||||
<Input type="password" minLength={10} value={newPass} onChange={(e) => setNewPass(e.target.value)} placeholder={t('password')} required />
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('theme')}</p>
|
||||
<Select value={newTheme} onValueChange={setNewTheme}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{themeOptions.map((opt) => <SelectItem key={opt} value={opt}>{t(opt)}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('mode')}</p>
|
||||
<Select value={newMode} onValueChange={setNewMode}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{modeOptions.map((opt) => <SelectItem key={opt} value={opt}>{opt}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button className="w-full" type="submit">{t('createUser')}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Button className="w-full" type="submit">{t('createUser')}</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Card className="border-2 border-border bg-background/70 shadow-[5px_5px_0_hsl(var(--shadow-strong))]">
|
||||
<CardHeader><CardTitle className="font-display text-2xl">{t('users')}</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="brutal-block p-6">
|
||||
<div className="mb-6 flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('users')}</p>
|
||||
<CardTitle className="font-display text-3xl">{t('users')}</CardTitle>
|
||||
</div>
|
||||
<Badge variant="secondary">{users.length} {t('users')}</Badge>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{users.map((u) => (
|
||||
<div key={u.id} className="flex items-center justify-between border-2 border-border bg-background/85 p-2 text-sm">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-semibold uppercase tracking-[0.1em]">{u.username}</p>
|
||||
<p className="text-[11px] uppercase tracking-[0.12em] text-muted-foreground">#{u.id} · {u.theme}/{u.colorMode}</p>
|
||||
<div key={u.id} className="brutal-block flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0 space-y-2">
|
||||
<p className="truncate font-display text-xl">{u.username}</p>
|
||||
<div className="flex flex-wrap gap-2 text-[10px] font-black uppercase tracking-[0.16em]">
|
||||
<span className="inline-flex items-center border-[3px] border-border bg-card px-2 py-1 shadow-[3px_3px_0_hsl(var(--shadow-strong))]">#{u.id}</span>
|
||||
<span className="inline-flex items-center border-[3px] border-border bg-accent px-2 py-1 text-accent-foreground shadow-[3px_3px_0_hsl(var(--shadow-strong))]">{u.theme}</span>
|
||||
<span className="inline-flex items-center border-[3px] border-border bg-muted px-2 py-1 shadow-[3px_3px_0_hsl(var(--shadow-strong))]">{u.colorMode}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="destructive" onClick={() => onDeleteUser(u.id)}>{t('delete')}</Button>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Button } from '../components/ui/button'
|
||||
import { CardContent } from '../components/ui/card'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog'
|
||||
import { Input } from '../components/ui/input'
|
||||
import { cn } from '../lib/utils'
|
||||
|
||||
type DriveView = 'all' | 'folders' | 'documents' | 'media' | 'archives' | 'tagged' | 'recent'
|
||||
|
||||
@@ -48,18 +49,37 @@ export default function TransferSection(props: Props) {
|
||||
onDownloadSelected,
|
||||
} = props
|
||||
|
||||
const pathLabel = path === '/' ? t('root') : path
|
||||
const viewButton = (active: boolean) =>
|
||||
cn(
|
||||
'border-[3px] px-4 py-3 text-left text-xs font-black uppercase tracking-[0.14em] transition-[transform,box-shadow,background-color] duration-150',
|
||||
active
|
||||
? 'border-border bg-primary text-primary-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))]'
|
||||
: 'border-border bg-card text-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:bg-muted hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
)
|
||||
|
||||
return (
|
||||
<CardContent className="space-y-3 p-4 md:p-5">
|
||||
<div>
|
||||
<p className="font-display text-xl font-semibold">{username}</p>
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">{t('accountSubtitle')}</p>
|
||||
<CardContent className="space-y-5 p-5 md:p-6">
|
||||
<div className="brutal-block space-y-4 p-5">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('accountSubtitle')}</p>
|
||||
<p className="font-display text-4xl">{username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="brutal-chip">{pathLabel}</span>
|
||||
{selectedCount > 0 ? <span className="brutal-chip">{selectedCount} {t('selected')}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full justify-start" onClick={onUploadFile}>{t('upload')}</Button>
|
||||
<Button className="w-full justify-start" variant="outline" onClick={onUploadFolder}>{t('uploadFolder')}</Button>
|
||||
<Button className="w-full justify-start" variant="outline" disabled={selectedCount === 0} onClick={onDownloadSelected}>
|
||||
{t('download')} {selectedCount > 0 ? `(${selectedCount})` : ''}
|
||||
</Button>
|
||||
<div className="grid gap-2">
|
||||
<Button className="w-full justify-start" onClick={onUploadFile}>{t('upload')}</Button>
|
||||
<Button className="w-full justify-start" variant="secondary" onClick={onUploadFolder}>{t('uploadFolder')}</Button>
|
||||
<Button className="w-full justify-start" variant="outline" disabled={selectedCount === 0} onClick={onDownloadSelected}>
|
||||
{t('download')} {selectedCount > 0 ? `(${selectedCount})` : ''}
|
||||
</Button>
|
||||
</div>
|
||||
<Dialog open={folderDialog} onOpenChange={setFolderDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="w-full justify-start" variant="outline">{t('newFolder')}</Button>
|
||||
@@ -73,24 +93,28 @@ export default function TransferSection(props: Props) {
|
||||
<Button onClick={onCreateFolder}>{t('newFolder')}</Button>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="grid gap-1 border-2 border-border bg-muted/50 p-2 text-xs uppercase tracking-[0.14em]">
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'all' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('all')}>{t('allFiles')} ({filesCount})</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'folders' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('folders')}>{t('folders')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'documents' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('documents')}>{t('documents')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'media' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('media')}>{t('media')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'archives' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('archives')}>{t('archives')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'tagged' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('tagged')}>{t('tagged')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'recent' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('recent')}>{t('recent')}</button>
|
||||
|
||||
<div className="brutal-block space-y-3 p-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('allFiles')}</p>
|
||||
<div className="grid gap-2">
|
||||
<button type="button" className={viewButton(view === 'all')} onClick={() => setView('all')}>{t('allFiles')} ({filesCount})</button>
|
||||
<button type="button" className={viewButton(view === 'folders')} onClick={() => setView('folders')}>{t('folders')}</button>
|
||||
<button type="button" className={viewButton(view === 'documents')} onClick={() => setView('documents')}>{t('documents')}</button>
|
||||
<button type="button" className={viewButton(view === 'media')} onClick={() => setView('media')}>{t('media')}</button>
|
||||
<button type="button" className={viewButton(view === 'archives')} onClick={() => setView('archives')}>{t('archives')}</button>
|
||||
<button type="button" className={viewButton(view === 'tagged')} onClick={() => setView('tagged')}>{t('tagged')}</button>
|
||||
<button type="button" className={viewButton(view === 'recent')} onClick={() => setView('recent')}>{t('recent')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-2 border-border bg-muted/50 p-2 text-xs uppercase tracking-[0.12em]">
|
||||
<p className="font-semibold text-muted-foreground">{t('tags')}</p>
|
||||
<button type="button" className={`block w-full border px-2 py-1 text-left ${!activeTag ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setActiveTag('')}># all</button>
|
||||
<div className="brutal-block space-y-3 p-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('tags')}</p>
|
||||
<button type="button" className={viewButton(!activeTag)} onClick={() => setActiveTag('')}># {t('all')}</button>
|
||||
{Object.entries(tagCounts)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8)
|
||||
.map(([tag, count]) => (
|
||||
<button type="button" key={tag} className={`block w-full border px-2 py-1 text-left ${activeTag === tag ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setActiveTag(tag)}>#{tag} ({count})</button>
|
||||
<button type="button" key={tag} className={viewButton(activeTag === tag)} onClick={() => setActiveTag(tag)}>#{tag} ({count})</button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user