dumtruck/konobangu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refactor webui structure

Browse Source
This commit is contained in:
master 2025-04-24 02:23:26 +08:00
parent 68aa13e216
commit eb8f0be004
87 changed files with 407 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/recorder/.env
View File

@ -1,8 +1,13 @@
AUTH_TYPE = "oidc" # or oidc
HOST="konobangu.com"
DATABASE_URL = "postgres://konobangu:konobangu@localhost:5432/konobangu"
STORAGE_DATA_DIR = "./data"
AUTH_TYPE = "basic" # or oidc
BASIC_USER = "konobangu"
BASIC_PASSWORD = "konobangu"
OIDC_ISSUER="https://auth.logto.io/oidc"
OIDC_AUDIENCE = "https://konobangu.com/api"
OIDC_CLIENT_ID = "client_id"
OIDC_CLIENT_SECRET = "client_secret" # optional
OIDC_EXTRA_SCOPES = "read:konobangu write:konobangu"
# OIDC_ISSUER="https://auth.logto.io/oidc"
# OIDC_AUDIENCE = "https://konobangu.com/api"
# OIDC_CLIENT_ID = "client_id"
# OIDC_CLIENT_SECRET = "client_secret" # optional
# OIDC_EXTRA_SCOPES = "read:konobangu write:konobangu"
# OIDC_EXTRA_CLAIM_KEY = ""
# OIDC_EXTRA_CLAIM_VALUE = ""

7
apps/recorder/src/graphql/guard.rs
View File

@ -157,12 +157,7 @@ where
None => Ok(()),
}
}
field => Err(AuthError::from_graphql_subscribe_id_guard(
async_graphql::Error::new("unsupport graphql field"),
context,
field,
"",
)),
_ => Ok(()),
};
match validation_result {
Ok(_) => GuardAction::Allow,

5
apps/webui/.env
View File

@ -1,6 +1,3 @@
HOST="konobangu.com"
DATABASE_URL = "postgres://konobangu:konobangu@localhost:5432/konobangu"
STORAGE_DATA_DIR = "./data"
AUTH_TYPE = "basic" # or oidc
BASIC_USER = "konobangu"
BASIC_PASSWORD = "konobangu"
@ -9,5 +6,3 @@ BASIC_PASSWORD = "konobangu"
# OIDC_CLIENT_ID = "client_id"
# OIDC_CLIENT_SECRET = "client_secret" # optional
# OIDC_EXTRA_SCOPES = "read:konobangu write:konobangu"
# OIDC_EXTRA_CLAIM_KEY = ""
# OIDC_EXTRA_CLAIM_VALUE = ""

4
apps/webui/components.json
View File

@ -11,10 +11,10 @@
},
"aliases": {
"components": "@/components",
"utils": "@/styles/utils",
"utils": "@/infra/styles/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
"hooks": "@/infra/hooks"
},
"iconLibrary": "lucide"
}

2
apps/webui/src/auth/config.ts → apps/webui/src/app/auth/config.ts
View File

