xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: restore frontend ci for better-auth upgrade

This commit is contained in:
DIYgod 2026-03-16 21:35:14 +08:00
parent 397049014f
commit 3f31f505f8
45 changed files with 171 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.prettierrc.mjs
View File

@ -1,3 +1,4 @@
/** @type {import("prettier").Config & import("prettier-plugin-tailwindcss").PluginOptions} */
export default {
semi: false,
singleQuote: false,
@ -6,4 +7,25 @@ export default {
trailingComma: "all",
objectWrap: "preserve",
plugins: ["prettier-plugin-tailwindcss"],
tailwindConfig: "./apps/desktop/tailwind.config.ts",
overrides: [
{
files: "apps/mobile/**/*.{css,js,jsx,ts,tsx}",
options: {
tailwindConfig: "./apps/mobile/tailwind.config.ts",
},
},
{
files: "apps/mobile/web-app/html-renderer/**/*.{css,js,jsx,ts,tsx}",
options: {
tailwindConfig: "./apps/mobile/web-app/html-renderer/tailwind.config.ts",
},
},
{
files: "apps/ssr/**/*.{css,html,js,jsx,ts,tsx}",
options: {
tailwindConfig: "./apps/ssr/tailwind.config.ts",
},
},
],
}

2
apps/desktop/AGENTS.md
View File

@ -173,7 +173,7 @@ For hover states on buttons or interactive areas within glass containers:
}}
>
{/* Subtle shine effect */}
<div className="via-gray/5 absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent to-transparent transition-transform duration-700 group-hover:translate-x-full dark:via-white/5" />
<div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-gray/5 to-transparent transition-transform duration-700 group-hover:translate-x-full dark:via-white/5" />
</button>
```

3
apps/desktop/layer/main/src/ipc/services/auth.ts
View File

@ -22,7 +22,8 @@ export class AuthService extends IpcService {
const apiURL = env.VITE_API_URL
const url = new URL(apiURL)
const isSecure = url.protocol === "https:" || url.hostname === "localhost" || url.hostname === "127.0.0.1"
const isSecure =
url.protocol === "https:" || url.hostname === "localhost" || url.hostname === "127.0.0.1"
const isLocalhost = url.hostname === "localhost" || url.hostname === "127.0.0.1"
const cookieNames = [
BETTER_AUTH_COOKIE_NAME_SESSION_TOKEN,

7
apps/desktop/layer/renderer/src/lib/api-client.ts
View File

@ -1,5 +1,5 @@
import { env } from "@follow/shared/env.desktop"
import { IN_ELECTRON } from "@follow/shared/constants"
import { env } from "@follow/shared/env.desktop"
import { whoami } from "@follow/store/user/getters"
import { userActions } from "@follow/store/user/store"
import { createDesktopAPIHeaders } from "@follow/utils/headers"
@ -9,8 +9,7 @@ import PKG from "@pkg"
import { NetworkStatus, setApiStatus } from "~/atoms/network"
import { setLoginModalShow } from "~/atoms/user"
import { getAuthSessionToken } from "./client-session"
import { getClientId, getSessionId } from "./client-session"
import { getAuthSessionToken, getClientId, getSessionId } from "./client-session"
export const followClient = new FollowClient({
credentials: "include",
@ -34,7 +33,7 @@ followClient.addRequestInterceptor(async (ctx) => {
if (authSessionToken && !headers.has("Cookie") && !headers.has("cookie")) {
headers.set(
"Cookie",
`__Secure-better-auth.session_token=${authSessionToken}; better-auth.session_token=${authSessionToken}`
`__Secure-better-auth.session_token=${authSessionToken}; better-auth.session_token=${authSessionToken}`,
)
}

23
apps/desktop/layer/renderer/src/modules/auth/Form.tsx
View File

@ -372,17 +372,20 @@ export function RegisterForm({
headers,
}),
)
: await signUp.email({
email: values.email,
password: values.password,
name: values.email.split("@")[0]!,
callbackURL: "/",
}, {
onError(context) {
toast.error(context.error.message)
: await signUp.email(
{
email: values.email,
password: values.password,
name: values.email.split("@")[0]!,
callbackURL: "/",
},
headers,
})
{
onError(context) {
toast.error(context.error.message)
},
headers,
},
)
if (result?.error) {
return result

41
apps/ssr/client/pages/(login)/register.tsx
View File

@ -69,27 +69,30 @@ function RegisterForm() {
try {
const recaptchaToken = await requestRecaptchaToken("ssr_register")
await signUp.email({
email: values.email,
password: values.password,
name: values.email.split("@")[0]!,
callbackURL: "/",
}, {
onSuccess() {
tracker.register({
type: "email",
})
navigate("/login")
await signUp.email(
{
email: values.email,
password: values.password,
name: values.email.split("@")[0]!,
callbackURL: "/",
},
onError(context) {
toast.error(context.error.message)
{
onSuccess() {
tracker.register({
type: "email",
})
navigate("/login")
},
onError(context) {
toast.error(context.error.message)
},
headers: recaptchaToken
? {
"x-token": `r3:${recaptchaToken}`,
}
: undefined,
},
headers: recaptchaToken
? {
"x-token": `r3:${recaptchaToken}`,
}
: undefined,
})
)
} finally {
setIsSubmitting(false)
}

2
apps/ssr/tailwind.config.ts
View File

@ -1,7 +1,7 @@
import { extendConfig } from "@follow/configs/tailwindcss/web"
import daisyui from "daisyui"
import { withUIKit } from "tailwindcss-uikit-colors/macos"
import type { Config } from "tailwindcss"
import { withUIKit } from "tailwindcss-uikit-colors/macos"
/** @type {import('tailwindcss').Config} */
export default withUIKit(

8
eslint.config.mjs
View File

@ -37,6 +37,14 @@ export default defineConfig(
},
rules: {
"no-debug/no-debug-stack": "error",
"tailwindcss/classnames-order": "off",
"tailwindcss/enforces-negative-arbitrary-values": "off",
"tailwindcss/enforces-shorthand": "off",
"tailwindcss/migration-from-tailwind-2": "off",
"tailwindcss/no-arbitrary-value": "off",
"tailwindcss/no-contradicting-classname": "off",
"tailwindcss/no-custom-classname": "off",
"tailwindcss/no-unnecessary-arbitrary-value": "off",
"@eslint-react/no-clone-element": 0,
"@eslint-react/hooks-extra/no-direct-set-state-in-use-effect": 0,
"@eslint-react/dom/no-flush-sync": 1,

2
packages/internal/components/src/ui/avatar/index.tsx
View File

@ -42,7 +42,7 @@ export const AvatarFallback = ({
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"bg-material-opaque flex size-full items-center justify-center rounded-full",
"flex size-full items-center justify-center rounded-full bg-material-opaque",
className,
)}
{...props}

6
packages/internal/components/src/ui/button/action-button.tsx
View File

@ -108,8 +108,8 @@ export const ActionButton = ({
className={cn(
"no-drag-region pointer-events-auto inline-flex items-center justify-center",
active && typeof icon !== "function" && "bg-zinc-500/15 hover:bg-zinc-500/20",
"hover:bg-theme-item-hover data-[state=open]:bg-theme-item-active rounded-md duration-200",
"focus-visible:ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
"rounded-md duration-200 hover:bg-theme-item-hover data-[state=open]:bg-theme-item-active",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
clickableDisabled && "cursor-not-allowed opacity-50",
shouldHighlightMotion &&
@ -188,7 +188,7 @@ export const ActionButton = ({
)}
</div>
{tooltipDescription ? (
<div className="text-text-secondary text-body">{tooltipDescription}</div>
<div className="text-body text-text-secondary">{tooltipDescription}</div>
) : null}
</TooltipContent>
</TooltipPortal>

2
packages/internal/components/src/ui/button/index.tsx
View File

@ -129,7 +129,7 @@ export const IconButton = ({
styledButtonVariant({
variant: "ghost",
}),
"bg-accent/10 hover:bg-accent/20 active:bg-accent/30 dark:bg-accent/20 dark:hover:bg-accent/30 dark:active:bg-accent/40 group relative gap-2 px-4 transition-all duration-300",
"group relative gap-2 bg-accent/10 px-4 transition-all duration-300 hover:bg-accent/20 active:bg-accent/30 dark:bg-accent/20 dark:hover:bg-accent/30 dark:active:bg-accent/40",
rest.className,
)}
>

4
packages/internal/components/src/ui/card/index.tsx
View File

@ -8,7 +8,7 @@ const Card = ({
}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement | null> }) => (
<div
ref={ref}
className={cn("text-text bg-material-ultra-thin rounded-lg border", className)}
className={cn("rounded-lg border bg-material-ultra-thin text-text", className)}
{...props}
/>
)
@ -44,7 +44,7 @@ const CardDescription = ({
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref?: React.Ref<HTMLParagraphElement | null>
}) => <p ref={ref} className={cn("text-text-secondary text-sm", className)} {...props} />
}) => <p ref={ref} className={cn("text-sm text-text-secondary", className)} {...props} />
CardDescription.displayName = "CardDescription"
const CardContent = ({

2
packages/internal/components/src/ui/checkbox/index.tsx
View File

@ -38,7 +38,7 @@ function Checkbox({
<m.button
data-slot="checkbox"
className={cn(
"bg-fill cursor-checkbox focus-visible:ring-border data-[state=checked]:bg-accent peer flex shrink-0 items-center justify-center rounded-sm transition-colors duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
"peer flex shrink-0 cursor-checkbox items-center justify-center rounded-sm bg-fill transition-colors duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=checked]:text-white",
size === "sm" ? "size-4" : "size-5",
indeterminate && "bg-accent text-white",
className,

2
packages/internal/components/src/ui/collapse/CollapseCss.tsx
View File

@ -118,7 +118,7 @@ export const CollapseCss: FC<CollapseProps> = ({
>
<span className="w-0 shrink grow truncate">{title}</span>
{!hideArrow && (
<div className="text-text-secondary inline-flex shrink-0 items-center">
<div className="inline-flex shrink-0 items-center text-text-secondary">
<i
className={cn(
"i-mingcute-down-line transition-transform duration-300 ease-in-out",

24
packages/internal/components/src/ui/context-menu/context-menu.tsx
View File

@ -36,7 +36,7 @@ const ContextMenuSubTrigger = ({
<ContextMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"cursor-menu data-[state=open]:bg-mix-background/accent-9/1 data-[state=open]:text-accent data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none",
"flex cursor-menu select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none data-[highlighted]:text-accent data-[state=open]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 data-[state=open]:bg-mix-background/accent-9/1",
"h-[28px]",
inset && "pl-8",
"center gap-2",
@ -62,13 +62,13 @@ const ContextMenuSubContent = ({
<ContextMenuPrimitive.SubContent
ref={ref}
className={cn(
"text-text text-body",
"text-body text-text",
"min-w-32 overflow-hidden",
"rounded-[6px] p-1",
"backdrop-blur-2xl",
"z-[61]",
"relative",
"dark:border-border/50 dark:border",
"dark:border dark:border-border/50",
className,
)}
style={styles.content}
@ -97,11 +97,11 @@ const ContextMenuContent = ({
<ContextMenuPrimitive.Content
ref={ref}
className={cn(
"text-text z-[60] min-w-32 overflow-hidden rounded-[6px] p-1",
"z-[60] min-w-32 overflow-hidden rounded-[6px] p-1 text-text",
"backdrop-blur-2xl",
"motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
"text-body motion-scale-in-75 motion-duration-150 lg:animate-none",
"relative",
"dark:border-border/50 dark:border",
"dark:border dark:border-border/50",
className,
)}
style={styles.content}
@ -130,8 +130,8 @@ const ContextMenuItem = ({
<ContextMenuPrimitive.Item
ref={ref}
className={cn(
"cursor-menu focus:bg-accent/30 relative flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 focus-within:outline-transparent",
"relative flex cursor-menu select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none focus:bg-accent/30 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus-within:outline-transparent data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1",
"h-[28px]",
inset && "pl-8",
className,
@ -153,8 +153,8 @@ const ContextMenuCheckboxItem = ({
<ContextMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"cursor-checkbox focus:bg-accent/30 relative flex select-none items-center rounded-[5px] px-8 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 focus-within:text-accent focus-within:outline-transparent",
"relative flex cursor-checkbox select-none items-center rounded-[5px] px-8 py-1.5 outline-none focus:bg-accent/30 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus-within:text-accent focus-within:outline-transparent data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1",
"h-[28px]",
className,
)}
@ -181,7 +181,7 @@ const ContextMenuLabel = ({
} & { ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Label> | null> }) => (
<ContextMenuPrimitive.Label
ref={ref}
className={cn("text-text px-2 py-1.5 font-semibold", inset && "pl-8", className)}
className={cn("px-2 py-1.5 font-semibold text-text", inset && "pl-8", className)}
{...props}
/>
)
@ -194,7 +194,7 @@ const ContextMenuSeparator = ({
ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Separator> | null>
}) => (
<ContextMenuPrimitive.Separator
className="backdrop-blur-background mx-2 my-1 h-px"
className="mx-2 my-1 h-px backdrop-blur-background"
asChild
ref={ref}
{...props}

2
packages/internal/components/src/ui/divider/PanelSplitter.tsx
View File

@ -39,7 +39,7 @@ export const PanelSplitter = (
tabIndex={-1}
{...rest}
className={cn(
"active:!bg-accent absolute inset-0 z-[3] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 hover:dark:bg-neutral-500",
"absolute inset-0 z-[3] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500",
isDragging ? "bg-accent" : "",
className,
)}

2
packages/internal/components/src/ui/drop-zone/index.tsx
View File

@ -65,7 +65,7 @@ export const DropZone = ({ id, accept, children, className, onDrop }: DropZonePr
className={cn(
"center flex h-[100px] w-full cursor-pointer rounded-md border border-dashed",
isDragging ? "border-accent bg-accent/10" : "",
"hover:border-accent/50 duration-200",
"duration-200 hover:border-accent/50",
className,
)}
htmlFor={id}

2
packages/internal/components/src/ui/effect/MagneticHoverEffect.tsx
View File

@ -64,7 +64,7 @@ export const MagneticHoverEffect = <T extends React.ElementType = "div">({
"relative",
"inline-block transition-transform duration-200 ease-out will-change-transform",
"hover:before:bg-fill-tertiary",
"before:backdrop-blur-background before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:scale-0 before:rounded-xl before:opacity-0 before:transition-all before:duration-200 before:[transform-origin:var(--origin-x)_var(--origin-y)] hover:before:scale-100 hover:before:opacity-100",
"before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:scale-0 before:rounded-xl before:opacity-0 before:backdrop-blur-background before:transition-all before:duration-200 before:[transform-origin:var(--origin-x)_var(--origin-y)] hover:before:scale-100 hover:before:opacity-100",
rest.className,
)}
>

4
packages/internal/components/src/ui/form/index.tsx
View File

@ -126,7 +126,7 @@ const FormDescription = ({
<p
ref={ref}
id={formDescriptionId}
className={cn("text-text-secondary text-xs", className)}
className={cn("text-xs text-text-secondary", className)}
{...props}
/>
)
@ -152,7 +152,7 @@ const FormMessage = ({
<p
ref={ref}
id={formMessageId}
className={cn("text-red text-sm font-medium", className)}
className={cn("text-sm font-medium text-red", className)}
{...props}
>
{body}

4
packages/internal/components/src/ui/hover-card/index.tsx
View File

@ -23,8 +23,8 @@ const HoverCardContent = ({
align={align}
sideOffset={sideOffset}
className={cn(
"bg-material-medium backdrop-blur-background border-border text-text z-[60] w-fit overflow-hidden rounded-md border shadow-lg",
"motion-scale-in-95 motion-duration-200 text-body",
"z-[60] w-fit overflow-hidden rounded-md border border-border bg-material-medium text-text shadow-lg backdrop-blur-background",
"text-body motion-scale-in-95 motion-duration-200",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}

6
packages/internal/components/src/ui/input/DateTimePicker.tsx
View File

@ -235,7 +235,7 @@ export const DateTimePicker = memo<DateTimePickerProps>(
{viewMode === "days" && (
<>
{/* Weekdays */}
<div className="text-text-secondary mb-1 grid grid-cols-7 gap-0.5 text-center text-xs">
<div className="mb-1 grid grid-cols-7 gap-0.5 text-center text-xs text-text-secondary">
{weekDays.map((day) => (
<div key={day} className="flex h-6 items-center justify-center font-medium">
{day.slice(0, 2)}
@ -362,9 +362,9 @@ export const DateTimePicker = memo<DateTimePickerProps>(
{/* Time Selection (only single mode) */}
{!isRangeMode && (
<div className="border-border -mx-2 border-t px-2 pt-2">
<div className="-mx-2 border-t border-border px-2 pt-2">
<div className="flex items-center justify-between">
<span className="text-text-secondary text-xs font-medium">Time</span>
<span className="text-xs font-medium text-text-secondary">Time</span>
<TimeSelect
value={currentDateTime.format("HH:mm")}
onChange={handleTimeChange}

4
packages/internal/components/src/ui/input/Input.tsx
View File

@ -20,9 +20,9 @@ export const Input = ({
className={cn(
"min-w-0 flex-auto appearance-none rounded-lg text-sm",
"bg-theme-background px-3 py-[calc(theme(spacing.2)-1px)]",
"ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
"ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
"focus:!bg-accent/5",
"border-border border",
"border border-border",
"placeholder:text-text-tertiary dark:bg-zinc-700/[0.15] dark:text-zinc-200",
"hover:border-accent/60",
props.type === "password" && "font-mono placeholder:font-sans",

8
packages/internal/components/src/ui/input/InputV2.tsx
View File

@ -42,7 +42,7 @@ export const InputV2 = ({
return (
<div className="group relative">
{icon && (
<div className="text-text-tertiary absolute left-3 top-1/2 flex -translate-y-1/2 items-center justify-center">
<div className="absolute left-3 top-1/2 flex -translate-y-1/2 items-center justify-center text-text-tertiary">
{icon}
</div>
)}
@ -52,9 +52,9 @@ export const InputV2 = ({
className={cn(
"min-w-0 flex-auto appearance-none rounded-lg text-sm",
"bg-theme-background py-[calc(theme(spacing.2)-1px)]",
"ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
"ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
"focus:!bg-accent/5",
"border-border border",
"border border-border",
"placeholder:text-text-tertiary dark:bg-zinc-700/[0.15] dark:text-zinc-200",
"hover:border-accent/60",
props.type === "password" && "font-mono placeholder:font-sans",
@ -73,7 +73,7 @@ export const InputV2 = ({
<button
type="button"
onClick={handleClear}
className="text-text-tertiary hover:text-text-secondary absolute right-3 top-1/2 hidden -translate-y-1/2 items-center transition-colors group-focus-within:flex"
className="absolute right-3 top-1/2 hidden -translate-y-1/2 items-center text-text-tertiary transition-colors hover:text-text-secondary group-focus-within:flex"
tabIndex={-1}
>
<i className="i-mingcute-close-circle-fill" />

8
packages/internal/components/src/ui/input/OTP.tsx
View File

@ -46,8 +46,8 @@ const InputOTPSlot = ({
<div
ref={ref}
className={cn(
"border-border relative flex size-9 items-center justify-center border-y border-r font-mono text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "ring-accent z-10 ring-1",
"relative flex size-9 items-center justify-center border-y border-r border-border font-mono text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "z-10 ring-1 ring-accent",
className,
)}
{...props}
@ -55,7 +55,7 @@ const InputOTPSlot = ({
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
<div className="bg-foreground h-4 w-px animate-caret-blink duration-1000" />
</div>
)}
</div>
@ -76,7 +76,7 @@ const InputOTPSeparator = ({
role="separator"
{...props}
>
<div className="bg-border h-1 w-3 rounded-full" />
<div className="h-1 w-3 rounded-full bg-border" />
</div>
)
InputOTPSeparator.displayName = "InputOTPSeparator"

6
packages/internal/components/src/ui/input/TextAreaWrapper.tsx
View File

@ -89,11 +89,11 @@ export const TextAreaWrapper = ({
return (
<div
className={cn(
"ring-accent/20 group relative flex h-full overflow-hidden border ring-0 duration-200",
"group relative flex h-full overflow-hidden border ring-0 ring-accent/20 duration-200",
roundedMap[rounded],
// Border states
"hover:border-accent/60 border-transparent",
"border-transparent hover:border-accent/60",
isFocused && "!border-accent/80 ring-2",
// Theme colors
@ -111,7 +111,7 @@ export const TextAreaWrapper = ({
{bordered && (
<div
className={clsx(
"border-border pointer-events-none absolute inset-0 z-0 border",
"pointer-events-none absolute inset-0 z-0 border border-border",
roundedMap[rounded],
)}
aria-hidden="true"

6
packages/internal/components/src/ui/input/TimeSelect.tsx
View File

@ -68,7 +68,7 @@ export const TimeSelect = memo<TimeSelectProps>(
<Select disabled={disabled} value={hourValue} onValueChange={(h) => update(h, minuteValue)}>
<SelectTrigger
aria-label={label ? `${label} hour` : "Hour"}
className="bg-material-opaque hover:bg-mix-accent/background-1/4 h-6 w-12 justify-between rounded-[4px] border-0 px-1.5 py-0 text-xs"
className="h-6 w-12 justify-between rounded-[4px] border-0 bg-material-opaque px-1.5 py-0 text-xs hover:bg-mix-accent/background-1/4"
>
<SelectValue />
</SelectTrigger>
@ -80,11 +80,11 @@ export const TimeSelect = memo<TimeSelectProps>(
))}
</SelectContent>
</Select>
<span className="text-text-secondary mx-0.5 select-none text-xs">:</span>
<span className="mx-0.5 select-none text-xs text-text-secondary">:</span>
<Select disabled={disabled} value={minuteValue} onValueChange={(m) => update(hourValue, m)}>
<SelectTrigger
aria-label={label ? `${label} minute` : "Minute"}
className="bg-material-opaque hover:bg-mix-accent/background-1/4 h-6 w-12 justify-between rounded-[4px] border-0 px-1.5 py-0 text-xs"
className="h-6 w-12 justify-between rounded-[4px] border-0 bg-material-opaque px-1.5 py-0 text-xs hover:bg-mix-accent/background-1/4"
>
<SelectValue />
</SelectTrigger>

4
packages/internal/components/src/ui/json-highlighter/index.tsx
View File

@ -47,7 +47,7 @@ export const JsonHighlighter = ({
<pre
ref={ref}
className={cn(
"bg-material-ultra-thin text-text overflow-auto rounded-md border p-4 text-sm",
"overflow-auto rounded-md border bg-material-ultra-thin p-4 text-sm text-text",
"font-mono leading-relaxed",
className,
)}
@ -57,7 +57,7 @@ export const JsonHighlighter = ({
<code className="block">
{showLineNumbers ? (
<div className="flex">
<div className="text-text-tertiary border-fill mr-4 select-none border-r pr-4">
<div className="mr-4 select-none border-r border-fill pr-4 text-text-tertiary">
{lines.map((_, index) => (
<div key={index} className="text-right">
{index + 1}

4
packages/internal/components/src/ui/kbd/Kbd.tsx
View File

@ -77,7 +77,7 @@ export const KbdCombined: FC<{
)}
{i !== keys.length - 1 && (
<span>
<i className="i-mgc-line-cute-re text-text-secondary size-[0.75em] shrink-0 origin-center translate-y-[0.15em] rotate-[-25deg]" />
<i className="i-mgc-line-cute-re size-[0.75em] shrink-0 origin-center translate-y-[0.15em] rotate-[-25deg] text-text-secondary" />
</span>
)}
</Fragment>
@ -345,7 +345,7 @@ export const Kbd: FC<{
const KbdElement = (
<kbd
className={cn(
"kbd text-text box-border h-5 space-x-1 font-sans text-[0.7rem] tabular-nums transition-all duration-200",
"kbd box-border h-5 space-x-1 font-sans text-[0.7rem] tabular-nums text-text transition-all duration-200",
wrapButton && isKeyPressed && "scale-95 opacity-80",
className,
)}

4
packages/internal/components/src/ui/lexical-rich-editor/LexicalRichEditor.tsx
View File

@ -117,13 +117,13 @@ export const LexicalRichEditor = function LexicalRichEditor({
<ContentEditable
onContextMenu={stopPropagation}
className={cn(
"scrollbar-none text-text placeholder:text-text-secondary size-full cursor-text",
"size-full cursor-text text-text scrollbar-none placeholder:text-text-secondary",
"size-full resize-none bg-transparent",
"text-sm !outline-none transition-all duration-200 focus:outline-none",
)}
aria-placeholder={placeholder}
placeholder={
<div className="text-text-secondary pointer-events-none absolute left-0 top-0 text-sm">
<div className="pointer-events-none absolute left-0 top-0 text-sm text-text-secondary">
{placeholder}
</div>
}

2
packages/internal/components/src/ui/markdown/html.tsx
View File

@ -28,7 +28,7 @@ export function Html({ content, scrollEnabled = true, ...options }: HtmlProps) {
}, [scrollEnabled])
return (
<article className="prose dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold !max-w-full px-2">
<article className="prose !max-w-full px-2 dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold">
{res.toContent()}
</article>
)

8
packages/internal/components/src/ui/navigation-menu/index.tsx
View File

@ -69,7 +69,7 @@ const NavigationMenuContent = ({
<NavigationMenuPrimitive.Content
ref={ref}
className={cn(
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
className,
)}
{...props}
@ -89,7 +89,7 @@ const NavigationMenuViewport = ({
<div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport
className={cn(
"bg-material-medium backdrop-blur-background text-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
"relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-material-medium text-text shadow-lg backdrop-blur-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
className,
)}
ref={ref}
@ -109,12 +109,12 @@ const NavigationMenuIndicator = ({
<NavigationMenuPrimitive.Indicator
ref={ref}
className={cn(
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
className,
)}
{...props}
>
<div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
<div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
</NavigationMenuPrimitive.Indicator>
)
NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName

4
packages/internal/components/src/ui/popover/index.tsx
View File

@ -27,9 +27,9 @@ const PopoverContent = ({
align={align}
sideOffset={sideOffset}
className={cn(
"bg-background/90 backdrop-blur-background text-text z-[60] overflow-hidden rounded-[6px] border p-4",
"z-[60] overflow-hidden rounded-[6px] border bg-background/90 p-4 text-text backdrop-blur-background",
"shadow-context-menu",
"motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
"text-body motion-scale-in-75 motion-duration-150 lg:animate-none",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}

4
packages/internal/components/src/ui/progress/index.tsx
View File

@ -14,11 +14,11 @@ const Progress = ({
}) => (
<ProgressPrimitive.Root
ref={ref}
className={cn("bg-accent/20 relative h-2 w-full overflow-hidden rounded-full", className)}
className={cn("relative h-2 w-full overflow-hidden rounded-full bg-accent/20", className)}
{...props}
>
<ProgressPrimitive.Indicator
className="bg-accent size-full flex-1 transition-all"
className="size-full flex-1 bg-accent transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>

2
packages/internal/components/src/ui/radio-group/RadioCard.tsx
View File

@ -32,7 +32,7 @@ export const RadioCard: FC<
"flex cursor-pointer items-center rounded-md p-2",
"border",
"ring-accent/20 ring-0 duration-200",
"ring-0 ring-accent/20 duration-200",
selected && "border-accent bg-accent/5 font-medium outline-none ring-2",
wrapperClassName,

2
packages/internal/components/src/ui/radio-group/motion.tsx
View File

@ -84,7 +84,7 @@ function RadioGroupItem({
type="button"
data-slot="radio-group-item"
className={cn(
"border-border text-accent ring-material-opaque focus-visible:ring-border flex aspect-square size-5 items-center justify-center rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex aspect-square size-5 items-center justify-center rounded-full border border-border text-accent ring-material-opaque focus:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
whileHover={{ scale: 1.05 }}

8
packages/internal/components/src/ui/segment/index.tsx
View File

@ -35,7 +35,7 @@ export const SegmentGroup = (props: ComponentType<SegmentGroupProps>) => {
<div
role="tablist"
className={cn(
"bg-fill-tertiary text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
"inline-flex h-9 items-center justify-center rounded-lg bg-fill-tertiary p-1 text-text-secondary outline-none",
className,
)}
tabIndex={0}
@ -59,8 +59,8 @@ export const SegmentItem: Component<{
type="button"
role="tab"
className={cn(
"ring-offset-background data-[state=active]:text-text relative inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"focus-visible:ring-accent/30 h-full rounded-md",
"relative inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-text",
"h-full rounded-md focus-visible:ring-accent/30",
className,
)}
tabIndex={-1}
@ -77,7 +77,7 @@ export const SegmentItem: Component<{
layout
transition={Spring.presets.smooth}
layoutId={layoutId}
className="bg-background absolute inset-0 z-0 rounded-md shadow"
className="absolute inset-0 z-0 rounded-md bg-background shadow"
/>
)}
</button>

22
packages/internal/components/src/ui/select/index.tsx
View File

@ -24,13 +24,13 @@ const SelectTrigger = ({
ref={ref}
className={cn(
"flex w-full items-center justify-between whitespace-nowrap rounded-lg bg-transparent",
"focus-within:ring-material-medium outline-none transition-all duration-200 focus-within:outline-transparent focus-within:ring-2",
"border-border hover:border-fill border",
"outline-none transition-all duration-200 focus-within:outline-transparent focus-within:ring-2 focus-within:ring-material-medium",
"border border-border hover:border-fill",
size === "sm" ? "h-8 px-3 text-sm" : "h-9 px-3.5 py-2 text-sm",
"placeholder:text-text-secondary",
"disabled:cursor-not-allowed disabled:opacity-50",
"[&>span]:line-clamp-1",
"shadow-material-thin shadow-sm hover:shadow",
"shadow-sm shadow-material-thin hover:shadow",
className,
props.disabled && "cursor-not-allowed opacity-30",
)}
@ -53,7 +53,7 @@ const SelectScrollUpButton = ({
}) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn("cursor-menu flex items-center justify-center py-1", className)}
className={cn("flex cursor-menu items-center justify-center py-1", className)}
{...props}
>
<i className="i-mingcute-up-line size-3.5" />
@ -70,7 +70,7 @@ const SelectScrollDownButton = ({
}) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn("cursor-menu flex items-center justify-center py-1", className)}
className={cn("flex cursor-menu items-center justify-center py-1", className)}
{...props}
>
<i className="i-mingcute-down-line size-3.5" />
@ -91,9 +91,9 @@ const SelectContent = ({
<SelectPrimitive.Content
ref={ref}
className={cn(
"bg-material-medium backdrop-blur-background text-text z-[60] max-h-96 min-w-32 overflow-hidden rounded-[6px] border p-1",
"z-[60] max-h-96 min-w-32 overflow-hidden rounded-[6px] border bg-material-medium p-1 text-text backdrop-blur-background",
"shadow-context-menu",
"motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
"text-body motion-scale-in-75 motion-duration-150 lg:animate-none",
className,
)}
position={position}
@ -125,7 +125,7 @@ const SelectLabel = ({
} & { ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Label> | null> }) => (
<SelectPrimitive.Label
ref={ref}
className={cn("text-text px-2 py-1.5 font-semibold", inset && "pl-8", className)}
className={cn("px-2 py-1.5 font-semibold text-text", inset && "pl-8", className)}
{...props}
/>
)
@ -143,8 +143,8 @@ const SelectItem = ({
<SelectPrimitive.Item
ref={ref}
className={cn(
"cursor-menu focus:bg-theme-selection-active focus:text-theme-selection-foreground relative flex select-none items-center rounded-[5px] px-2.5 py-1 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"data-[highlighted]:bg-theme-selection-hover focus-within:outline-transparent",
"relative flex cursor-menu select-none items-center rounded-[5px] px-2.5 py-1 outline-none focus:bg-theme-selection-active focus:text-theme-selection-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus-within:outline-transparent data-[highlighted]:bg-theme-selection-hover",
"h-[28px] w-full",
inset && "pl-8",
className,
@ -168,7 +168,7 @@ const SelectSeparator = ({
ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator> | null>
}) => (
<SelectPrimitive.Separator
className="backdrop-blur-background mx-2 my-1 h-px"
className="mx-2 my-1 h-px backdrop-blur-background"
asChild
ref={ref}
{...props}

6
packages/internal/components/src/ui/select/responsive.tsx
View File

@ -64,9 +64,9 @@ export const ResponsiveSelect = ({
data-testid={triggerTestId}
onClick={() => realSelectRef?.click()}
className={cn(
"placeholder:text-text-secondary flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
"border-border border",
"flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent placeholder:text-text-secondary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
"border border-border",
size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",
"hover:border-accent/80",
"relative",

4
packages/internal/components/src/ui/sheet/Sheet.tsx
View File

@ -114,7 +114,7 @@ export const PresentSheet = ({
}}
aria-describedby={undefined}
className={cn(
"bg-theme-background fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-3rem)] flex-col rounded-t-[10px] border-t pt-4",
"fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-3rem)] flex-col rounded-t-[10px] border-t bg-theme-background pt-4",
modalClassName,
)}
>
@ -153,7 +153,7 @@ export const PresentSheet = ({
<RootPortalContext value={contentInnerRef.current!}>
<div
className={cn(
"pb-safe-offset-4 flex grow flex-col overflow-auto px-4",
"flex grow flex-col overflow-auto px-4 pb-safe-offset-4",
contentClassName,
)}
>

2
packages/internal/components/src/ui/shiny-text/ShinyText.tsx
View File

@ -21,7 +21,7 @@ export const ShinyText: FC<AnimatedShinyTextProps> = ({
} as CSSProperties
}
className={cn(
"text-text-secondary mx-auto max-w-md",
"mx-auto max-w-md text-text-secondary",
// Shine effect
"bg-clip-text bg-repeat-x",

2
packages/internal/components/src/ui/skeleton/index.tsx
View File

@ -1,5 +1,5 @@
import { cn } from "@follow/utils/utils"
export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return <div className={cn("bg-fill-tertiary animate-pulse rounded-md", className)} {...props} />
return <div className={cn("animate-pulse rounded-md bg-fill-tertiary", className)} {...props} />
}

2
packages/internal/components/src/ui/slider/index.tsx
View File

@ -37,7 +37,7 @@ export const Slider = ({
</SliderPrimitive.Track>
<SliderPrimitive.Thumb
className={cn(
"bg-background block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
"block size-4 rounded-full border bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
variant === "primary"
? "border-accent/50 focus-visible:ring-accent"
: "border-zinc-400 focus-visible:ring-zinc-400 dark:border-zinc-500 dark:focus-visible:ring-zinc-500",

4
packages/internal/components/src/ui/switch/index.tsx
View File

@ -71,7 +71,7 @@ function Switch({
onChange={handleChange}
style={{ width: switchWidth, padding: thumbPadding }}
className={cn(
"focus-visible:ring-border cursor-switch data-[checked]:bg-accent bg-fill relative flex shrink-0 items-center justify-start rounded-full transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"relative flex shrink-0 cursor-switch items-center justify-start rounded-full bg-fill transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-accent",
size === "sm" ? "h-5" : "h-6",
className,
)}
@ -117,7 +117,7 @@ function Switch({
data-slot="switch-thumb"
whileTap="tab"
className={cn(
"bg-background z-[1] flex items-center justify-center rounded-full text-neutral-500 shadow-lg ring-0 dark:text-neutral-400",
"z-[1] flex items-center justify-center rounded-full bg-background text-neutral-500 shadow-lg ring-0 dark:text-neutral-400",
size === "sm" ? "[&_svg]:size-2.5" : "[&_svg]:size-3",
"absolute",
)}

8
packages/internal/components/src/ui/table/index.tsx
View File

@ -45,7 +45,7 @@ const TableFooter = ({
}) => (
<tfoot
ref={ref}
className={cn("bg-material-thin border-t font-medium [&>tr]:last:border-b-0", className)}
className={cn("border-t bg-material-thin font-medium [&>tr]:last:border-b-0", className)}
{...props}
/>
)
@ -60,7 +60,7 @@ const TableRow = ({
}) => (
<tr
ref={ref}
className={cn("data-[state=selected]:bg-material-medium transition-colors", className)}
className={cn("transition-colors data-[state=selected]:bg-material-medium", className)}
{...props}
/>
)
@ -78,7 +78,7 @@ const TableHead = ({
<th
ref={ref}
className={cn(
"text-text-secondary text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
"text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0",
tableHeadVariants({ size, className }),
)}
{...props}
@ -112,7 +112,7 @@ const TableCaption = ({
...props
}: React.HTMLAttributes<HTMLTableCaptionElement> & {
ref?: React.Ref<HTMLTableCaptionElement | null>
}) => <caption ref={ref} className={cn("text-text-secondary mt-4 text-sm", className)} {...props} />
}) => <caption ref={ref} className={cn("mt-4 text-sm text-text-secondary", className)} {...props} />
TableCaption.displayName = "TableCaption"
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

12
packages/internal/components/src/ui/tabs/index.tsx
View File

@ -68,7 +68,7 @@ const TabsList = ({
<TabsPrimitive.List
ref={ref}
className={cn(
"text-text-secondary relative inline-flex items-center justify-center",
"relative inline-flex items-center justify-center text-text-secondary",
className,
)}
>
@ -78,8 +78,8 @@ const TabsList = ({
className={cn(
"absolute left-0 duration-200 will-change-[transform,width]",
variant === "rounded"
? "bg-material-medium group-hover:bg-theme-item-hover inset-0 z-0 h-full rounded-lg"
: "bg-accent bottom-0 h-0.5 rounded",
? "inset-0 z-0 h-full rounded-lg bg-material-medium group-hover:bg-theme-item-hover"
: "bottom-0 h-0.5 rounded bg-accent",
)}
style={{
width: indicator.w,
@ -150,7 +150,7 @@ const TabsTrigger = ({
<TabsPrimitive.Trigger
ref={triggerRef as any}
className={cn(
"ring-offset-background data-[state=active]:text-text inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-text",
"group relative z-[1]",
tabsTriggerVariants({ variant }),
)}
@ -171,7 +171,7 @@ const TabsContent = ({
}) => (
<TabsPrimitive.Content
ref={ref}
className={cn("ring-offset-background mt-2 focus-visible:outline-none", className)}
className={cn("mt-2 ring-offset-background focus-visible:outline-none", className)}
{...props}
/>
)
@ -190,7 +190,7 @@ export const TabsScrollAreaContent = ({
}) => (
<TabsPrimitive.Content
ref={ref}
className={cn("ring-offset-background mt-2 focus-visible:outline-none", className)}
className={cn("mt-2 ring-offset-background focus-visible:outline-none", className)}
{...props}
>
<ScrollArea.ScrollArea