@ -28,7 +28,7 @@ export function buildOidcConfig(): OpenIdConfiguration {
responseType: 'code',
silentRenew: true,
useRefreshToken: true,
logLevel: LogLevel.Debug,
logLevel: LogLevel.None,
autoUserInfo: !resource,
renewUserInfoAfterTokenRenew: !resource,
customParamsAuthRequest: {

4
apps/webui/src/auth/context.ts → apps/webui/src/app/auth/context.ts
View File

@ -1,8 +1,6 @@
import { UnreachableError } from '@/errors/common';
import { UnreachableError } from '@/infra/errors/common';
import type { Injector, Provider } from '@outposts/injection-js';
import type { AnyRouter } from '@tanstack/react-router';
import { atomSignal } from 'jotai-signal';
import type { Atom } from 'jotai/vanilla';
import {
CHECK_AUTH_RESULT_EVENT,
type CheckAuthResultEventType,

2
apps/webui/src/auth/guard.ts → apps/webui/src/app/auth/guard.ts
View File

@ -1,4 +1,4 @@
import type { RouterContext } from '@/traits/router';
import type { RouterContext } from '@/infra/routes/traits';
import { runInInjectionContext } from '@outposts/injection-js';
import { autoLoginPartialRoutesGuard } from 'oidc-client-rx';
import { firstValueFrom } from 'rxjs';

0
apps/webui/src/auth/hooks.ts → apps/webui/src/app/auth/hooks.ts
View File

6
apps/webui/src/components/layout/app-layout.tsx
View File

@ -13,9 +13,9 @@ import {
SidebarProvider,
SidebarTrigger,
} from '@/components/ui/sidebar';
import { cn } from '@/styles/utils';
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteBreadcrumbItem } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import type { RouteBreadcrumbItem } from '@/infra/routes/traits';
import { cn } from '@/infra/styles/utils';
import { useMatches } from '@tanstack/react-router';
import {
type DetailedHTMLProps,

2
apps/webui/src/components/layout/app-sidebar.tsx
View File

@ -5,7 +5,7 @@ import {
SidebarHeader,
SidebarRail,
} from '@/components/ui/sidebar';
import { AppNavMainData } from '@/config/app-layout';
import { AppNavMainData } from '@/infra/routes/nav';
import type { ComponentPropsWithoutRef } from 'react';
import { AppIcon } from './app-icon';
import { NavMain } from './nav-main';

2
apps/webui/src/components/ui/accordion.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Accordion({
...props

2
apps/webui/src/components/ui/alert-dialog.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
import { buttonVariants } from "@/components/ui/button"
function AlertDialog({

2
apps/webui/src/components/ui/alert.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",

2
apps/webui/src/components/ui/avatar.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Avatar({
className,

2
apps/webui/src/components/ui/badge.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>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-[color,box-shadow] overflow-hidden",

2
apps/webui/src/components/ui/breadcrumb.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />

2
apps/webui/src/components/ui/button.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",

2
apps/webui/src/components/ui/calendar.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
import { buttonVariants } from "@/components/ui/button"
function Calendar({

48
apps/webui/src/components/ui/card.tsx
View File

@ -1,84 +1,84 @@
import type * as React from 'react';
import * as React from "react"
import { cn } from '@/styles/utils';
import { cn } from "@/infra/styles/utils"
function Card({ className, ...props }: React.ComponentProps<'div'>) {
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className
)}
{...props}
/>
);
)
}
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
)}
{...props}
/>
);
)
}
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn('font-semibold leading-none', className)}
className={cn("leading-none font-semibold", className)}
{...props}
/>
);
)
}
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn('text-muted-foreground text-sm', className)}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
)
}
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props}
/>
);
)
}
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn('px-6', className)}
className={cn("px-6", className)}
{...props}
/>
);
)
}
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props}
/>
);
)
}
export {
@ -89,4 +89,4 @@ export {
CardAction,
CardDescription,
CardContent,
};
}

2
apps/webui/src/components/ui/carousel.tsx
View File

@ -6,7 +6,7 @@ import useEmblaCarousel, {
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
import { Button } from "@/components/ui/button"
type CarouselApi = UseEmblaCarouselType[1]

130
apps/webui/src/components/ui/chart.tsx
View File

@ -1,35 +1,35 @@
import * as React from "react"
import * as RechartsPrimitive from "recharts"
import * as React from "react";
import * as RechartsPrimitive from "recharts";
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils";
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const
const THEMES = { light: "", dark: ".dark" } as const;
export type ChartConfig = {
[k in string]: {
label?: React.ReactNode
icon?: React.ComponentType
label?: React.ReactNode;
icon?: React.ComponentType;
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record<keyof typeof THEMES, string> }
)
}
);
};
type ChartContextProps = {
config: ChartConfig
}
config: ChartConfig;
};
const ChartContext = React.createContext<ChartContextProps | null>(null)
const ChartContext = React.createContext<ChartContextProps | null>(null);
function useChart() {
const context = React.useContext(ChartContext)
const context = React.useContext(ChartContext);
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />")
throw new Error("useChart must be used within a <ChartContainer />");
}
return context
return context;
}
function ChartContainer({
@ -39,13 +39,13 @@ function ChartContainer({
config,
...props
}: React.ComponentProps<"div"> & {
config: ChartConfig
config: ChartConfig;
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>["children"]
>["children"];
}) {
const uniqueId = React.useId()
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
const uniqueId = React.useId();
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
return (
<ChartContext.Provider value={{ config }}>
@ -64,16 +64,16 @@ function ChartContainer({
</RechartsPrimitive.ResponsiveContainer>
</div>
</ChartContext.Provider>
)
);
}
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
const colorConfig = Object.entries(config).filter(
([, config]) => config.theme || config.color
)
);
if (!colorConfig.length) {
return null
return null;
}
return (
@ -87,8 +87,8 @@ ${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
})
.join("\n")}
}
@ -97,10 +97,10 @@ ${colorConfig
.join("\n"),
}}
/>
)
}
);
};
const ChartTooltip = RechartsPrimitive.Tooltip
const ChartTooltip = RechartsPrimitive.Tooltip;
function ChartTooltipContent({
active,
@ -118,40 +118,40 @@ function ChartTooltipContent({
labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
React.ComponentProps<"div"> & {
hideLabel?: boolean
hideIndicator?: boolean
indicator?: "line" | "dot" | "dashed"
nameKey?: string
labelKey?: string
hideLabel?: boolean;
hideIndicator?: boolean;
indicator?: "line" | "dot" | "dashed";
nameKey?: string;
labelKey?: string;
}) {
const { config } = useChart()
const { config } = useChart();
const tooltipLabel = React.useMemo(() => {
if (hideLabel || !payload?.length) {
return null
return null;
}
const [item] = payload
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const [item] = payload;
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const value =
!labelKey && typeof label === "string"
? config[label as keyof typeof config]?.label || label
: itemConfig?.label
: itemConfig?.label;
if (labelFormatter) {
return (
<div className={cn("font-medium", labelClassName)}>
{labelFormatter(value, payload)}
</div>
)
);
}
if (!value) {
return null
return null;
}
return <div className={cn("font-medium", labelClassName)}>{value}</div>
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
}, [
label,
labelFormatter,
@ -160,13 +160,13 @@ function ChartTooltipContent({
labelClassName,
config,
labelKey,
])
]);
if (!active || !payload?.length) {
return null
return null;
}
const nestLabel = payload.length === 1 && indicator !== "dot"
const nestLabel = payload.length === 1 && indicator !== "dot";
return (
<div
@ -175,12 +175,12 @@ function ChartTooltipContent({
className
)}
>
{!nestLabel ? tooltipLabel : null}
{nestLabel ? null : tooltipLabel}
<div className="grid gap-1.5">
{payload.map((item, index) => {
const key = `${nameKey || item.name || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || item.payload.fill || item.color
const key = `${nameKey || item.name || item.dataKey || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const indicatorColor = color || item.payload.fill || item.color;
return (
<div
@ -239,14 +239,14 @@ function ChartTooltipContent({
</>
)}
</div>
)
);
})}
</div>
</div>
)
);
}
const ChartLegend = RechartsPrimitive.Legend
const ChartLegend = RechartsPrimitive.Legend;
function ChartLegendContent({
className,
@ -256,13 +256,13 @@ function ChartLegendContent({
nameKey,
}: React.ComponentProps<"div"> &
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
hideIcon?: boolean
nameKey?: string
hideIcon?: boolean;
nameKey?: string;
}) {
const { config } = useChart()
const { config } = useChart();
if (!payload?.length) {
return null
return null;
}
return (
@ -274,8 +274,8 @@ function ChartLegendContent({
)}
>
{payload.map((item) => {
const key = `${nameKey || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const key = `${nameKey || item.dataKey || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
return (
<div
@ -296,10 +296,10 @@ function ChartLegendContent({
)}
{itemConfig?.label}
</div>
)
);
})}
</div>
)
);
}
// Helper to extract item config from a payload.
@ -309,7 +309,7 @@ function getPayloadConfigFromPayload(
key: string
) {
if (typeof payload !== "object" || payload === null) {
return undefined
return undefined;
}
const payloadPayload =
@ -317,15 +317,15 @@ function getPayloadConfigFromPayload(
typeof payload.payload === "object" &&
payload.payload !== null
? payload.payload
: undefined
: undefined;
let configLabelKey: string = key
let configLabelKey: string = key;
if (
key in payload &&
typeof payload[key as keyof typeof payload] === "string"
) {
configLabelKey = payload[key as keyof typeof payload] as string
configLabelKey = payload[key as keyof typeof payload] as string;
} else if (
payloadPayload &&
key in payloadPayload &&
@ -333,12 +333,12 @@ function getPayloadConfigFromPayload(
) {
configLabelKey = payloadPayload[
key as keyof typeof payloadPayload
] as string
] as string;
}
return configLabelKey in config
? config[configLabelKey]
: config[key as keyof typeof config]
: config[key as keyof typeof config];
}
export {
@ -348,4 +348,4 @@ export {
ChartLegend,
ChartLegendContent,
ChartStyle,
}
};

2
apps/webui/src/components/ui/checkbox.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Checkbox({
className,

2
apps/webui/src/components/ui/command.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { SearchIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
import {
Dialog,
DialogContent,

2
apps/webui/src/components/ui/context-menu.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function ContextMenu({
...props

2
apps/webui/src/components/ui/dialog.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Dialog({
...props

2
apps/webui/src/components/ui/drawer.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Drawer({
...props

2
apps/webui/src/components/ui/dropdown-menu.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function DropdownMenu({
...props

85
apps/webui/src/components/ui/form.tsx
View File

@ -1,31 +1,31 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import * as LabelPrimitive from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import * as React from "react";
import {
Controller,
FormProvider,
useFormContext,
useFormState,
type ControllerProps,
type FieldPath,
type FieldValues,
} from "react-hook-form"
FormProvider,
useFormContext,
useFormState,
} from "react-hook-form";
import { cn } from "@/styles/utils"
import { Label } from "@/components/ui/label"
import { Label } from "@/components/ui/label";
import { cn } from "@/infra/styles/utils";
const Form = FormProvider
const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName
}
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
@ -37,21 +37,21 @@ const FormField = <
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
);
};
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState } = useFormContext()
const formState = useFormState({ name: fieldContext.name })
const fieldState = getFieldState(fieldContext.name, formState)
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState } = useFormContext();
const formState = useFormState({ name: fieldContext.name });
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
throw new Error("useFormField should be used within <FormField>");
}
const { id } = itemContext
const { id } = itemContext;
return {
id,
@ -60,19 +60,19 @@ const useFormField = () => {
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
};
};
type FormItemContextValue = {
id: string
}
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
);
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
const id = React.useId()
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
@ -82,14 +82,14 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
{...props}
/>
</FormItemContext.Provider>
)
);
}
function FormLabel({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
const { error, formItemId } = useFormField()
const { error, formItemId } = useFormField();
return (
<Label
@ -99,29 +99,28 @@ function FormLabel({
htmlFor={formItemId}
{...props}
/>
)
);
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
}
aria-invalid={!!error}
{...props}
/>
)
);
}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
const { formDescriptionId } = useFormField()
const { formDescriptionId } = useFormField();
return (
<p
@ -130,15 +129,15 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
);
}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message ?? "") : props.children
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message ?? "") : props.children;
if (!body) {
return null
return null;
}
return (
@ -150,7 +149,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
>
{body}
</p>
)
);
}
export {
@ -162,4 +161,4 @@ export {
FormDescription,
FormMessage,
FormField,
}
};

2
apps/webui/src/components/ui/hover-card.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function HoverCard({
...props

2
apps/webui/src/components/ui/input-otp.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { MinusIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function InputOTP({
className,

2
apps/webui/src/components/ui/input.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (

2
apps/webui/src/components/ui/label.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Label({
className,

2
apps/webui/src/components/ui/menubar.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Menubar({
className,

2
apps/webui/src/components/ui/navigation-menu.tsx
View File

@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function NavigationMenu({
className,

2
apps/webui/src/components/ui/pagination.tsx
View File

@ -5,7 +5,7 @@ import {
MoreHorizontalIcon,
} from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
import { Button, buttonVariants } from "@/components/ui/button"
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {

2
apps/webui/src/components/ui/popover.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Popover({
...props

16
apps/webui/src/components/ui/pro-link.tsx
View File

@ -1,17 +1,11 @@
import { cn } from '@/styles/utils';
import { type LinkComponent, createLink } from '@tanstack/react-router';
import type { AnchorHTMLAttributes, ComponentProps } from 'react';
import { type LinkComponent, createLink } from "@tanstack/react-router";
import type { AnchorHTMLAttributes, ComponentProps } from "react";
export interface BasicLinkProps
extends AnchorHTMLAttributes<HTMLAnchorElement> {}
const BasicLinkComponent = (props: ComponentProps<'a'>) => {
return (
<a
{...props}
className={cn('block px-3 py-2 text-blue-700', props.className)}
/>
);
const BasicLinkComponent = (props: ComponentProps<"a">) => {
return <a {...props} />;
};
const CreatedLinkComponent = createLink(BasicLinkComponent);
@ -20,7 +14,7 @@ export const ProLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
if (props.href) {
return <BasicLinkComponent {...(props as any)} />;
}
return <CreatedLinkComponent preload={'intent'} {...props} />;
return <CreatedLinkComponent preload={"intent"} {...props} />;
};
export type ProLinkProps = ComponentProps<typeof ProLink>;

2
apps/webui/src/components/ui/progress-circle.tsx
View File

@ -1,4 +1,4 @@
import { cn } from '@/styles/utils';
import { cn } from '@/infra/styles/utils';
import type { FC, HTMLAttributes } from 'react';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

2
apps/webui/src/components/ui/progress.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Progress({
className,

2
apps/webui/src/components/ui/radio-group.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function RadioGroup({
className,

2
apps/webui/src/components/ui/resizable.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { GripVerticalIcon } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function ResizablePanelGroup({
className,

2
apps/webui/src/components/ui/scroll-area.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function ScrollArea({
className,

2
apps/webui/src/components/ui/select.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Select({
...props

2
apps/webui/src/components/ui/separator.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Separator({
className,

2
apps/webui/src/components/ui/sheet.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />

279
apps/webui/src/components/ui/sidebar.tsx
View File

@ -1,39 +1,39 @@
'use client';
"use client";
import { Slot } from '@radix-ui/react-slot';
import { type 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 * as React from "react";
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
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';
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { useIsMobile } from '@/hooks/use-mobile';
import { cn } from '@/styles/utils';
} from "@/components/ui/tooltip";
import { useIsMobile } from "@/infra/hooks/use-mobile";
import { cn } from "@/infra/styles/utils";
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;
@ -47,7 +47,7 @@ const SidebarContext = React.createContext<SidebarContextProps | null>(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;
@ -61,7 +61,7 @@ function SidebarProvider({
style,
children,
...props
}: React.ComponentProps<'div'> & {
}: React.ComponentProps<"div"> & {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
@ -75,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 {
@ -83,8 +83,7 @@ function SidebarProvider({
}
// This sets the cookie to keep the sidebar state.
// TODO
// biome-ignore lint/nursery/noDocumentCookie: <explanation>
// TODO: FIXME
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
[setOpenProp, open]
@ -107,13 +106,13 @@ function SidebarProvider({
}
};
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<SidebarContextProps>(
() => ({
@ -135,13 +134,13 @@ 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 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
className
)}
{...props}
@ -154,25 +153,25 @@ 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 (
<div
data-slot="sidebar"
className={cn(
'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
className
)}
{...props}
@ -189,10 +188,10 @@ function Sidebar({
data-sidebar="sidebar"
data-slot="sidebar"
data-mobile="true"
className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
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}
@ -209,9 +208,9 @@ function Sidebar({
return (
<div
className="group peer hidden text-sidebar-foreground md:block"
className="group peer text-sidebar-foreground hidden md:block"
data-state={state}
data-collapsible={state === 'collapsed' ? collapsible : ''}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}
data-slot="sidebar"
@ -220,25 +219,25 @@ function Sidebar({
<div
data-slot="sidebar-gap"
className={cn(
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
)}
/>
<div
data-slot="sidebar-container"
className={cn(
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
className
)}
{...props}
@ -246,7 +245,7 @@ function Sidebar({
<div
data-sidebar="sidebar"
data-slot="sidebar-inner"
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
>
{children}
</div>
@ -268,7 +267,7 @@ function SidebarTrigger({
data-slot="sidebar-trigger"
variant="ghost"
size="icon"
className={cn('size-7', className)}
className={cn("size-7", className)}
onClick={(event) => {
onClick?.(event);
toggleSidebar();
@ -281,7 +280,7 @@ function SidebarTrigger({
);
}
function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
const { toggleSidebar } = useSidebar();
return (
@ -293,12 +292,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
'-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 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',
'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
"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}
@ -306,13 +305,13 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
);
}
function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return (
<main
data-slot="sidebar-inset"
className={cn(
'relative flex w-full flex-1 flex-col bg-background',
'md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
"bg-background relative flex w-full flex-1 flex-col",
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
className
)}
{...props}
@ -328,29 +327,29 @@ function SidebarInput({
<Input
data-slot="sidebar-input"
data-sidebar="input"
className={cn('h-8 w-full bg-background shadow-none', className)}
className={cn("bg-background h-8 w-full shadow-none", className)}
{...props}
/>
);
}
function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-header"
data-sidebar="header"
className={cn('flex flex-col gap-2 p-2', className)}
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
);
}
function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-footer"
data-sidebar="footer"
className={cn('flex flex-col gap-2 p-2', className)}
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
);
@ -364,19 +363,19 @@ function SidebarSeparator({
<Separator
data-slot="sidebar-separator"
data-sidebar="separator"
className={cn('mx-2 w-auto bg-sidebar-border', className)}
className={cn("bg-sidebar-border mx-2 w-auto", className)}
{...props}
/>
);
}
function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-content"
data-sidebar="content"
className={cn(
'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className
)}
{...props}
@ -384,12 +383,12 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
);
}
function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-group"
data-sidebar="group"
className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props}
/>
);
@ -399,16 +398,16 @@ 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 (
<Comp
data-slot="sidebar-group-label"
data-sidebar="group-label"
className={cn(
'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring 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',
"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}
@ -420,18 +419,18 @@ 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 (
<Comp
data-slot="sidebar-group-action"
data-sidebar="group-action"
className={cn(
'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>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:-inset-2 after:absolute md:after:hidden',
'group-data-[collapsible=icon]:hidden',
"after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
@ -442,57 +441,57 @@ function SidebarGroupAction({
function SidebarGroupContent({
className,
...props
}: React.ComponentProps<'div'>) {
}: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-group-content"
data-sidebar="group-content"
className={cn('w-full text-sm', className)}
className={cn("w-full text-sm", className)}
{...props}
/>
);
}
function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
return (
<ul
data-slot="sidebar-menu"
data-sidebar="menu"
className={cn('flex w-full min-w-0 flex-col gap-1', className)}
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props}
/>
);
}
function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
return (
<li
data-slot="sidebar-menu-item"
data-sidebar="menu-item"
className={cn('group/menu-item relative', className)}
className={cn("group/menu-item relative", className)}
{...props}
/>
);
}
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",
},
}
);
@ -500,17 +499,17 @@ const sidebarMenuButtonVariants = cva(
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<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>) {
const Comp = asChild ? Slot : 'button';
const Comp = asChild ? Slot : "button";
const { isMobile, state } = useSidebar();
const button = (
@ -528,7 +527,7 @@ function SidebarMenuButton({
return button;
}
if (typeof tooltip === 'string') {
if (typeof tooltip === "string") {
tooltip = {
children: tooltip,
};
@ -540,7 +539,7 @@ function SidebarMenuButton({
<TooltipContent
side="right"
align="center"
hidden={state !== 'collapsed' || isMobile}
hidden={state !== "collapsed" || isMobile}
{...tooltip}
/>
</Tooltip>
@ -552,26 +551,26 @@ function SidebarMenuAction({
asChild = false,
showOnHover = false,
...props
}: React.ComponentProps<'button'> & {
}: React.ComponentProps<"button"> & {
asChild?: boolean;
showOnHover?: boolean;
}) {
const Comp = asChild ? Slot : 'button';
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="sidebar-menu-action"
data-sidebar="menu-action"
className={cn(
'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 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:-inset-2 after:absolute md:after:hidden',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
"after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
showOnHover &&
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
className
)}
{...props}
@ -582,18 +581,18 @@ function SidebarMenuAction({
function SidebarMenuBadge({
className,
...props
}: React.ComponentProps<'div'>) {
}: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums',
'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
@ -605,7 +604,7 @@ function SidebarMenuSkeleton({
className,
showIcon = false,
...props
}: React.ComponentProps<'div'> & {
}: React.ComponentProps<"div"> & {
showIcon?: boolean;
}) {
// Random width between 50 to 90%.
@ -617,7 +616,7 @@ function SidebarMenuSkeleton({
<div
data-slot="sidebar-menu-skeleton"
data-sidebar="menu-skeleton"
className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
{...props}
>
{showIcon && (
@ -631,7 +630,7 @@ function SidebarMenuSkeleton({
data-sidebar="menu-skeleton-text"
style={
{
'--skeleton-width': width,
"--skeleton-width": width,
} as React.CSSProperties
}
/>
@ -639,14 +638,14 @@ function SidebarMenuSkeleton({
);
}
function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
return (
<ul
data-slot="sidebar-menu-sub"
data-sidebar="menu-sub"
className={cn(
'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5',
'group-data-[collapsible=icon]:hidden',
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
@ -657,12 +656,12 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
function SidebarMenuSubItem({
className,
...props
}: React.ComponentProps<'li'>) {
}: React.ComponentProps<"li">) {
return (
<li
data-slot="sidebar-menu-sub-item"
data-sidebar="menu-sub-item"
className={cn('group/menu-sub-item relative', className)}
className={cn("group/menu-sub-item relative", className)}
{...props}
/>
);
@ -670,16 +669,16 @@ function SidebarMenuSubItem({
function SidebarMenuSubButton({
asChild = false,
size = 'md',
size = "md",
isActive = false,
className,
...props
}: React.ComponentProps<'a'> & {
}: React.ComponentProps<"a"> & {
asChild?: boolean;
size?: 'sm' | 'md';
size?: "sm" | "md";
isActive?: boolean;
}) {
const Comp = asChild ? Slot : 'a';
const Comp = asChild ? Slot : "a";
return (
<Comp
@ -688,11 +687,11 @@ function SidebarMenuSubButton({
data-size={size}
data-active={isActive}
className={cn(
'-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
size === 'sm' && 'text-xs',
size === 'md' && 'text-sm',
'group-data-[collapsible=icon]:hidden',
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}

7
apps/webui/src/components/ui/skeleton.tsx
View File

@ -1,4 +1,5 @@
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils";
import type React from "react";
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
@ -7,7 +8,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
className={cn("bg-accent animate-pulse rounded-md", className)}
{...props}
/>
)
);
}
export { Skeleton }
export { Skeleton };

2
apps/webui/src/components/ui/slider.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Slider({
className,

2
apps/webui/src/components/ui/spinner.tsx
View File

@ -1,4 +1,4 @@
import { cn } from '@/styles/utils';
import { cn } from '@/infra/styles/utils';
import {
Loader,
LoaderCircle,

2
apps/webui/src/components/ui/switch.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Switch({
className,

2
apps/webui/src/components/ui/table.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Table({ className, ...props }: React.ComponentProps<"table">) {
return (

2
apps/webui/src/components/ui/tabs.tsx
View File

@ -3,7 +3,7 @@
import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Tabs({
className,

2
apps/webui/src/components/ui/textarea.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
return (

2
apps/webui/src/components/ui/toggle-group.tsx
View File

@ -4,7 +4,7 @@ import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
import { toggleVariants } from "@/components/ui/toggle"
const ToggleGroupContext = React.createContext<

2
apps/webui/src/components/ui/toggle.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",

2
apps/webui/src/components/ui/tooltip.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/styles/utils"
import { cn } from "@/infra/styles/utils"
function TooltipProvider({
delayDuration = 0,

0
apps/webui/src/errors/common.ts → apps/webui/src/infra/errors/common.ts
View File

0
apps/webui/src/hooks/use-mobile.ts → apps/webui/src/infra/hooks/use-mobile.ts
View File

0
apps/webui/src/platform/context.ts → apps/webui/src/infra/platform/context.ts
View File

0
apps/webui/src/platform/errors.ts → apps/webui/src/infra/platform/errors.ts
View File

0
apps/webui/src/platform/injection.ts → apps/webui/src/infra/platform/injection.ts
View File

0
apps/webui/src/config/app-layout.ts → apps/webui/src/infra/routes/nav.ts
View File

0
apps/webui/src/traits/router.ts → apps/webui/src/infra/routes/traits.ts
View File

2
apps/webui/src/utils/route/index.ts → apps/webui/src/infra/routes/utils.ts
View File

@ -1,5 +1,5 @@
import { guardRouteIndexAsNotFound } from '@/components/layout/app-not-found';
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { Outlet } from '@tanstack/react-router';
export interface BuildVirtualBranchRouteOptions {

0
apps/webui/src/storage/context.ts → apps/webui/src/infra/storage/context.ts
View File

4
apps/webui/src/storage/web-storage.service.ts → apps/webui/src/infra/storage/web-storage.service.ts
View File

@ -1,5 +1,5 @@
import { FeatureNotAvailablePlatformError } from '@/platform/errors';
import { DOCUMENT } from '@/platform/injection';
import { FeatureNotAvailablePlatformError } from '@/infra/platform/errors';
import { DOCUMENT } from '@/infra/platform/injection';
import { Injectable, inject } from '@outposts/injection-js';
@Injectable()

0
apps/webui/src/styles/context.ts → apps/webui/src/infra/styles/context.ts
View File

4
apps/webui/src/styles/theme.service.ts → apps/webui/src/infra/styles/theme.service.ts
View File

@ -1,5 +1,5 @@
import { DOCUMENT } from '@/platform/injection';
import { LocalStorageService } from '@/storage/web-storage.service';
import { DOCUMENT } from '@/infra/platform/injection';
import { LocalStorageService } from '@/infra/storage/web-storage.service';
import { Injectable, inject } from '@outposts/injection-js';
export type PreferColorSchemaType = 'dark' | 'light' | 'system';

0
apps/webui/src/styles/utils.ts → apps/webui/src/infra/styles/utils.ts
View File

8
apps/webui/src/main.tsx
View File

@ -1,4 +1,8 @@
import '@abraham/reflection';
import { provideAuth, setupAuthContext } from '@/app/auth/context';
import { providePlatform } from '@/infra/platform/context';
import { provideStorages } from '@/infra/storage/context';
import { provideStyles } from '@/infra/styles/context';
import { type Injector, ReflectiveInjector } from '@outposts/injection-js';
import { RouterProvider, createRouter } from '@tanstack/react-router';
import {
@ -7,12 +11,8 @@ import {
} from 'oidc-client-rx/adapters/react';
import { Suspense } from 'react';
import { createRoot } from 'react-dom/client';
import { provideAuth, setupAuthContext } from './auth/context';
import { AppNotFoundComponent } from './components/layout/app-not-found';
import { providePlatform } from './platform/context';
import { routeTree } from './routeTree.gen';
import { provideStorages } from './storage/context';
import { provideStyles } from './styles/context';
import './app.css';
// Create a new router instance

5
apps/webui/src/routes/__root.tsx
View File

@ -1,4 +1,7 @@
import type { RouteStateDataOption, RouterContext } from '@/traits/router';
import type {
RouteStateDataOption,
RouterContext,
} from '@/infra/routes/traits';
import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
import { Home } from 'lucide-react';

2
apps/webui/src/routes/_app/_explore/explore.tsx
View File

@ -1,4 +1,4 @@
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/_explore/explore')({

2
apps/webui/src/routes/_app/_explore/feed.tsx
View File

@ -1,4 +1,4 @@
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/_explore/feed')({

4
apps/webui/src/routes/_app/playground/graphql-api.lazy.tsx
View File

@ -1,10 +1,10 @@
import { useAuth } from '@/auth/hooks';
import { useAuth } from '@/app/auth/hooks';
import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit';
import { createLazyFileRoute } from '@tanstack/react-router';
import GraphiQL from 'graphiql';
import { useCallback } from 'react';
import 'graphiql/graphiql.css';
import { AuthMethodEnum } from '@/auth/config';
import { AuthMethodEnum } from '@/app/auth/config';
import { firstValueFrom } from 'rxjs';
export const Route = createLazyFileRoute('/_app/playground/graphql-api')({

2
apps/webui/src/routes/_app/playground/graphql-api.tsx
View File

@ -1,5 +1,5 @@
import { AppSkeleton } from '@/components/layout/app-skeleton';
import { buildLeafRouteStaticData } from '@/utils/route';
import { buildLeafRouteStaticData } from '@/infra/routes/utils';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/playground/graphql-api')({

2
apps/webui/src/routes/_app/playground/route.tsx
View File

@ -1,4 +1,4 @@
import { buildVirtualBranchRouteOptions } from '@/utils/route';
import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/playground')(

2
apps/webui/src/routes/_app/route.tsx
View File

@ -1,4 +1,4 @@
import { beforeLoadGuard } from '@/auth/guard';
import { beforeLoadGuard } from '@/app/auth/guard';
import { AppAside } from '@/components/layout/app-layout';
import { Outlet, createFileRoute } from '@tanstack/react-router';

2
apps/webui/src/routes/_app/settings/downloader.tsx
View File

@ -1,4 +1,4 @@
import { buildLeafRouteStaticData } from '@/utils/route';
import { buildLeafRouteStaticData } from '@/infra/routes/utils';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/settings/downloader')({

2
apps/webui/src/routes/_app/settings/route.tsx
View File

@ -1,4 +1,4 @@
import { buildVirtualBranchRouteOptions } from '@/utils/route';
import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/settings')(

8
apps/webui/src/routes/_app/subscriptions/create.tsx
View File

@ -1,4 +1,4 @@
import { useAuth } from '@/auth/hooks';
import { useAuth } from '@/app/auth/hooks';
import { Button } from '@/components/ui/button';
import {
Card,
@ -26,7 +26,7 @@ import {
SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { createFileRoute } from '@tanstack/react-router';
import { useNavigate } from '@tanstack/react-router';
import { useState } from 'react';
@ -116,8 +116,8 @@ function SubscriptionCreateRouteComponent() {
return (
<Card>
<CardHeader>
<CardTitle>Create Anime Subscription</CardTitle>
<CardDescription>Add a new anime subscription source</CardDescription>
<CardTitle>Create Bangumi Subscription</CardTitle>
<CardDescription>Add a new bangumi subscription source</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>

2
apps/webui/src/routes/_app/subscriptions/edit.$subscription-id.tsx
View File

@ -1,4 +1,4 @@
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute(

2
apps/webui/src/routes/_app/subscriptions/manage.tsx
View File

@ -1,4 +1,4 @@
import type { RouteStateDataOption } from '@/traits/router';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/subscriptions/manage')({

2
apps/webui/src/routes/_app/subscriptions/route.tsx
View File

@ -1,4 +1,4 @@
import { buildVirtualBranchRouteOptions } from '@/utils/route';
import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_app/subscriptions')(

4
apps/webui/src/routes/auth/oidc/callback.tsx
View File

@ -1,5 +1,5 @@
import { AppAuthMethod, AuthMethodEnum } from '@/auth/config';
import { useAuth } from '@/auth/hooks';
import { AppAuthMethod, AuthMethodEnum } from '@/app/auth/config';
import { useAuth } from '@/app/auth/hooks';
import { ProLink } from '@/components/ui/pro-link';
import { Spinner } from '@/components/ui/spinner';
import { createFileRoute } from '@tanstack/react-router';

33
biome.json
View File

@ -9,6 +9,9 @@
"style": {
"noNonNullAssertion": "off"
},
"security": {
"noDangerouslySetInnerHtml": "off"
},
"suspicious": {
"noExplicitAny": "off",
"noConsole": "off",
@ -28,6 +31,36 @@
}
}
},
"overrides": [
{
"include": ["apps/webui/src/components/ui/**/*"],
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"linter": {
"rules": {
"style": {
"useBlockStatements": "off",
"useImportType": "off"
},
"nursery": {
"noNestedTernary": "off",
"useSortedClasses": "off"
},
"a11y": {
"noRedundantRoles": "off",
"useFocusableInteractive": "off",
"useSemanticElements": "off"
},
"complexity": {
"noExcessiveCognitiveComplexity": "off"
}
}
}
}
],
"files": {
"ignore": [".vscode/*.json"]
}

2
dev.kdl
View File

@ -32,7 +32,7 @@ layout {
}
tab name="Recorder" {
pane command="watchexec" {
args "-w" "apps/recorder" "--" "cargo" "run" "-p" "recorder" "--bin" "recorder_cli" "--" "--environment" "development"
args "-r" "-w" "apps/recorder" "--" "cargo" "run" "-p" "recorder" "--bin" "recorder_cli" "--" "--environment" "development"
}
}
tab name="Deps" {

4
justfile
View File

@ -11,9 +11,9 @@ dev-webui:
dev-proxy:
pnpm run --filter=proxy dev
# bacon recorder # crash on windows
# crash on windows
dev-recorder:
watchexec -w apps/recorder -- cargo run -p recorder --bin recorder_cli -- --environment development
watchexec -r -w apps/recorder -- cargo run -p recorder --bin recorder_cli -- --environment development
dev-deps:
docker compose -f devdeps.compose.yaml up