CalvinBackup/donutbrowser
1
0
Fork 0
mirror of https://github.com/zhom/donutbrowser.git synced 2026-09-26 19:22:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: improve responsiveness

Browse Source
This commit is contained in:
zhom
2026-06-24 08:01:46 +04:00
parent 19e50324c4
commit b3373924e6
79 changed files with 762 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+4 -4
View File
@@ -1637,7 +1637,7 @@ export default function Home() {
: t(`pageTitle.${currentPage}`); : t(`pageTitle.${currentPage}`);
return ( return (
<div className="flex flex-col h-screen bg-background font-(family-name:--font-geist-sans)"> <div className="flex h-dvh flex-col bg-background font-(family-name:--font-geist-sans)">
<CloseConfirmDialog /> <CloseConfirmDialog />
<CamoufoxDeprecationDialog profiles={profiles} /> <CamoufoxDeprecationDialog profiles={profiles} />
<HomeHeader <HomeHeader
@@ -1650,11 +1650,11 @@ export default function Home() {
onGroupSelect={handleSelectGroup} onGroupSelect={handleSelectGroup}
pageTitle={subPageTitle} pageTitle={subPageTitle}
/> />
<div className="flex flex-1 min-h-0"> <div className="flex min-h-0 flex-1">
<RailNav currentPage={currentPage} onNavigate={handleRailNavigate} /> <RailNav currentPage={currentPage} onNavigate={handleRailNavigate} />
<main className="flex-1 min-w-0 flex flex-col overflow-hidden"> <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
{currentPage === "profiles" && ( {currentPage === "profiles" && (
<div className="px-3 pt-2.5 flex flex-col flex-1 min-h-0"> <div className="flex min-h-0 flex-1 flex-col px-3 pt-2.5">
{isLoading && groupsData.length === 0 ? null : null} {isLoading && groupsData.length === 0 ? null : null}
<ProfilesDataTable <ProfilesDataTable
profiles={filteredProfiles} profiles={filteredProfiles}
src/components/account-page.tsx
+24 -24
View File
@@ -198,11 +198,11 @@ export function AccountPage({
return ( return (
<Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}> <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
<DialogContent className="max-w-2xl max-h-[calc(100vh-4rem)] flex flex-col"> <DialogContent className="flex max-h-[calc(100vh-4rem)] max-w-2xl flex-col">
<div <div
className={cn( className={cn(
"flex flex-col gap-4 p-4 overflow-y-auto flex-1 min-h-0", "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
subPage && "w-full max-w-2xl mx-auto", subPage && "mx-auto w-full max-w-2xl",
)} )}
> >
<AnimatedTabs defaultValue="account"> <AnimatedTabs defaultValue="account">
@@ -226,16 +226,16 @@ export function AccountPage({
<AnimatedTabsContent value="account" className="mt-4"> <AnimatedTabsContent value="account" className="mt-4">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="grid place-items-center size-12 rounded-full bg-accent text-foreground shrink-0"> <div className="grid size-12 shrink-0 place-items-center rounded-full bg-accent text-foreground">
<LuUser className="size-6" /> <LuUser className="size-6" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
{isLoggedIn && user ? ( {isLoggedIn && user ? (
<> <>
<h2 className="text-base font-semibold truncate"> <h2 className="truncate text-base font-semibold">
{user.email} {user.email}
</h2> </h2>
<p className="text-xs text-muted-foreground mt-0.5"> <p className="mt-0.5 text-xs text-muted-foreground">
{t("account.plan", { {t("account.plan", {
plan: user.plan, plan: user.plan,
period: user.planPeriod ?? "—", period: user.planPeriod ?? "—",
@@ -247,7 +247,7 @@ export function AccountPage({
<h2 className="text-base font-semibold"> <h2 className="text-base font-semibold">
{t("account.signedOut")} {t("account.signedOut")}
</h2> </h2>
<p className="text-xs text-muted-foreground mt-0.5"> <p className="mt-0.5 text-xs text-muted-foreground">
{t("account.signedOutDescription")} {t("account.signedOutDescription")}
</p> </p>
</> </>
@@ -257,39 +257,39 @@ export function AccountPage({
{isLoggedIn && user && ( {isLoggedIn && user && (
<div className="grid grid-cols-2 gap-2 text-xs"> <div className="grid grid-cols-2 gap-2 text-xs">
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("account.fields.plan")} {t("account.fields.plan")}
</p> </p>
<p className="mt-0.5 font-medium uppercase"> <p className="mt-0.5 font-medium uppercase">
{user.plan} {user.plan}
</p> </p>
</div> </div>
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("account.fields.status")} {t("account.fields.status")}
</p> </p>
<p className="mt-0.5">{user.subscriptionStatus ?? "—"}</p> <p className="mt-0.5">{user.subscriptionStatus ?? "—"}</p>
</div> </div>
{user.teamRole && ( {user.teamRole && (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("account.fields.teamRole")} {t("account.fields.teamRole")}
</p> </p>
<p className="mt-0.5">{user.teamRole}</p> <p className="mt-0.5">{user.teamRole}</p>
</div> </div>
)} )}
{user.planPeriod && ( {user.planPeriod && (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("account.fields.period")} {t("account.fields.period")}
</p> </p>
<p className="mt-0.5">{user.planPeriod}</p> <p className="mt-0.5">{user.planPeriod}</p>
</div> </div>
)} )}
{typeof user.deviceOrdinal === "number" && ( {typeof user.deviceOrdinal === "number" && (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("account.fields.device")} {t("account.fields.device")}
</p> </p>
<p className="mt-0.5"> <p className="mt-0.5">
@@ -321,7 +321,7 @@ export function AccountPage({
</p> </p>
)} )}
<div className="flex flex-wrap gap-2 mt-2"> <div className="mt-2 flex flex-wrap gap-2">
{isLoggedIn ? ( {isLoggedIn ? (
<> <>
<Button <Button
@@ -331,7 +331,7 @@ export function AccountPage({
void handleRefresh(); void handleRefresh();
}} }}
disabled={isRefreshing} disabled={isRefreshing}
className="h-8 text-xs gap-1.5" className="h-8 gap-1.5 text-xs"
> >
<LuRefreshCw className="size-3" /> <LuRefreshCw className="size-3" />
{t("account.refresh")} {t("account.refresh")}
@@ -344,7 +344,7 @@ export function AccountPage({
onClick={() => { onClick={() => {
void handleLogout(); void handleLogout();
}} }}
className="h-8 text-xs gap-1.5" className="h-8 gap-1.5 text-xs"
> >
<LuLogOut className="size-3" /> <LuLogOut className="size-3" />
{t("account.logout")} {t("account.logout")}
@@ -354,7 +354,7 @@ export function AccountPage({
<Button <Button
size="sm" size="sm"
onClick={onOpenSignIn} onClick={onOpenSignIn}
className="h-8 text-xs gap-1.5" className="h-8 gap-1.5 text-xs"
> >
<LuCloud className="size-3" /> <LuCloud className="size-3" />
{t("account.signIn")} {t("account.signIn")}
@@ -380,7 +380,7 @@ export function AccountPage({
<p className="text-sm font-medium"> <p className="text-sm font-medium">
{t("account.selfHosted.title")} {t("account.selfHosted.title")}
</p> </p>
<p className="text-xs text-muted-foreground mt-0.5"> <p className="mt-0.5 text-xs text-muted-foreground">
{t("account.selfHosted.description")} {t("account.selfHosted.description")}
</p> </p>
</div> </div>
@@ -431,7 +431,7 @@ export function AccountPage({
? t("common.aria.hideToken") ? t("common.aria.hideToken")
: t("common.aria.showToken") : t("common.aria.showToken")
} }
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground" className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
> >
{showToken ? ( {showToken ? (
<LuEyeOff className="size-3.5" /> <LuEyeOff className="size-3.5" />
@@ -449,7 +449,7 @@ export function AccountPage({
{connectionStatus === "connected" && ( {connectionStatus === "connected" && (
<Badge <Badge
variant="default" variant="default"
className="text-success-foreground bg-success" className="bg-success text-success-foreground"
> >
{t("sync.status.connected")} {t("sync.status.connected")}
</Badge> </Badge>
src/components/app-update-toast.tsx
+9 -9
View File
@@ -35,13 +35,13 @@ export function AppUpdateToast({
}; };
return ( return (
<div className="flex items-start p-4 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground"> <div className="flex w-full max-w-md items-start rounded-lg border border-border bg-card p-4 text-card-foreground shadow-lg">
<div className="mr-3 mt-0.5"> <div className="mt-0.5 mr-3">
<LuCheckCheck className="shrink-0 size-5" /> <LuCheckCheck className="size-5 shrink-0" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<div className="flex gap-2 justify-between items-start"> <div className="flex items-start justify-between gap-2">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="text-sm font-semibold text-foreground"> <span className="text-sm font-semibold text-foreground">
{updateReady {updateReady
@@ -59,18 +59,18 @@ export function AppUpdateToast({
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={onDismiss} onClick={onDismiss}
className="p-0 size-6 shrink-0" className="size-6 shrink-0 p-0"
> >
<FaTimes className="size-3" /> <FaTimes className="size-3" />
</Button> </Button>
</div> </div>
<div className="flex gap-2 items-center mt-3"> <div className="mt-3 flex items-center gap-2">
{updateReady ? ( {updateReady ? (
<RippleButton <RippleButton
onClick={() => void handleRestartClick()} onClick={() => void handleRestartClick()}
size="sm" size="sm"
className="flex gap-2 items-center text-xs" className="flex items-center gap-2 text-xs"
> >
<LuCheckCheck className="size-3" /> <LuCheckCheck className="size-3" />
{t("appUpdate.toast.restartNow")} {t("appUpdate.toast.restartNow")}
@@ -81,7 +81,7 @@ export function AppUpdateToast({
<RippleButton <RippleButton
onClick={handleViewRelease} onClick={handleViewRelease}
size="sm" size="sm"
className="flex gap-2 items-center text-xs" className="flex items-center gap-2 text-xs"
> >
<FaExternalLinkAlt className="size-3" /> <FaExternalLinkAlt className="size-3" />
{t("appUpdate.toast.viewRelease")} {t("appUpdate.toast.viewRelease")}
src/components/bandwidth-mini-chart.tsx
+3 -3
View File
@@ -63,11 +63,11 @@ export function BandwidthMiniChart({
type="button" type="button"
onClick={onClick} onClick={onClick}
className={cn( className={cn(
"relative flex items-center gap-1.5 px-2 rounded cursor-pointer hover:bg-accent/50 transition-colors w-full min-w-0 border-none bg-transparent", "relative flex w-full min-w-0 cursor-pointer items-center gap-1.5 rounded border-none bg-transparent px-2 transition-colors hover:bg-accent/50",
className, className,
)} )}
> >
<div className="flex-1 min-w-0 h-3 pointer-events-none"> <div className="pointer-events-none h-3 min-w-0 flex-1">
<ResponsiveContainer <ResponsiveContainer
width="100%" width="100%"
height="100%" height="100%"
@@ -111,7 +111,7 @@ export function BandwidthMiniChart({
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<span className="text-xs text-muted-foreground whitespace-nowrap shrink-0 min-w-[60px] text-right"> <span className="min-w-[60px] shrink-0 text-right text-xs whitespace-nowrap text-muted-foreground">
{formatBytes(currentBandwidth)} {formatBytes(currentBandwidth)}
</span> </span>
</button> </button>
src/components/camoufox-config-dialog.tsx
+3 -3
View File
@@ -149,7 +149,7 @@ export function CamoufoxConfigDialog({
return ( return (
<Dialog open={isOpen} onOpenChange={handleClose}> <Dialog open={isOpen} onOpenChange={handleClose}>
<DialogContent className="max-w-3xl h-[min(85vh,52rem)] flex flex-col"> <DialogContent className="flex h-[min(85vh,52rem)] max-w-3xl flex-col">
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle> <DialogTitle>
{isRunning {isRunning
@@ -164,7 +164,7 @@ export function CamoufoxConfigDialog({
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="flex-1 min-h-0"> <ScrollArea className="min-h-0 flex-1">
<div className="py-4"> <div className="py-4">
{profile.browser === "wayfern" ? ( {profile.browser === "wayfern" ? (
<WayfernConfigForm <WayfernConfigForm
@@ -193,7 +193,7 @@ export function CamoufoxConfigDialog({
</div> </div>
</ScrollArea> </ScrollArea>
<DialogFooter className="shrink-0 pt-4 border-t"> <DialogFooter className="shrink-0 border-t pt-4">
<RippleButton variant="outline" onClick={handleClose}> <RippleButton variant="outline" onClick={handleClose}>
{isRunning ? t("common.buttons.close") : t("common.buttons.cancel")} {isRunning ? t("common.buttons.close") : t("common.buttons.cancel")}
</RippleButton> </RippleButton>
src/components/command-palette.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ function Tokens({ tokens }: { tokens: string[] }) {
{tokens.map((tok, i) => ( {tokens.map((tok, i) => (
<kbd <kbd
key={i} key={i}
className="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded border border-border bg-muted text-[10px] font-medium text-muted-foreground" className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1 text-[10px] font-medium text-muted-foreground"
> >
{tok} {tok}
</kbd> </kbd>
src/components/cookie-copy-dialog.tsx
+16 -16
View File
@@ -332,7 +332,7 @@ export function CookieCopyDialog({
return ( return (
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[min(48rem,calc(100%-4rem))] max-h-[80vh] flex flex-col"> <DialogContent className="flex max-h-[80vh] max-w-[min(48rem,calc(100%-4rem))] flex-col">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
<LuCookie className="size-5" /> <LuCookie className="size-5" />
@@ -349,7 +349,7 @@ export function CookieCopyDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex-1 overflow-y-auto space-y-4"> <div className="flex-1 space-y-4 overflow-y-auto">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("cookies.copy.sourceProfile")}</Label> <Label>{t("cookies.copy.sourceProfile")}</Label>
<Select <Select
@@ -393,7 +393,7 @@ export function CookieCopyDialog({
count: targetProfiles.length, count: targetProfiles.length,
})} })}
</Label> </Label>
<div className="p-2 bg-muted rounded-md max-h-20 overflow-y-auto"> <div className="max-h-20 overflow-y-auto rounded-md bg-muted p-2">
{targetProfiles.length === 0 ? ( {targetProfiles.length === 0 ? (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{sourceProfileId {sourceProfileId
@@ -405,7 +405,7 @@ export function CookieCopyDialog({
{targetProfiles.map((p) => ( {targetProfiles.map((p) => (
<span <span
key={p.id} key={p.id}
className="inline-flex items-center gap-1 px-2 py-0.5 bg-background rounded text-sm" className="inline-flex items-center gap-1 rounded bg-background px-2 py-0.5 text-sm"
> >
{p.name} {p.name}
{runningProfiles.has(p.id) && ( {runningProfiles.has(p.id) && (
@@ -437,7 +437,7 @@ export function CookieCopyDialog({
</div> </div>
<div className="relative"> <div className="relative">
<LuSearch className="absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" /> <LuSearch className="absolute top-1/2 left-2 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
placeholder={t("cookies.copy.searchPlaceholder")} placeholder={t("cookies.copy.searchPlaceholder")}
value={searchQuery} value={searchQuery}
@@ -449,11 +449,11 @@ export function CookieCopyDialog({
</div> </div>
{isLoadingCookies ? ( {isLoadingCookies ? (
<div className="flex items-center justify-center h-40"> <div className="flex h-40 items-center justify-center">
<div className="animate-spin size-6 border-2 border-primary border-t-transparent rounded-full" /> <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div> </div>
) : error ? ( ) : error ? (
<div className="p-4 text-center text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-4 text-center text-destructive">
{error} {error}
</div> </div>
) : filteredDomains.length === 0 ? ( ) : filteredDomains.length === 0 ? (
@@ -463,8 +463,8 @@ export function CookieCopyDialog({
: t("cookies.copy.noFound")} : t("cookies.copy.noFound")}
</div> </div>
) : ( ) : (
<ScrollArea className="h-[clamp(150px,35vh,450px)] border rounded-md"> <ScrollArea className="h-[clamp(150px,35vh,450px)] rounded-md border">
<div className="p-2 space-y-1"> <div className="space-y-1 p-2">
{filteredDomains.map((domain) => ( {filteredDomains.map((domain) => (
<DomainRow <DomainRow
key={domain.domain} key={domain.domain}
@@ -549,7 +549,7 @@ function DomainRow({
return ( return (
<div> <div>
<div className="flex items-center gap-2 p-2 hover:bg-accent/50 rounded"> <div className="flex items-center gap-2 rounded p-2 hover:bg-accent/50">
<Checkbox <Checkbox
checked={isAllSelected || isPartial} checked={isAllSelected || isPartial}
onCheckedChange={() => { onCheckedChange={() => {
@@ -559,7 +559,7 @@ function DomainRow({
/> />
<button <button
type="button" type="button"
className="flex items-center gap-1 flex-1 min-w-0 text-left bg-transparent border-none cursor-pointer" className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent text-left"
onClick={() => { onClick={() => {
onToggleExpand(domain.domain); onToggleExpand(domain.domain);
}} }}
@@ -569,21 +569,21 @@ function DomainRow({
) : ( ) : (
<LuChevronRight className="size-4" /> <LuChevronRight className="size-4" />
)} )}
<span className="font-medium truncate">{domain.domain}</span> <span className="truncate font-medium">{domain.domain}</span>
<span className="text-xs text-muted-foreground shrink-0"> <span className="shrink-0 text-xs text-muted-foreground">
({domain.cookie_count}) ({domain.cookie_count})
</span> </span>
</button> </button>
</div> </div>
{isExpanded && ( {isExpanded && (
<div className="ml-8 pl-2 border-l space-y-1"> <div className="ml-8 space-y-1 border-l pl-2">
{domain.cookies.map((cookie) => { {domain.cookies.map((cookie) => {
const isSelected = const isSelected =
domainSelection?.cookies.has(cookie.name) ?? false; domainSelection?.cookies.has(cookie.name) ?? false;
return ( return (
<div <div
key={`${domain.domain}-${cookie.name}`} key={`${domain.domain}-${cookie.name}`}
className="flex items-center gap-2 p-1 text-sm hover:bg-accent/30 rounded" className="flex items-center gap-2 rounded p-1 text-sm hover:bg-accent/30"
> >
<Checkbox <Checkbox
checked={isSelected || isAllSelected} checked={isSelected || isAllSelected}
src/components/cookie-management-dialog.tsx
+19 -19
View File
@@ -409,7 +409,7 @@ export function CookieManagementDialog({
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="import" className="space-y-4 mt-4"> <TabsContent value="import" className="mt-4 space-y-4">
{!fileContent && ( {!fileContent && (
<div className="space-y-4"> <div className="space-y-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@@ -418,7 +418,7 @@ export function CookieManagementDialog({
<div <div
role="button" role="button"
tabIndex={0} tabIndex={0}
className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-8 transition-colors cursor-pointer border-muted-foreground/25 hover:border-muted-foreground/50" className="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 p-8 transition-colors hover:border-muted-foreground/50"
onClick={() => onClick={() =>
document.getElementById("cookie-file-input")?.click() document.getElementById("cookie-file-input")?.click()
} }
@@ -429,8 +429,8 @@ export function CookieManagementDialog({
} }
}} }}
> >
<LuUpload className="size-10 text-muted-foreground mb-4" /> <LuUpload className="mb-4 size-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground text-center"> <p className="text-center text-sm text-muted-foreground">
{t("cookies.management.dropPrompt")} {t("cookies.management.dropPrompt")}
<br /> <br />
<span className="text-xs"> <span className="text-xs">
@@ -454,7 +454,7 @@ export function CookieManagementDialog({
{fileContent && !importResult && ( {fileContent && !importResult && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-3 p-4 bg-muted/30 rounded-lg"> <div className="flex items-center gap-3 rounded-lg bg-muted/30 p-4">
<div> <div>
<div className="font-medium">{fileName}</div> <div className="font-medium">{fileName}</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
@@ -481,7 +481,7 @@ export function CookieManagementDialog({
{importResult && ( {importResult && (
<div className="space-y-4"> <div className="space-y-4">
<div className="p-4 rounded-lg bg-success/10"> <div className="rounded-lg bg-success/10 p-4">
<div className="font-medium text-success"> <div className="font-medium text-success">
{t("cookies.management.importedSuccess", { {t("cookies.management.importedSuccess", {
imported: importResult.cookies_imported, imported: importResult.cookies_imported,
@@ -505,7 +505,7 @@ export function CookieManagementDialog({
)} )}
</TabsContent> </TabsContent>
<TabsContent value="export" className="space-y-3 mt-4"> <TabsContent value="export" className="mt-4 space-y-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("cookies.export.formatLabel")}</Label> <Label>{t("cookies.export.formatLabel")}</Label>
<Select <Select
@@ -533,7 +533,7 @@ export function CookieManagementDialog({
<Label> <Label>
{t("cookies.management.cookiesLabel")}{" "} {t("cookies.management.cookiesLabel")}{" "}
{exportCookieData && ( {exportCookieData && (
<span className="text-muted-foreground font-normal"> <span className="font-normal text-muted-foreground">
{t("cookies.management.selectionStatus", { {t("cookies.management.selectionStatus", {
selected: selectedExportCount, selected: selectedExportCount,
total: exportCookieData.total_count, total: exportCookieData.total_count,
@@ -544,7 +544,7 @@ export function CookieManagementDialog({
{exportCookieData && exportCookieData.total_count > 0 && ( {exportCookieData && exportCookieData.total_count > 0 && (
<button <button
type="button" type="button"
className="text-xs text-muted-foreground hover:text-foreground transition-colors" className="text-xs text-muted-foreground transition-colors hover:text-foreground"
onClick={toggleSelectAll} onClick={toggleSelectAll}
> >
{selectedExportCount === exportCookieData.total_count {selectedExportCount === exportCookieData.total_count
@@ -555,16 +555,16 @@ export function CookieManagementDialog({
</div> </div>
{isLoadingExportCookies ? ( {isLoadingExportCookies ? (
<div className="flex items-center justify-center h-24"> <div className="flex h-24 items-center justify-center">
<div className="animate-spin size-5 border-2 border-primary border-t-transparent rounded-full" /> <div className="size-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div> </div>
) : !exportCookieData || exportCookieData.domains.length === 0 ? ( ) : !exportCookieData || exportCookieData.domains.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground border rounded-md"> <div className="rounded-md border p-4 text-center text-sm text-muted-foreground">
{t("cookies.management.noCookies")} {t("cookies.management.noCookies")}
</div> </div>
) : ( ) : (
<FadingScrollArea className="h-[clamp(140px,30vh,420px)]"> <FadingScrollArea className="h-[clamp(140px,30vh,420px)]">
<div className="p-2 space-y-1"> <div className="space-y-1 p-2">
{exportCookieData.domains.map((domain) => ( {exportCookieData.domains.map((domain) => (
<ExportDomainRow <ExportDomainRow
key={domain.domain} key={domain.domain}
@@ -629,7 +629,7 @@ function ExportDomainRow({
return ( return (
<div> <div>
<div className="flex items-center gap-2 p-1.5 hover:bg-accent/50 rounded"> <div className="flex items-center gap-2 rounded p-1.5 hover:bg-accent/50">
<Checkbox <Checkbox
checked={isAllSelected || isPartial} checked={isAllSelected || isPartial}
onCheckedChange={() => { onCheckedChange={() => {
@@ -639,7 +639,7 @@ function ExportDomainRow({
/> />
<button <button
type="button" type="button"
className="flex items-center gap-1 flex-1 text-left text-sm bg-transparent border-none cursor-pointer" className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent text-left text-sm"
onClick={() => { onClick={() => {
onToggleExpand(domain.domain); onToggleExpand(domain.domain);
}} }}
@@ -649,21 +649,21 @@ function ExportDomainRow({
) : ( ) : (
<LuChevronRight className="size-3.5" /> <LuChevronRight className="size-3.5" />
)} )}
<span className="font-medium truncate">{domain.domain}</span> <span className="truncate font-medium">{domain.domain}</span>
<span className="text-xs text-muted-foreground shrink-0"> <span className="shrink-0 text-xs text-muted-foreground">
({domain.cookie_count}) ({domain.cookie_count})
</span> </span>
</button> </button>
</div> </div>
{isExpanded && ( {isExpanded && (
<div className="ml-7 pl-2 border-l space-y-0.5"> <div className="ml-7 space-y-0.5 border-l pl-2">
{domain.cookies.map((cookie) => { {domain.cookies.map((cookie) => {
const isSelected = const isSelected =
domainSelection?.cookies.has(cookie.name) ?? false; domainSelection?.cookies.has(cookie.name) ?? false;
return ( return (
<div <div
key={`${domain.domain}-${cookie.name}`} key={`${domain.domain}-${cookie.name}`}
className="flex items-center gap-2 p-1 text-sm hover:bg-accent/30 rounded" className="flex items-center gap-2 rounded p-1 text-sm hover:bg-accent/30"
> >
<Checkbox <Checkbox
checked={isSelected || isAllSelected} checked={isSelected || isAllSelected}
src/components/create-group-dialog.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ export function CreateGroupDialog({
</div> </div>
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
src/components/create-profile-dialog.tsx
+39 -39
View File
@@ -534,7 +534,7 @@ export function CreateProfileDialog({
return ( return (
<Dialog open={isOpen} onOpenChange={handleClose}> <Dialog open={isOpen} onOpenChange={handleClose}>
<DialogContent className="max-w-[min(48rem,calc(100%-4rem))] max-h-[90vh] flex flex-col"> <DialogContent className="flex max-h-[90vh] max-w-[min(48rem,calc(100%-4rem))] flex-col">
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle> <DialogTitle>
{currentStep === "browser-selection" {currentStep === "browser-selection"
@@ -551,13 +551,13 @@ export function CreateProfileDialog({
<Tabs <Tabs
value={activeTab} value={activeTab}
onValueChange={handleTabChange} onValueChange={handleTabChange}
className="flex flex-col flex-1 w-full min-h-0" className="flex min-h-0 w-full flex-1 flex-col"
> >
{/* Tab list hidden - only anti-detect browsers are supported */} {/* Tab list hidden - only anti-detect browsers are supported */}
<ScrollArea className="overflow-y-auto flex-1"> <ScrollArea className="flex-1 overflow-y-auto">
<div className="flex flex-col justify-center items-center w-full"> <div className="flex w-full flex-col items-center justify-center">
<div className="py-4 space-y-6 w-full"> <div className="w-full space-y-6 py-4">
{currentStep === "browser-selection" ? ( {currentStep === "browser-selection" ? (
<> <>
<TabsContent value="anti-detect" className="mt-0 space-y-6"> <TabsContent value="anti-detect" className="mt-0 space-y-6">
@@ -569,10 +569,10 @@ export function CreateProfileDialog({
handleBrowserSelect("wayfern"); handleBrowserSelect("wayfern");
}} }}
disabled={!getCreatableVersion("wayfern")} disabled={!getCreatableVersion("wayfern")}
className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50" className="flex h-16 w-full items-center justify-start gap-3 border-2 p-4 transition-colors hover:border-primary/50"
variant="outline" variant="outline"
> >
<div className="flex justify-center items-center size-8"> <div className="flex size-8 items-center justify-center">
{isBrowserCurrentlyDownloading("wayfern") ? ( {isBrowserCurrentlyDownloading("wayfern") ? (
<LuLoaderCircle className="size-6 animate-spin" /> <LuLoaderCircle className="size-6 animate-spin" />
) : ( ) : (
@@ -600,7 +600,7 @@ export function CreateProfileDialog({
profiles. Only Wayfern can be created. */} profiles. Only Wayfern can be created. */}
{!getCreatableVersion("wayfern") && ( {!getCreatableVersion("wayfern") && (
<p className="pt-2 text-sm text-center text-muted-foreground"> <p className="pt-2 text-center text-sm text-muted-foreground">
{t("createProfile.browsersDownloading")} {t("createProfile.browsersDownloading")}
</p> </p>
)} )}
@@ -629,10 +629,10 @@ export function CreateProfileDialog({
onClick={() => { onClick={() => {
handleBrowserSelect(browser.value); handleBrowserSelect(browser.value);
}} }}
className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50" className="flex h-16 w-full items-center justify-start gap-3 border-2 p-4 transition-colors hover:border-primary/50"
variant="outline" variant="outline"
> >
<div className="flex justify-center items-center size-8"> <div className="flex size-8 items-center justify-center">
{IconComponent && ( {IconComponent && (
<IconComponent className="size-6" /> <IconComponent className="size-6" />
)} )}
@@ -684,7 +684,7 @@ export function CreateProfileDialog({
</div> </div>
{/* Ephemeral Option */} {/* Ephemeral Option */}
<div className="space-y-3 p-4 border rounded-lg bg-muted/30"> <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
id="ephemeral" id="ephemeral"
@@ -697,14 +697,14 @@ export function CreateProfileDialog({
{t("profiles.ephemeral")} {t("profiles.ephemeral")}
</Label> </Label>
</div> </div>
<p className="text-sm text-muted-foreground ml-6"> <p className="ml-6 text-sm text-muted-foreground">
{t("profiles.ephemeralDescription")} {t("profiles.ephemeralDescription")}
</p> </p>
</div> </div>
{/* Password Option */} {/* Password Option */}
{!ephemeral && ( {!ephemeral && (
<div className="space-y-3 p-4 border rounded-lg bg-muted/30"> <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
id="enable-password" id="enable-password"
@@ -725,7 +725,7 @@ export function CreateProfileDialog({
{t("createProfile.passwordProtect.label")} {t("createProfile.passwordProtect.label")}
</Label> </Label>
</div> </div>
<p className="text-sm text-muted-foreground ml-6"> <p className="ml-6 text-sm text-muted-foreground">
{t("createProfile.passwordProtect.description")} {t("createProfile.passwordProtect.description")}
</p> </p>
{enablePassword && ( {enablePassword && (
@@ -769,15 +769,15 @@ export function CreateProfileDialog({
<div className="space-y-6"> <div className="space-y-6">
{/* Wayfern Download Status */} {/* Wayfern Download Status */}
{isLoadingReleaseTypes && ( {isLoadingReleaseTypes && (
<div className="flex gap-3 items-center p-3 rounded-md border"> <div className="flex items-center gap-3 rounded-md border p-3">
<div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" /> <div className="size-4 animate-spin rounded-full border-2 border-muted/40 border-t-primary" />
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("createProfile.version.fetching")} {t("createProfile.version.fetching")}
</p> </p>
</div> </div>
)} )}
{!isLoadingReleaseTypes && releaseTypesError && ( {!isLoadingReleaseTypes && releaseTypesError && (
<div className="flex gap-3 items-center p-3 rounded-md border border-destructive/50 bg-destructive/10"> <div className="flex items-center gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-3">
<p className="flex-1 text-sm text-destructive"> <p className="flex-1 text-sm text-destructive">
{releaseTypesError} {releaseTypesError}
</p> </p>
@@ -796,7 +796,7 @@ export function CreateProfileDialog({
{!isLoadingReleaseTypes && {!isLoadingReleaseTypes &&
!releaseTypesError && !releaseTypesError &&
!getBestAvailableVersion("wayfern") && ( !getBestAvailableVersion("wayfern") && (
<div className="flex gap-3 items-center p-3 rounded-md border border-warning/50 bg-warning/10"> <div className="flex items-center gap-3 rounded-md border border-warning/50 bg-warning/10 p-3">
<p className="text-sm text-warning"> <p className="text-sm text-warning">
{t("createProfile.platformUnavailable", { {t("createProfile.platformUnavailable", {
browser: "Wayfern", browser: "Wayfern",
@@ -809,7 +809,7 @@ export function CreateProfileDialog({
!isBrowserCurrentlyDownloading("wayfern") && !isBrowserCurrentlyDownloading("wayfern") &&
!getCreatableVersion("wayfern") && !getCreatableVersion("wayfern") &&
getBestAvailableVersion("wayfern") && ( getBestAvailableVersion("wayfern") && (
<div className="flex gap-3 items-center p-3 rounded-md border"> <div className="flex items-center gap-3 rounded-md border p-3">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("createProfile.version.needsDownload", { {t("createProfile.version.needsDownload", {
browser: "Wayfern", browser: "Wayfern",
@@ -840,7 +840,7 @@ export function CreateProfileDialog({
!releaseTypesError && !releaseTypesError &&
!isBrowserCurrentlyDownloading("wayfern") && !isBrowserCurrentlyDownloading("wayfern") &&
getCreatableVersion("wayfern") && ( getCreatableVersion("wayfern") && (
<div className="p-3 text-sm rounded-md border text-muted-foreground"> <div className="rounded-md border p-3 text-sm text-muted-foreground">
✓{" "} ✓{" "}
{t("createProfile.version.available", { {t("createProfile.version.available", {
browser: "Wayfern", browser: "Wayfern",
@@ -855,7 +855,7 @@ export function CreateProfileDialog({
getCreatableVersion("wayfern") && getCreatableVersion("wayfern") &&
!isBrowserVersionAvailable("wayfern") && !isBrowserVersionAvailable("wayfern") &&
getBestAvailableVersion("wayfern") && ( getBestAvailableVersion("wayfern") && (
<div className="flex gap-3 items-center p-3 rounded-md border"> <div className="flex items-center gap-3 rounded-md border p-3">
<p className="flex-1 text-sm text-muted-foreground"> <p className="flex-1 text-sm text-muted-foreground">
{t( {t(
"createProfile.version.upgradeAvailable", "createProfile.version.upgradeAvailable",
@@ -887,7 +887,7 @@ export function CreateProfileDialog({
</div> </div>
)} )}
{isBrowserCurrentlyDownloading("wayfern") && ( {isBrowserCurrentlyDownloading("wayfern") && (
<div className="p-3 text-sm rounded-md border text-muted-foreground"> <div className="rounded-md border p-3 text-sm text-muted-foreground">
{t("createProfile.version.downloading", { {t("createProfile.version.downloading", {
browser: "Wayfern", browser: "Wayfern",
version: version:
@@ -915,8 +915,8 @@ export function CreateProfileDialog({
{selectedBrowser && ( {selectedBrowser && (
<div className="space-y-3"> <div className="space-y-3">
{isLoadingReleaseTypes && ( {isLoadingReleaseTypes && (
<div className="flex gap-3 items-center"> <div className="flex items-center gap-3">
<div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" /> <div className="size-4 animate-spin rounded-full border-2 border-muted/40 border-t-primary" />
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("createProfile.version.fetching")} {t("createProfile.version.fetching")}
</p> </p>
@@ -924,7 +924,7 @@ export function CreateProfileDialog({
)} )}
{!isLoadingReleaseTypes && {!isLoadingReleaseTypes &&
releaseTypesError && ( releaseTypesError && (
<div className="flex gap-3 items-center p-3 rounded-md border border-destructive/50 bg-destructive/10"> <div className="flex items-center gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-3">
<p className="flex-1 text-sm text-destructive"> <p className="flex-1 text-sm text-destructive">
{releaseTypesError} {releaseTypesError}
</p> </p>
@@ -947,7 +947,7 @@ export function CreateProfileDialog({
) && ) &&
!getCreatableVersion(selectedBrowser) && !getCreatableVersion(selectedBrowser) &&
getBestAvailableVersion(selectedBrowser) && ( getBestAvailableVersion(selectedBrowser) && (
<div className="flex gap-3 items-center"> <div className="flex items-center gap-3">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t( {t(
"createProfile.version.latestNeedsDownload", "createProfile.version.latestNeedsDownload",
@@ -1016,7 +1016,7 @@ export function CreateProfileDialog({
{/* Proxy / VPN Selection - Always visible */} {/* Proxy / VPN Selection - Always visible */}
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<Label>{t("createProfile.proxy.title")}</Label> <Label>{t("createProfile.proxy.title")}</Label>
<RippleButton <RippleButton
size="sm" size="sm"
@@ -1024,7 +1024,7 @@ export function CreateProfileDialog({
onClick={() => { onClick={() => {
setShowProxyForm(true); setShowProxyForm(true);
}} }}
className="px-2 h-7 text-xs" className="h-7 px-2 text-xs"
> >
<GoPlus className="mr-1 size-3" />{" "} <GoPlus className="mr-1 size-3" />{" "}
{t("createProfile.proxy.addProxy")} {t("createProfile.proxy.addProxy")}
@@ -1144,7 +1144,7 @@ export function CreateProfileDialog({
/> />
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1 py-0 leading-tight mr-1" className="mr-1 px-1 py-0 text-[10px] leading-tight"
> >
WG WG
</Badge> </Badge>
@@ -1158,7 +1158,7 @@ export function CreateProfileDialog({
</PopoverContent> </PopoverContent>
</Popover> </Popover>
) : ( ) : (
<div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground"> <div className="flex items-center gap-3 rounded-md border p-3 text-sm text-muted-foreground">
{t("createProfile.proxy.noProxiesAvailable")} {t("createProfile.proxy.noProxiesAvailable")}
</div> </div>
)} )}
@@ -1285,15 +1285,15 @@ export function CreateProfileDialog({
{selectedBrowser && ( {selectedBrowser && (
<div className="space-y-3"> <div className="space-y-3">
{isLoadingReleaseTypes && ( {isLoadingReleaseTypes && (
<div className="flex gap-3 items-center"> <div className="flex items-center gap-3">
<div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" /> <div className="size-4 animate-spin rounded-full border-2 border-muted/40 border-t-primary" />
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("createProfile.version.fetching")} {t("createProfile.version.fetching")}
</p> </p>
</div> </div>
)} )}
{!isLoadingReleaseTypes && releaseTypesError && ( {!isLoadingReleaseTypes && releaseTypesError && (
<div className="flex gap-3 items-center p-3 rounded-md border border-destructive/50 bg-destructive/10"> <div className="flex items-center gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-3">
<p className="flex-1 text-sm text-destructive"> <p className="flex-1 text-sm text-destructive">
{releaseTypesError} {releaseTypesError}
</p> </p>
@@ -1316,7 +1316,7 @@ export function CreateProfileDialog({
) && ) &&
!getCreatableVersion(selectedBrowser) && !getCreatableVersion(selectedBrowser) &&
getBestAvailableVersion(selectedBrowser) && ( getBestAvailableVersion(selectedBrowser) && (
<div className="flex gap-3 items-center"> <div className="flex items-center gap-3">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t( {t(
"createProfile.version.latestNeedsDownload", "createProfile.version.latestNeedsDownload",
@@ -1383,7 +1383,7 @@ export function CreateProfileDialog({
{/* Proxy / VPN Selection - Always visible */} {/* Proxy / VPN Selection - Always visible */}
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<Label>{t("createProfile.proxy.title")}</Label> <Label>{t("createProfile.proxy.title")}</Label>
<RippleButton <RippleButton
size="sm" size="sm"
@@ -1391,7 +1391,7 @@ export function CreateProfileDialog({
onClick={() => { onClick={() => {
setShowProxyForm(true); setShowProxyForm(true);
}} }}
className="px-2 h-7 text-xs" className="h-7 px-2 text-xs"
> >
<GoPlus className="mr-1 size-3" />{" "} <GoPlus className="mr-1 size-3" />{" "}
{t("createProfile.proxy.addProxy")} {t("createProfile.proxy.addProxy")}
@@ -1511,7 +1511,7 @@ export function CreateProfileDialog({
/> />
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1 py-0 leading-tight mr-1" className="mr-1 px-1 py-0 text-[10px] leading-tight"
> >
WG WG
</Badge> </Badge>
@@ -1525,7 +1525,7 @@ export function CreateProfileDialog({
</PopoverContent> </PopoverContent>
</Popover> </Popover>
) : ( ) : (
<div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground"> <div className="flex items-center gap-3 rounded-md border p-3 text-sm text-muted-foreground">
{t("createProfile.proxy.noProxiesAvailable")} {t("createProfile.proxy.noProxiesAvailable")}
</div> </div>
)} )}
@@ -1556,7 +1556,7 @@ export function CreateProfileDialog({
</ScrollArea> </ScrollArea>
</Tabs> </Tabs>
<DialogFooter className="shrink-0 pt-4 border-t"> <DialogFooter className="shrink-0 border-t pt-4">
{currentStep === "browser-config" ? ( {currentStep === "browser-config" ? (
<> <>
<RippleButton variant="outline" onClick={handleBack}> <RippleButton variant="outline" onClick={handleBack}>
src/components/custom-toast.tsx
+23 -25
View File
@@ -162,34 +162,34 @@ function formatEtaCompact(seconds: number): string {
function getToastIcon(type: ToastProps["type"], stage?: string) { function getToastIcon(type: ToastProps["type"], stage?: string) {
switch (type) { switch (type) {
case "success": case "success":
return <LuCheckCheck className="shrink-0 size-4 text-foreground" />; return <LuCheckCheck className="size-4 shrink-0 text-foreground" />;
case "error": case "error":
return <LuTriangleAlert className="shrink-0 size-4 text-foreground" />; return <LuTriangleAlert className="size-4 shrink-0 text-foreground" />;
case "download": case "download":
if (stage === "completed") { if (stage === "completed") {
return <LuCheckCheck className="shrink-0 size-4 text-foreground" />; return <LuCheckCheck className="size-4 shrink-0 text-foreground" />;
} }
return <LuDownload className="shrink-0 size-4 text-foreground" />; return <LuDownload className="size-4 shrink-0 text-foreground" />;
case "version-update": case "version-update":
return ( return (
<LuRefreshCw className="shrink-0 size-4 animate-spin text-foreground" /> <LuRefreshCw className="size-4 shrink-0 animate-spin text-foreground" />
); );
case "fetching": case "fetching":
return ( return (
<LuRefreshCw className="shrink-0 size-4 animate-spin text-foreground" /> <LuRefreshCw className="size-4 shrink-0 animate-spin text-foreground" />
); );
case "sync-progress": case "sync-progress":
return ( return (
<LuRefreshCw className="shrink-0 size-4 animate-spin text-foreground" /> <LuRefreshCw className="size-4 shrink-0 animate-spin text-foreground" />
); );
case "loading": case "loading":
return ( return (
<div className="shrink-0 size-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" /> <div className="size-4 shrink-0 animate-spin rounded-full border-2 border-foreground border-t-transparent" />
); );
default: default:
return ( return (
<div className="shrink-0 size-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" /> <div className="size-4 shrink-0 animate-spin rounded-full border-2 border-foreground border-t-transparent" />
); );
} }
} }
@@ -201,18 +201,16 @@ export function UnifiedToast(props: ToastProps) {
const progress = "progress" in props ? props.progress : undefined; const progress = "progress" in props ? props.progress : undefined;
return ( return (
<div className="flex items-start p-3 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground"> <div className="flex w-full max-w-md items-start rounded-lg border border-border bg-card p-3 text-card-foreground shadow-lg">
<div className="mr-3 mt-0.5">{getToastIcon(type, stage)}</div> <div className="mt-0.5 mr-3">{getToastIcon(type, stage)}</div>
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm font-semibold leading-tight text-foreground"> <p className="text-sm/tight font-semibold text-foreground">{title}</p>
{title}
</p>
{onCancel && ( {onCancel && (
<button <button
type="button" type="button"
onClick={onCancel} onClick={onCancel}
className="ml-2 p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors shrink-0" className="ml-2 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
aria-label={t("common.buttons.cancel")} aria-label={t("common.buttons.cancel")}
> >
<LuX className="size-3" /> <LuX className="size-3" />
@@ -226,17 +224,17 @@ export function UnifiedToast(props: ToastProps) {
"percentage" in progress && "percentage" in progress &&
stage === "downloading" && ( stage === "downloading" && (
<div className="mt-2 space-y-1"> <div className="mt-2 space-y-1">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<p className="flex-1 min-w-0 text-xs text-muted-foreground"> <p className="min-w-0 flex-1 text-xs text-muted-foreground">
{progress.percentage.toFixed(1)}% {progress.percentage.toFixed(1)}%
{progress.speed && ` • ${progress.speed} MB/s`} {progress.speed && ` • ${progress.speed} MB/s`}
{progress.eta && {progress.eta &&
` • ${t("toasts.progress.remaining", { time: progress.eta })}`} ` • ${t("toasts.progress.remaining", { time: progress.eta })}`}
</p> </p>
</div> </div>
<div className="w-full bg-muted rounded-full h-1.5"> <div className="h-1.5 w-full rounded-full bg-muted">
<div <div
className="bg-foreground h-1.5 rounded-full transition-all duration-150" className="h-1.5 rounded-full bg-foreground transition-all duration-150"
style={{ width: `${progress.percentage}%` }} style={{ width: `${progress.percentage}%` }}
/> />
</div> </div>
@@ -255,15 +253,15 @@ export function UnifiedToast(props: ToastProps) {
})} })}
</p> </p>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<div className="flex-1 bg-muted rounded-full h-1.5 min-w-0"> <div className="h-1.5 min-w-0 flex-1 rounded-full bg-muted">
<div <div
className="bg-foreground h-1.5 rounded-full transition-all duration-150" className="h-1.5 rounded-full bg-foreground transition-all duration-150"
style={{ style={{
width: `${(progress.current / progress.total) * 100}%`, width: `${(progress.current / progress.total) * 100}%`,
}} }}
/> />
</div> </div>
<span className="w-8 text-xs text-right whitespace-nowrap text-muted-foreground shrink-0"> <span className="w-8 shrink-0 text-right text-xs whitespace-nowrap text-muted-foreground">
{progress.current}/{progress.total} {progress.current}/{progress.total}
</span> </span>
</div> </div>
@@ -299,7 +297,7 @@ export function UnifiedToast(props: ToastProps) {
})}`} })}`}
</p> </p>
{progress.failed_count > 0 && ( {progress.failed_count > 0 && (
<p className="text-xs text-destructive mt-0.5"> <p className="mt-0.5 text-xs text-destructive">
{t("toasts.progress.filesFailed", { {t("toasts.progress.filesFailed", {
count: progress.failed_count, count: progress.failed_count,
})} })}
@@ -310,7 +308,7 @@ export function UnifiedToast(props: ToastProps) {
{/* Description */} {/* Description */}
{description && ( {description && (
<p className="mt-1 text-xs leading-tight text-muted-foreground"> <p className="mt-1 text-xs/tight text-muted-foreground">
{description} {description}
</p> </p>
)} )}
src/components/data-table-action-bar.tsx
+3 -3
View File
@@ -106,7 +106,7 @@ function DataTableActionBarAction({
{...props} {...props}
> >
{isPending ? ( {isPending ? (
<div className="size-3.5 rounded-full border border-current animate-spin border-t-transparent" /> <div className="size-3.5 animate-spin rounded-full border border-current border-t-transparent" />
) : ( ) : (
children children
)} )}
@@ -142,7 +142,7 @@ function DataTableActionBarSelection<TData>({
return ( return (
<div className="flex h-7 items-center rounded-md border pr-1 pl-2.5"> <div className="flex h-7 items-center rounded-md border pr-1 pl-2.5">
<span className="whitespace-nowrap text-xs"> <span className="text-xs whitespace-nowrap">
{t("dataTableActionBar.selected", { {t("dataTableActionBar.selected", {
count: table.getFilteredSelectedRowModel().rows.length, count: table.getFilteredSelectedRowModel().rows.length,
})} })}
@@ -164,7 +164,7 @@ function DataTableActionBarSelection<TData>({
className="flex items-center gap-2 border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-card [&>span]:hidden" className="flex items-center gap-2 border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-card [&>span]:hidden"
> >
<p>{t("dataTableActionBar.clearSelection")}</p> <p>{t("dataTableActionBar.clearSelection")}</p>
<kbd className="select-none rounded border bg-background px-1.5 py-px font-mono font-normal text-[0.7rem] text-foreground shadow-xs"> <kbd className="rounded border bg-background px-1.5 py-px font-mono text-[0.7rem] font-normal text-foreground shadow-xs select-none">
<abbr title={t("common.keys.escape")} className="no-underline"> <abbr title={t("common.keys.escape")} className="no-underline">
Esc Esc
</abbr> </abbr>
src/components/delete-confirmation-dialog.tsx
+3 -3
View File
@@ -55,10 +55,10 @@ export function DeleteConfirmationDialog({
<DialogDescription>{description}</DialogDescription> <DialogDescription>{description}</DialogDescription>
{profileIds && profileIds.length > 0 && ( {profileIds && profileIds.length > 0 && (
<div className="mt-4"> <div className="mt-4">
<p className="text-sm font-medium mb-2"> <p className="mb-2 text-sm font-medium">
{t("deleteDialog.profilesToDelete")} {t("deleteDialog.profilesToDelete")}
</p> </p>
<div className="bg-muted rounded-md p-3 max-h-32 overflow-y-auto"> <div className="max-h-32 overflow-y-auto rounded-md bg-muted p-3">
<ul className="space-y-1"> <ul className="space-y-1">
{profileIds.map((id) => { {profileIds.map((id) => {
const profile = profiles.find((p) => p.id === id); const profile = profiles.find((p) => p.id === id);
@@ -66,7 +66,7 @@ export function DeleteConfirmationDialog({
return ( return (
<li <li
key={id} key={id}
className="text-sm text-muted-foreground truncate" className="truncate text-sm text-muted-foreground"
> >
• {displayName} • {displayName}
</li> </li>
src/components/delete-group-dialog.tsx
+3 -3
View File
@@ -136,10 +136,10 @@ export function DeleteGroupDialog({
count: associatedProfiles.length, count: associatedProfiles.length,
})} })}
</Label> </Label>
<ScrollArea className="max-h-[min(8rem,25vh)] overflow-y-auto w-full border rounded-md p-3"> <ScrollArea className="max-h-[min(8rem,25vh)] w-full overflow-y-auto rounded-md border p-3">
<div className="space-y-1"> <div className="space-y-1">
{associatedProfiles.map((profile) => ( {associatedProfiles.map((profile) => (
<div key={profile.id} className="text-sm truncate"> <div key={profile.id} className="truncate text-sm">
• {profile.name} • {profile.name}
</div> </div>
))} ))}
@@ -184,7 +184,7 @@ export function DeleteGroupDialog({
)} )}
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
src/components/dns-blocklist-dialog.tsx
+4 -4
View File
@@ -87,7 +87,7 @@ export function DnsBlocklistDialog({
{t("dnsBlocklist.settingsDescription")} {t("dnsBlocklist.settingsDescription")}
</p> </p>
<div className="space-y-3 overflow-y-auto min-h-0 max-h-[40vh]"> <div className="max-h-[40vh] min-h-0 space-y-3 overflow-y-auto">
{statuses.map((status) => ( {statuses.map((status) => (
<div <div
key={status.level} key={status.level}
@@ -100,18 +100,18 @@ export function DnsBlocklistDialog({
</span> </span>
{status.is_cached ? ( {status.is_cached ? (
status.is_fresh ? ( status.is_fresh ? (
<Badge variant="default" className="text-[10px] px-1.5"> <Badge variant="default" className="px-1.5 text-[10px]">
{t("dnsBlocklist.fresh")} {t("dnsBlocklist.fresh")}
</Badge> </Badge>
) : ( ) : (
<Badge variant="secondary" className="text-[10px] px-1.5"> <Badge variant="secondary" className="px-1.5 text-[10px]">
{t("dnsBlocklist.stale")} {t("dnsBlocklist.stale")}
</Badge> </Badge>
) )
) : ( ) : (
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1.5 text-muted-foreground" className="px-1.5 text-[10px] text-muted-foreground"
> >
{t("dnsBlocklist.notCached")} {t("dnsBlocklist.notCached")}
</Badge> </Badge>
src/components/edit-group-dialog.tsx
+1 -1
View File
@@ -103,7 +103,7 @@ export function EditGroupDialog({
</div> </div>
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
src/components/extension-group-assignment-dialog.tsx
+3 -3
View File
@@ -110,8 +110,8 @@ export function ExtensionGroupAssignmentDialog({
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("extensions.assignTitle")}:</Label> <Label>{t("extensions.assignTitle")}:</Label>
<div className="p-3 bg-muted rounded-md max-h-[min(8rem,20vh)] overflow-y-auto"> <div className="max-h-[min(8rem,20vh)] overflow-y-auto rounded-md bg-muted p-3">
<ul className="text-sm space-y-1"> <ul className="space-y-1 text-sm">
{selectedProfiles.map((profileId) => { {selectedProfiles.map((profileId) => {
const profile = profiles.find( const profile = profiles.find(
(p: BrowserProfile) => p.id === profileId, (p: BrowserProfile) => p.id === profileId,
@@ -160,7 +160,7 @@ export function ExtensionGroupAssignmentDialog({
</div> </div>
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
src/components/extension-management-dialog.tsx
+47 -47
View File
@@ -655,7 +655,7 @@ export function ExtensionManagementDialog({
const hasFirefox = compat.includes("firefox"); const hasFirefox = compat.includes("firefox");
if (!hasChromium && !hasFirefox) return null; if (!hasChromium && !hasFirefox) return null;
return ( return (
<div className="flex items-center gap-1 shrink-0"> <div className="flex shrink-0 items-center gap-1">
{hasChromium && ( {hasChromium && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@@ -753,7 +753,7 @@ export function ExtensionManagementDialog({
onClick={() => { onClick={() => {
column.toggleSorting(column.getIsSorted() === "asc"); column.toggleSorting(column.getIsSorted() === "asc");
}} }}
className="justify-start p-0 h-auto font-semibold text-left cursor-pointer" className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
> >
{t("common.labels.name")} {t("common.labels.name")}
{column.getIsSorted() === "asc" ? ( {column.getIsSorted() === "asc" ? (
@@ -764,7 +764,7 @@ export function ExtensionManagementDialog({
</Button> </Button>
), ),
cell: ({ row }) => ( cell: ({ row }) => (
<span className="text-sm font-medium truncate min-w-0 block"> <span className="block min-w-0 truncate text-sm font-medium">
{row.original.name} {row.original.name}
</span> </span>
), ),
@@ -786,7 +786,7 @@ export function ExtensionManagementDialog({
const ext = row.original; const ext = row.original;
const syncDot = getSyncStatusDot(ext, extSyncStatus[ext.id], t); const syncDot = getSyncStatusDot(ext, extSyncStatus[ext.id], t);
return ( return (
<div className="flex items-center gap-2 shrink-0"> <div className="flex shrink-0 items-center gap-2">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
@@ -801,7 +801,7 @@ export function ExtensionManagementDialog({
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span className="inline-flex items-center shrink-0"> <span className="inline-flex shrink-0 items-center">
<AnimatedSwitch <AnimatedSwitch
checked={ext.sync_enabled} checked={ext.sync_enabled}
onCheckedChange={() => void handleToggleExtSync(ext)} onCheckedChange={() => void handleToggleExtSync(ext)}
@@ -829,7 +829,7 @@ export function ExtensionManagementDialog({
cell: ({ row }) => { cell: ({ row }) => {
const ext = row.original; const ext = row.original;
return ( return (
<div className="flex gap-0.5 justify-end shrink-0"> <div className="flex shrink-0 justify-end gap-0.5">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@@ -927,7 +927,7 @@ export function ExtensionManagementDialog({
onClick={() => { onClick={() => {
column.toggleSorting(column.getIsSorted() === "asc"); column.toggleSorting(column.getIsSorted() === "asc");
}} }}
className="justify-start p-0 h-auto font-semibold text-left cursor-pointer" className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
> >
{t("common.labels.name")} {t("common.labels.name")}
{column.getIsSorted() === "asc" ? ( {column.getIsSorted() === "asc" ? (
@@ -938,7 +938,7 @@ export function ExtensionManagementDialog({
</Button> </Button>
), ),
cell: ({ row }) => ( cell: ({ row }) => (
<span className="font-medium text-sm truncate min-w-0 block"> <span className="block min-w-0 truncate text-sm font-medium">
{row.original.name} {row.original.name}
</span> </span>
), ),
@@ -956,7 +956,7 @@ export function ExtensionManagementDialog({
const visibleExts = groupExts.slice(0, MAX_VISIBLE_ICONS); const visibleExts = groupExts.slice(0, MAX_VISIBLE_ICONS);
const overflowCount = groupExts.length - MAX_VISIBLE_ICONS; const overflowCount = groupExts.length - MAX_VISIBLE_ICONS;
return ( return (
<div className="flex items-center gap-1 min-w-0"> <div className="flex min-w-0 items-center gap-1">
{visibleExts.map((ext) => ( {visibleExts.map((ext) => (
<Tooltip key={ext.id}> <Tooltip key={ext.id}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@@ -972,7 +972,7 @@ export function ExtensionManagementDialog({
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Badge <Badge
variant="secondary" variant="secondary"
className="text-xs h-5 px-1.5 shrink-0" className="h-5 shrink-0 px-1.5 text-xs"
> >
+{overflowCount} +{overflowCount}
</Badge> </Badge>
@@ -989,7 +989,7 @@ export function ExtensionManagementDialog({
</Tooltip> </Tooltip>
)} )}
{groupExts.length === 0 && ( {groupExts.length === 0 && (
<span className="text-xs text-muted-foreground truncate min-w-0"> <span className="min-w-0 truncate text-xs text-muted-foreground">
{t("extensions.noExtensionsInGroup")} {t("extensions.noExtensionsInGroup")}
</span> </span>
)} )}
@@ -1010,7 +1010,7 @@ export function ExtensionManagementDialog({
t, t,
); );
return ( return (
<div className="flex items-center gap-2 shrink-0"> <div className="flex shrink-0 items-center gap-2">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
@@ -1025,7 +1025,7 @@ export function ExtensionManagementDialog({
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span className="inline-flex items-center shrink-0"> <span className="inline-flex shrink-0 items-center">
<AnimatedSwitch <AnimatedSwitch
checked={group.sync_enabled} checked={group.sync_enabled}
onCheckedChange={() => void handleToggleGroupSync(group)} onCheckedChange={() => void handleToggleGroupSync(group)}
@@ -1053,7 +1053,7 @@ export function ExtensionManagementDialog({
cell: ({ row }) => { cell: ({ row }) => {
const group = row.original; const group = row.original;
return ( return (
<div className="flex gap-0.5 justify-end shrink-0"> <div className="flex shrink-0 justify-end gap-0.5">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@@ -1116,7 +1116,7 @@ export function ExtensionManagementDialog({
return ( return (
<> <>
<Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}> <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
<DialogContent className="max-w-[min(80rem,calc(100%-4rem))] max-h-[90vh] flex flex-col"> <DialogContent className="flex max-h-[90vh] max-w-[min(80rem,calc(100%-4rem))] flex-col">
{!subPage && ( {!subPage && (
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
@@ -1130,15 +1130,15 @@ export function ExtensionManagementDialog({
</DialogHeader> </DialogHeader>
)} )}
<div className="@container relative w-full flex-1 min-h-0 flex flex-col"> <div className="@container relative flex min-h-0 w-full flex-1 flex-col">
{limitedMode && ( {limitedMode && (
<> <>
<div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" /> <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
<div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
<div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
<div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
<div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
<div className="absolute inset-0 flex items-center justify-center z-[3]"> <div className="absolute inset-0 z-3 flex items-center justify-center">
<div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5"> <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
<ProBadge /> <ProBadge />
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
@@ -1153,9 +1153,9 @@ export function ExtensionManagementDialog({
key={initialTab} key={initialTab}
value={activeTab} value={activeTab}
onValueChange={(v) => setActiveTab(v as "extensions" | "groups")} onValueChange={(v) => setActiveTab(v as "extensions" | "groups")}
className="flex-1 min-h-0 flex flex-col" className="flex min-h-0 flex-1 flex-col"
> >
<div className="flex flex-wrap items-center justify-between gap-2 shrink-0"> <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
<AnimatedTabsList> <AnimatedTabsList>
<AnimatedTabsTrigger <AnimatedTabsTrigger
value="extensions" value="extensions"
@@ -1219,15 +1219,15 @@ export function ExtensionManagementDialog({
</div> </div>
{/* Notice */} {/* Notice */}
<div className="rounded-md bg-muted/50 p-3 text-sm text-muted-foreground mt-4 shrink-0"> <div className="mt-4 shrink-0 rounded-md bg-muted/50 p-3 text-sm text-muted-foreground">
{t("extensions.managedNotice")} {t("extensions.managedNotice")}
</div> </div>
<AnimatedTabsContent <AnimatedTabsContent
value="extensions" value="extensions"
className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col" className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
> >
<div className="flex flex-col gap-4 flex-1 min-h-0"> <div className="flex min-h-0 flex-1 flex-col gap-4">
<Input <Input
id="ext-file-input" id="ext-file-input"
type="file" type="file"
@@ -1291,7 +1291,7 @@ export function ExtensionManagementDialog({
) : ( ) : (
<FadingScrollArea <FadingScrollArea
className={cn( className={cn(
"flex-1 min-h-0", "min-h-0 flex-1",
selectedExtensions.length > 0 && "pb-16", selectedExtensions.length > 0 && "pb-16",
)} )}
style={ style={
@@ -1367,12 +1367,12 @@ export function ExtensionManagementDialog({
<AnimatedTabsContent <AnimatedTabsContent
value="groups" value="groups"
className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col" className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
> >
<div className="flex flex-col gap-4 flex-1 min-h-0"> <div className="flex min-h-0 flex-1 flex-col gap-4">
{/* Create group form */} {/* Create group form */}
{showCreateGroup && ( {showCreateGroup && (
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
<Input <Input
value={newGroupName} value={newGroupName}
onChange={(e) => { onChange={(e) => {
@@ -1412,7 +1412,7 @@ export function ExtensionManagementDialog({
) : ( ) : (
<FadingScrollArea <FadingScrollArea
className={cn( className={cn(
"flex-1 min-h-0", "min-h-0 flex-1",
selectedGroups.length > 0 && "pb-16", selectedGroups.length > 0 && "pb-16",
)} )}
style={ style={
@@ -1509,7 +1509,7 @@ export function ExtensionManagementDialog({
} }
}} }}
> >
<DialogContent className="max-w-lg max-h-[90vh] flex flex-col"> <DialogContent className="flex max-h-[90vh] max-w-lg flex-col">
<DialogHeader> <DialogHeader>
<DialogTitle>{t("extensions.editGroup")}</DialogTitle> <DialogTitle>{t("extensions.editGroup")}</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -1517,7 +1517,7 @@ export function ExtensionManagementDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<ScrollArea className="overflow-y-auto flex-1 -mx-6 px-6"> <ScrollArea className="-mx-6 flex-1 overflow-y-auto px-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("common.labels.name")}</Label> <Label>{t("common.labels.name")}</Label>
@@ -1562,11 +1562,11 @@ export function ExtensionManagementDialog({
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("extensions.groupExtensions")}</Label> <Label>{t("extensions.groupExtensions")}</Label>
{editGroupExtensionIds.length === 0 ? ( {editGroupExtensionIds.length === 0 ? (
<div className="text-sm text-muted-foreground py-2"> <div className="py-2 text-sm text-muted-foreground">
{t("extensions.noExtensionsInGroup")} {t("extensions.noExtensionsInGroup")}
</div> </div>
) : ( ) : (
<div className="space-y-1 max-h-[min(40vh,320px)] overflow-y-auto"> <div className="max-h-[min(40vh,320px)] space-y-1 overflow-y-auto">
{editGroupExtensionIds.map((extId) => { {editGroupExtensionIds.map((extId) => {
const ext = extensions.find((e) => e.id === extId); const ext = extensions.find((e) => e.id === extId);
if (!ext) return null; if (!ext) return null;
@@ -1576,14 +1576,14 @@ export function ExtensionManagementDialog({
className="flex items-center gap-2 rounded-md border px-2 py-1.5" className="flex items-center gap-2 rounded-md border px-2 py-1.5"
> >
{renderExtensionIcon(ext, "sm")} {renderExtensionIcon(ext, "sm")}
<span className="text-sm flex-1 truncate min-w-0"> <span className="min-w-0 flex-1 truncate text-sm">
{ext.name} {ext.name}
</span> </span>
{renderCompatIcons(ext.browser_compatibility)} {renderCompatIcons(ext.browser_compatibility)}
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="size-6 p-0 shrink-0" className="size-6 shrink-0 p-0"
onClick={() => { onClick={() => {
setEditGroupExtensionIds((prev) => setEditGroupExtensionIds((prev) =>
prev.filter((id) => id !== extId), prev.filter((id) => id !== extId),
@@ -1633,7 +1633,7 @@ export function ExtensionManagementDialog({
} }
}} }}
> >
<DialogContent className="max-w-lg max-h-[90vh] flex flex-col"> <DialogContent className="flex max-h-[90vh] max-w-lg flex-col">
<DialogHeader> <DialogHeader>
<DialogTitle>{t("extensions.editExtension")}</DialogTitle> <DialogTitle>{t("extensions.editExtension")}</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -1641,7 +1641,7 @@ export function ExtensionManagementDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<ScrollArea className="overflow-y-auto flex-1 -mx-6 px-6"> <ScrollArea className="-mx-6 flex-1 overflow-y-auto px-6">
{editingExtension && ( {editingExtension && (
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
@@ -1659,8 +1659,8 @@ export function ExtensionManagementDialog({
</div> </div>
{/* Metadata from manifest.json */} {/* Metadata from manifest.json */}
<div className="rounded-md border p-3 space-y-2"> <div className="space-y-2 rounded-md border p-3">
<Label className="text-xs text-muted-foreground uppercase tracking-wide"> <Label className="text-xs tracking-wide text-muted-foreground uppercase">
{t("extensions.metadata")} {t("extensions.metadata")}
</Label> </Label>
<div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm"> <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
@@ -1711,7 +1711,7 @@ export function ExtensionManagementDialog({
href={editingExtension.homepage_url} href={editingExtension.homepage_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-primary hover:underline flex items-center gap-1 min-w-0" className="flex min-w-0 items-center gap-1 text-primary hover:underline"
> >
<span className="truncate"> <span className="truncate">
{editingExtension.homepage_url} {editingExtension.homepage_url}
@@ -1724,7 +1724,7 @@ export function ExtensionManagementDialog({
!editingExtension.author && !editingExtension.author &&
!editingExtension.description && !editingExtension.description &&
!editingExtension.homepage_url && ( !editingExtension.homepage_url && (
<span className="col-span-2 text-muted-foreground text-xs"> <span className="col-span-2 text-xs text-muted-foreground">
{t("extensions.noMetadata")} {t("extensions.noMetadata")}
</span> </span>
)} )}
@@ -1734,7 +1734,7 @@ export function ExtensionManagementDialog({
{/* Re-upload */} {/* Re-upload */}
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("extensions.reupload")}</Label> <Label>{t("extensions.reupload")}</Label>
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
<RippleButton <RippleButton
size="sm" size="sm"
variant="outline" variant="outline"
@@ -1742,7 +1742,7 @@ export function ExtensionManagementDialog({
document.getElementById("ext-edit-file-input")?.click() document.getElementById("ext-edit-file-input")?.click()
} }
> >
<LuUpload className="size-3 mr-1" /> <LuUpload className="mr-1 size-3" />
{t("extensions.selectFile")} {t("extensions.selectFile")}
</RippleButton> </RippleButton>
<input <input
@@ -1753,7 +1753,7 @@ export function ExtensionManagementDialog({
onChange={handleEditFileSelect} onChange={handleEditFileSelect}
/> />
{pendingUpdateFile && ( {pendingUpdateFile && (
<span className="text-xs text-muted-foreground truncate max-w-[200px]"> <span className="max-w-[200px] truncate text-xs text-muted-foreground">
{pendingUpdateFile.name} {pendingUpdateFile.name}
</span> </span>
)} )}
src/components/group-assignment-dialog.tsx
+4 -4
View File
@@ -134,8 +134,8 @@ export function GroupAssignmentDialog({
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("groupAssignment.selectedProfilesLabel")}</Label> <Label>{t("groupAssignment.selectedProfilesLabel")}</Label>
<div className="p-3 bg-muted rounded-md max-h-[min(8rem,20vh)] overflow-y-auto"> <div className="max-h-[min(8rem,20vh)] overflow-y-auto rounded-md bg-muted p-3">
<ul className="text-sm space-y-1"> <ul className="space-y-1 text-sm">
{selectedProfiles.map((profileId) => { {selectedProfiles.map((profileId) => {
// Find the profile name for display // Find the profile name for display
const profile = profiles.find( const profile = profiles.find(
@@ -153,7 +153,7 @@ export function GroupAssignmentDialog({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<Label htmlFor="group-select"> <Label htmlFor="group-select">
{t("groupAssignment.assignGroupLabel")} {t("groupAssignment.assignGroupLabel")}
</Label> </Label>
@@ -198,7 +198,7 @@ export function GroupAssignmentDialog({
</div> </div>
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
src/components/group-management-dialog.tsx
+7 -7
View File
@@ -327,7 +327,7 @@ export function GroupManagementDialog({
onClick={() => { onClick={() => {
column.toggleSorting(column.getIsSorted() === "asc"); column.toggleSorting(column.getIsSorted() === "asc");
}} }}
className="justify-start p-0 h-auto font-semibold text-left cursor-pointer" className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
> >
{t("common.labels.name")} {t("common.labels.name")}
{column.getIsSorted() === "asc" ? ( {column.getIsSorted() === "asc" ? (
@@ -346,7 +346,7 @@ export function GroupManagementDialog({
groupSyncErrors[group.id], groupSyncErrors[group.id],
); );
return ( return (
<div className="flex items-center gap-2 font-medium min-w-0"> <div className="flex min-w-0 items-center gap-2 font-medium">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
@@ -557,7 +557,7 @@ export function GroupManagementDialog({
return ( return (
<> <>
<Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}> <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
<DialogContent className="max-w-[min(60rem,calc(100%-4rem))] max-h-[90vh] flex flex-col"> <DialogContent className="flex max-h-[90vh] max-w-[min(60rem,calc(100%-4rem))] flex-col">
{!subPage && ( {!subPage && (
<DialogHeader> <DialogHeader>
<DialogTitle>{t("groups.management")}</DialogTitle> <DialogTitle>{t("groups.management")}</DialogTitle>
@@ -567,7 +567,7 @@ export function GroupManagementDialog({
</DialogHeader> </DialogHeader>
)} )}
<div className="w-full flex flex-col gap-4 flex-1 min-h-0"> <div className="flex min-h-0 w-full flex-1 flex-col gap-4">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h2 className="text-base font-semibold"> <h2 className="text-base font-semibold">
@@ -582,7 +582,7 @@ export function GroupManagementDialog({
onClick={() => { onClick={() => {
setCreateDialogOpen(true); setCreateDialogOpen(true);
}} }}
className="flex gap-2 items-center shrink-0" className="flex shrink-0 items-center gap-2"
> >
<GoPlus className="size-4" /> <GoPlus className="size-4" />
{t("proxies.management.create")} {t("proxies.management.create")}
@@ -590,7 +590,7 @@ export function GroupManagementDialog({
</div> </div>
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
@@ -607,7 +607,7 @@ export function GroupManagementDialog({
) : ( ) : (
<FadingScrollArea <FadingScrollArea
className={cn( className={cn(
"flex-1 min-h-0", "min-h-0 flex-1",
selectedGroupsForBulk.length > 0 && "pb-16", selectedGroupsForBulk.length > 0 && "pb-16",
)} )}
style={ style={
src/components/home-header.tsx
+18 -18
View File
@@ -175,7 +175,7 @@ const HomeHeader = ({
onPointerCancel={handlePointerEnd} onPointerCancel={handlePointerEnd}
onDoubleClick={handleDoubleClick} onDoubleClick={handleDoubleClick}
className={cn( className={cn(
"flex items-center gap-2 h-11 pl-3 border-b border-border bg-card select-none", "flex h-11 items-center gap-2 border-b border-border bg-card pl-3 select-none",
// Windows: WindowDragArea renders three 44px native-style controls // Windows: WindowDragArea renders three 44px native-style controls
// (minimize + maximize/restore + close) fixed at top-right with // (minimize + maximize/restore + close) fixed at top-right with
// z-50, total 132px wide. Reserve 144px on the right edge so the // z-50, total 132px wide. Reserve 144px on the right edge so the
@@ -187,24 +187,24 @@ const HomeHeader = ({
{isMacOS && ( {isMacOS && (
<div <div
aria-hidden="true" aria-hidden="true"
className="flex items-center gap-[7px] mr-1 shrink-0" className="mr-1 flex shrink-0 items-center gap-[7px]"
> >
{/* Reserve space for the macOS native traffic lights — the OS draws {/* Reserve space for the macOS native traffic lights — the OS draws
the colored buttons here through the transparent titlebar. */} the colored buttons here through the transparent titlebar. */}
<div className="w-[11px] h-[11px] rounded-full" /> <div className="size-[11px] rounded-full" />
<div className="w-[11px] h-[11px] rounded-full" /> <div className="size-[11px] rounded-full" />
<div className="w-[11px] h-[11px] rounded-full" /> <div className="size-[11px] rounded-full" />
</div> </div>
)} )}
{pageTitle ? ( {pageTitle ? (
<span className="text-xs font-semibold text-card-foreground ml-2"> <span className="ml-2 text-xs font-semibold text-card-foreground">
{pageTitle} {pageTitle}
</span> </span>
) : null} ) : null}
{showProfileToolbar && ( {showProfileToolbar && (
<div className="relative flex-1 min-w-0 flex items-center"> <div className="relative flex min-w-0 flex-1 items-center">
{groupsFadeLeft && ( {groupsFadeLeft && (
<button <button
type="button" type="button"
@@ -217,14 +217,14 @@ const HomeHeader = ({
behavior: "smooth", behavior: "smooth",
}); });
}} }}
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center size-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm" className="absolute top-1/2 left-0 z-10 grid size-5 -translate-y-1/2 place-items-center rounded-full bg-card/90 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
> >
<LuChevronLeft className="size-3" /> <LuChevronLeft className="size-3" />
</button> </button>
)} )}
<div <div
ref={groupsScrollRef} ref={groupsScrollRef}
className="flex items-center gap-3 ml-2 overflow-x-auto scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden" className="ml-2 flex scrollbar-none items-center gap-3 overflow-x-auto scroll-smooth [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
style={{ style={{
paddingLeft: groupsFadeLeft ? 22 : 0, paddingLeft: groupsFadeLeft ? 22 : 0,
paddingRight: groupsFadeRight ? 22 : 0, paddingRight: groupsFadeRight ? 22 : 0,
@@ -241,9 +241,9 @@ const HomeHeader = ({
onGroupSelect(ALL_FILTER_ID); onGroupSelect(ALL_FILTER_ID);
}} }}
className={cn( className={cn(
"flex items-center gap-1.5 h-7 px-1 text-xs transition-colors duration-100 shrink-0", "flex h-7 shrink-0 items-center gap-1.5 px-1 text-xs transition-colors duration-100",
active active
? "text-foreground font-medium" ? "font-medium text-foreground"
: "text-muted-foreground hover:text-foreground", : "text-muted-foreground hover:text-foreground",
)} )}
> >
@@ -265,9 +265,9 @@ const HomeHeader = ({
onGroupSelect(active ? ALL_FILTER_ID : group.id); onGroupSelect(active ? ALL_FILTER_ID : group.id);
}} }}
className={cn( className={cn(
"flex items-center gap-1.5 h-7 px-1 text-xs transition-colors duration-100 shrink-0", "flex h-7 shrink-0 items-center gap-1.5 px-1 text-xs transition-colors duration-100",
active active
? "text-foreground font-medium" ? "font-medium text-foreground"
: "text-muted-foreground hover:text-foreground", : "text-muted-foreground hover:text-foreground",
)} )}
> >
@@ -291,7 +291,7 @@ const HomeHeader = ({
behavior: "smooth", behavior: "smooth",
}); });
}} }}
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center size-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm" className="absolute top-1/2 right-0 z-10 grid size-5 -translate-y-1/2 place-items-center rounded-full bg-card/90 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
> >
<LuChevronRight className="size-3" /> <LuChevronRight className="size-3" />
</button> </button>
@@ -310,16 +310,16 @@ const HomeHeader = ({
onChange={(e) => { onChange={(e) => {
onSearchQueryChange(e.target.value); onSearchQueryChange(e.target.value);
}} }}
className="pr-7 pl-8 w-36 min-[860px]:w-52 h-7 text-xs" className="h-7 w-36 pr-7 pl-8 text-xs min-[860px]:w-52"
/> />
<LuSearch className="absolute left-2.5 top-1/2 size-3.5 transform -translate-y-1/2 text-muted-foreground pointer-events-none" /> <LuSearch className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 transform text-muted-foreground" />
{searchQuery ? ( {searchQuery ? (
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
onSearchQueryChange(""); onSearchQueryChange("");
}} }}
className="absolute right-1.5 top-1/2 p-0.5 rounded-sm transition-colors transform -translate-y-1/2 hover:bg-accent" className="absolute top-1/2 right-1.5 -translate-y-1/2 transform rounded-sm p-0.5 transition-colors hover:bg-accent"
aria-label={t("header.clearSearch")} aria-label={t("header.clearSearch")}
> >
<LuX className="size-3.5 text-muted-foreground hover:text-foreground" /> <LuX className="size-3.5 text-muted-foreground hover:text-foreground" />
@@ -338,7 +338,7 @@ const HomeHeader = ({
onClick={() => { onClick={() => {
onCreateProfileDialogOpen(true); onCreateProfileDialogOpen(true);
}} }}
className="flex gap-1.5 items-center h-7 px-2.5 text-xs" className="flex h-7 items-center gap-1.5 px-2.5 text-xs"
> >
<GoPlus className="size-3.5" /> <GoPlus className="size-3.5" />
{t("header.newProfile")} {t("header.newProfile")}
src/components/import-profile-dialog.tsx
+8 -8
View File
@@ -306,7 +306,7 @@ export function ImportProfileDialog({
return ( return (
<Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}> <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
<DialogContent className="max-w-[min(48rem,calc(100%-4rem))] max-h-[80vh] flex flex-col"> <DialogContent className="flex max-h-[80vh] max-w-[min(48rem,calc(100%-4rem))] flex-col">
{!subPage && ( {!subPage && (
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle>{t("importProfile.title")}</DialogTitle> <DialogTitle>{t("importProfile.title")}</DialogTitle>
@@ -315,7 +315,7 @@ export function ImportProfileDialog({
<div <div
className={cn( className={cn(
"overflow-y-auto flex-1 space-y-6 min-h-0", "min-h-0 flex-1 space-y-6 overflow-y-auto",
subPage && "mx-auto w-full max-w-2xl", subPage && "mx-auto w-full max-w-2xl",
)} )}
> >
@@ -389,7 +389,7 @@ export function ImportProfileDialog({
key={profile.path} key={profile.path}
value={profile.path} value={profile.path}
> >
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
{IconComponent && ( {IconComponent && (
<IconComponent className="size-4" /> <IconComponent className="size-4" />
)} )}
@@ -413,7 +413,7 @@ export function ImportProfileDialog({
</div> </div>
{selectedProfile && ( {selectedProfile && (
<div className="p-3 rounded-lg bg-muted"> <div className="rounded-lg bg-muted p-3">
<p className="text-sm break-all"> <p className="text-sm break-all">
<span className="font-medium"> <span className="font-medium">
{t("importProfile.pathLabel")} {t("importProfile.pathLabel")}
@@ -481,7 +481,7 @@ export function ImportProfileDialog({
const IconComponent = getBrowserIcon(browser); const IconComponent = getBrowserIcon(browser);
return ( return (
<SelectItem key={browser} value={browser}> <SelectItem key={browser} value={browser}>
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
{IconComponent && ( {IconComponent && (
<IconComponent className="size-4" /> <IconComponent className="size-4" />
)} )}
@@ -518,7 +518,7 @@ export function ImportProfileDialog({
<FaFolder className="size-4" /> <FaFolder className="size-4" />
</Button> </Button>
</div> </div>
<p className="mt-2 text-xs text-muted-foreground break-all"> <p className="mt-2 text-xs break-all text-muted-foreground">
{t("importProfile.examplePaths")} {t("importProfile.examplePaths")}
<br /> <br />
macOS: ~/Library/Application macOS: ~/Library/Application
@@ -604,9 +604,9 @@ export function ImportProfileDialog({
<div <div
className={cn( className={cn(
"shrink-0 flex gap-2 items-center justify-end", "flex shrink-0 items-center justify-end gap-2",
subPage subPage
? "pt-2 border-t border-border mx-auto w-full max-w-2xl" ? "mx-auto w-full max-w-2xl border-t border-border pt-2"
: undefined, : undefined,
)} )}
> >
src/components/integrations-dialog.tsx
+30 -30
View File
@@ -308,7 +308,7 @@ export function IntegrationsDialog({
}} }}
subPage={subPage} subPage={subPage}
> >
<DialogContent className="max-w-3xl max-h-[calc(100vh-5rem)] flex flex-col"> <DialogContent className="flex max-h-[calc(100vh-5rem)] max-w-3xl flex-col">
{!subPage && ( {!subPage && (
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle>{t("integrations.title")}</DialogTitle> <DialogTitle>{t("integrations.title")}</DialogTitle>
@@ -317,8 +317,8 @@ export function IntegrationsDialog({
<div <div
className={cn( className={cn(
"overflow-y-auto flex-1 min-h-0", "min-h-0 flex-1 overflow-y-auto",
subPage && "w-full max-w-3xl mx-auto", subPage && "mx-auto w-full max-w-3xl",
)} )}
> >
<AnimatedTabs key={initialTab} defaultValue={initialTab}> <AnimatedTabs key={initialTab} defaultValue={initialTab}>
@@ -333,12 +333,12 @@ export function IntegrationsDialog({
<AnimatedTabsContent <AnimatedTabsContent
value="api" value="api"
className="mt-4 flex flex-col gap-4 @container" className="@container mt-4 flex flex-col gap-4"
> >
<div className="rounded-md border bg-card p-4 flex flex-col gap-4"> <div className="flex flex-col gap-4 rounded-md border bg-card p-4">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<LuPlug className="size-5 mt-0.5 text-muted-foreground" /> <LuPlug className="mt-0.5 size-5 text-muted-foreground" />
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Label className="text-sm font-medium"> <Label className="text-sm font-medium">
{t("integrations.apiEnableLabel")} {t("integrations.apiEnableLabel")}
@@ -370,9 +370,9 @@ export function IntegrationsDialog({
{settings.api_enabled && ( {settings.api_enabled && (
<> <>
<div className="grid grid-cols-1 @2xl:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
<div className="rounded-md border bg-card p-4 flex flex-col gap-2"> <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
<Label className="text-[10px] uppercase tracking-wide text-muted-foreground"> <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("integrations.apiPortLabel")} {t("integrations.apiPortLabel")}
</Label> </Label>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -463,9 +463,9 @@ export function IntegrationsDialog({
</div> </div>
</div> </div>
<div className="rounded-md border bg-card p-4 flex flex-col gap-2"> <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label className="text-[10px] uppercase tracking-wide text-muted-foreground"> <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("integrations.apiTokenLabel")} {t("integrations.apiTokenLabel")}
</Label> </Label>
</div> </div>
@@ -475,13 +475,13 @@ export function IntegrationsDialog({
type={showApiToken ? "text" : "password"} type={showApiToken ? "text" : "password"}
value={settings.api_token ?? ""} value={settings.api_token ?? ""}
readOnly readOnly
className="font-mono pr-10" className="pr-10 font-mono"
/> />
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" size="sm"
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent" className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
onClick={() => { onClick={() => {
setShowApiToken(!showApiToken); setShowApiToken(!showApiToken);
}} }}
@@ -501,9 +501,9 @@ export function IntegrationsDialog({
</div> </div>
</div> </div>
<div className="rounded-md border bg-card p-4 flex flex-col gap-2"> <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label className="text-[10px] uppercase tracking-wide text-muted-foreground"> <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("integrations.apiExampleRequest")} {t("integrations.apiExampleRequest")}
</Label> </Label>
<CopyToClipboard <CopyToClipboard
@@ -511,7 +511,7 @@ export function IntegrationsDialog({
successMessage={t("common.buttons.copied")} successMessage={t("common.buttons.copied")}
/> />
</div> </div>
<pre className="font-mono text-[11px] whitespace-pre overflow-x-auto bg-background rounded p-3"> <pre className="overflow-x-auto rounded bg-background p-3 font-mono text-[11px] whitespace-pre">
{`curl -H "Authorization: Bearer \${TOKEN}" \\ {`curl -H "Authorization: Bearer \${TOKEN}" \\
http://127.0.0.1:${apiServerPort ?? settings.api_port}/v1/profiles`} http://127.0.0.1:${apiServerPort ?? settings.api_port}/v1/profiles`}
</pre> </pre>
@@ -524,10 +524,10 @@ export function IntegrationsDialog({
value="mcp" value="mcp"
className="mt-4 flex flex-col gap-5" className="mt-4 flex flex-col gap-5"
> >
<div className="rounded-md border bg-card p-4 flex flex-col gap-4"> <div className="flex flex-col gap-4 rounded-md border bg-card p-4">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<LuZap className="size-5 mt-0.5 text-muted-foreground" /> <LuZap className="mt-0.5 size-5 text-muted-foreground" />
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Label className="text-sm font-medium"> <Label className="text-sm font-medium">
{t("integrations.mcpEnableLabel")} {t("integrations.mcpEnableLabel")}
@@ -552,8 +552,8 @@ export function IntegrationsDialog({
{mcpConfig && ( {mcpConfig && (
<> <>
<div className="rounded-md border bg-card p-4 flex flex-col gap-2"> <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
<Label className="text-[10px] uppercase tracking-wide text-muted-foreground"> <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("integrations.mcp.url")} {t("integrations.mcp.url")}
</Label> </Label>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
@@ -562,13 +562,13 @@ export function IntegrationsDialog({
type={showMcpUrl ? "text" : "password"} type={showMcpUrl ? "text" : "password"}
value={mcpUrl} value={mcpUrl}
readOnly readOnly
className="font-mono text-xs pr-10" className="pr-10 font-mono text-xs"
/> />
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" size="sm"
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent" className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
onClick={() => { onClick={() => {
setShowMcpUrl(!showMcpUrl); setShowMcpUrl(!showMcpUrl);
}} }}
@@ -587,32 +587,32 @@ export function IntegrationsDialog({
</div> </div>
</div> </div>
<div className="flex flex-col gap-3 @container"> <div className="@container flex flex-col gap-3">
<Label className="text-[10px] uppercase tracking-wide text-muted-foreground"> <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("integrations.mcp.clientsLabel")} {t("integrations.mcp.clientsLabel")}
</Label> </Label>
<div className="grid grid-cols-1 @2xl:grid-cols-2 gap-3"> <div className="grid grid-cols-1 gap-3 @2xl:grid-cols-2">
{agents.map((agent) => { {agents.map((agent) => {
const busy = busyAgentIds.has(agent.id); const busy = busyAgentIds.has(agent.id);
return ( return (
<div <div
key={agent.id} key={agent.id}
className="rounded-md border bg-card px-3 py-2.5 flex items-center gap-3" className="flex items-center gap-3 rounded-md border bg-card px-3 py-2.5"
> >
<div className="grid place-items-center size-8 rounded-md bg-muted shrink-0"> <div className="grid size-8 shrink-0 place-items-center rounded-md bg-muted">
<AgentIcon category={agent.category} /> <AgentIcon category={agent.category} />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium truncate"> <p className="truncate text-sm font-medium">
{agent.display_name} {agent.display_name}
</p> </p>
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{categoryLabel(t, agent.category)} {categoryLabel(t, agent.category)}
</p> </p>
</div> </div>
{agent.connected ? ( {agent.connected ? (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="inline-flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-foreground"> <span className="inline-flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-[10px] font-medium tracking-wide text-foreground uppercase">
<LuCheck className="size-3" /> <LuCheck className="size-3" />
{t("integrations.mcp.connected")} {t("integrations.mcp.connected")}
</span> </span>
src/components/location-proxy-dialog.tsx
+1 -1
View File
@@ -233,7 +233,7 @@ export function LocationProxyDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 overflow-y-auto min-h-0 max-h-[calc(100vh-16rem)] pr-1"> <div className="max-h-[calc(100vh-16rem)] min-h-0 space-y-4 overflow-y-auto pr-1">
{/* Country - always visible */} {/* Country - always visible */}
<div className="space-y-2"> <div className="space-y-2">
<Label className="flex items-center gap-2"> <Label className="flex items-center gap-2">
src/components/multiple-selector.tsx
+7 -7
View File
@@ -152,7 +152,7 @@ const CommandEmpty = forwardRef<
return ( return (
<div <div
ref={forwardedRef} ref={forwardedRef}
className={cn("py-6 text-sm text-center", className)} className={cn("py-6 text-center text-sm", className)}
cmdk-empty="" cmdk-empty=""
role="presentation" role="presentation"
{...props} {...props}
@@ -428,8 +428,8 @@ const MultipleSelector = React.forwardRef<
<Badge <Badge
key={option.value} key={option.value}
className={cn( className={cn(
"data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground", "data-disabled:bg-muted-foreground data-disabled:text-muted data-disabled:hover:bg-muted-foreground",
"data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground", "data-fixed:bg-muted-foreground data-fixed:text-muted data-fixed:hover:bg-muted-foreground",
badgeClassName, badgeClassName,
)} )}
data-fixed={option.fixed} data-fixed={option.fixed}
@@ -439,7 +439,7 @@ const MultipleSelector = React.forwardRef<
<button <button
type="button" type="button"
className={cn( className={cn(
"cursor-pointer ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2", "ml-1 cursor-pointer rounded-full ring-offset-background outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
(disabled ?? option.fixed) && "hidden", (disabled ?? option.fixed) && "hidden",
)} )}
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -525,7 +525,7 @@ const MultipleSelector = React.forwardRef<
"flex-1 bg-transparent outline-none placeholder:text-muted-foreground", "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
{ {
"w-full": hidePlaceholderWhenSelected, "w-full": hidePlaceholderWhenSelected,
"px-3 mt-1": selected.length === 0, "mt-1 px-3": selected.length === 0,
"ml-1": selected.length !== 0, "ml-1": selected.length !== 0,
}, },
inputProps?.className, inputProps?.className,
@@ -537,7 +537,7 @@ const MultipleSelector = React.forwardRef<
{open && hasAvailableOptions && ( {open && hasAvailableOptions && (
<CommandList <CommandList
className={cn( className={cn(
"absolute z-10 w-full rounded-md border shadow-md outline-none bg-popover text-popover-foreground animate-in", "absolute z-10 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
dropUp ? "bottom-full mb-1" : "top-full mt-1", dropUp ? "bottom-full mb-1" : "top-full mt-1",
)} )}
> >
@@ -554,7 +554,7 @@ const MultipleSelector = React.forwardRef<
<CommandGroup <CommandGroup
key={key} key={key}
heading={key} heading={key}
className="overflow-auto max-h-48" className="max-h-48 overflow-auto"
> >
{dropdowns.map((option) => { {dropdowns.map((option) => {
return ( return (
src/components/onboarding-card.tsx
+11 -11
View File
@@ -28,26 +28,26 @@ export function OnboardingCard({
const requiresAction = step.selector === '[data-onborda="create-profile"]'; const requiresAction = step.selector === '[data-onborda="create-profile"]';
return ( return (
<div className="relative p-4 w-80 max-w-[90vw] rounded-lg border shadow-lg bg-popover text-popover-foreground"> <div className="relative w-80 max-w-[90vw] rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg">
<div className="flex gap-2 items-start justify-between"> <div className="flex items-start justify-between gap-2">
<h3 className="text-sm font-semibold leading-tight">{step.title}</h3> <h3 className="text-sm/tight font-semibold">{step.title}</h3>
<span className="shrink-0 text-[11px] tabular-nums text-muted-foreground"> <span className="shrink-0 text-[11px] text-muted-foreground tabular-nums">
{currentStep + 1}/{totalSteps} {currentStep + 1}/{totalSteps}
</span> </span>
</div> </div>
<div className="mt-2 text-xs leading-relaxed text-muted-foreground"> <div className="mt-2 text-xs/relaxed text-muted-foreground">
{step.content} {step.content}
</div> </div>
<div className="flex gap-2 items-center justify-between mt-4"> <div className="mt-4 flex items-center justify-between gap-2">
{isLast ? ( {isLast ? (
<span /> <span />
) : ( ) : (
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-xs h-7 px-2 text-muted-foreground hover:text-foreground" className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
onClick={() => { onClick={() => {
closeOnborda(); closeOnborda();
}} }}
@@ -56,12 +56,12 @@ export function OnboardingCard({
</Button> </Button>
)} )}
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
{!isFirst && !isLast && ( {!isFirst && !isLast && (
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="text-xs h-7 px-2.5" className="h-7 px-2.5 text-xs"
onClick={() => { onClick={() => {
prevStep(); prevStep();
}} }}
@@ -72,7 +72,7 @@ export function OnboardingCard({
{isLast ? ( {isLast ? (
<Button <Button
size="sm" size="sm"
className="text-xs h-7 px-3" className="h-7 px-3 text-xs"
onClick={() => { onClick={() => {
closeOnborda(); closeOnborda();
window.dispatchEvent(new Event(ONBOARDING_TOUR_FINISHED_EVENT)); window.dispatchEvent(new Event(ONBOARDING_TOUR_FINISHED_EVENT));
@@ -83,7 +83,7 @@ export function OnboardingCard({
) : requiresAction ? null : ( ) : requiresAction ? null : (
<Button <Button
size="sm" size="sm"
className="text-xs h-7 px-3" className="h-7 px-3 text-xs"
onClick={() => { onClick={() => {
nextStep(); nextStep();
}} }}
src/components/permission-dialog.tsx
+1 -1
View File
@@ -206,7 +206,7 @@ export function PermissionDialog({
<div className="space-y-4"> <div className="space-y-4">
{!isCurrentPermissionGranted && ( {!isCurrentPermissionGranted && (
<div className="p-3 bg-warning/10 rounded-lg"> <div className="rounded-lg bg-warning/10 p-3">
<p className="text-sm text-warning"> <p className="text-sm text-warning">
{permissionType === "microphone" {permissionType === "microphone"
? t("permissionDialog.notGrantedMicrophone") ? t("permissionDialog.notGrantedMicrophone")
src/components/profile-data-table.tsx
+61 -61
View File
@@ -365,10 +365,10 @@ function ExtCell({
<button <button
type="button" type="button"
disabled={isSaving} disabled={isSaving}
className="flex items-center gap-1.5 h-7 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded transition-colors duration-100 w-full text-left disabled:opacity-50" className="flex h-7 w-full items-center gap-1.5 rounded px-1.5 text-left text-xs text-muted-foreground transition-colors duration-100 hover:bg-accent/50 hover:text-foreground disabled:opacity-50"
> >
<LuPuzzle className="size-3 shrink-0" /> <LuPuzzle className="size-3 shrink-0" />
<span className="truncate flex-1" title={label}> <span className="flex-1 truncate" title={label}>
{label} {label}
</span> </span>
<LuChevronDown className="size-3 shrink-0 text-muted-foreground" /> <LuChevronDown className="size-3 shrink-0 text-muted-foreground" />
@@ -460,7 +460,7 @@ function DnsCell({
type="button" type="button"
data-onborda="dns-blocklist" data-onborda="dns-blocklist"
disabled={isSaving} disabled={isSaving}
className="flex items-center gap-1.5 h-7 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded transition-colors duration-100 w-full text-left disabled:opacity-50" className="flex h-7 w-full items-center gap-1.5 rounded px-1.5 text-left text-xs text-muted-foreground transition-colors duration-100 hover:bg-accent/50 hover:text-foreground disabled:opacity-50"
title={ title={
level level
? meta.t("profiles.table.dnsLevel", { level }) ? meta.t("profiles.table.dnsLevel", { level })
@@ -681,9 +681,9 @@ const TagsCell = React.memo<{
type="button" type="button"
ref={containerRef as unknown as React.RefObject<HTMLButtonElement>} ref={containerRef as unknown as React.RefObject<HTMLButtonElement>}
className={cn( className={cn(
"flex overflow-hidden gap-1 items-center px-2 py-1 h-6 w-full bg-transparent rounded border-none cursor-pointer", "flex h-6 w-full cursor-pointer items-center gap-1 overflow-hidden rounded border-none bg-transparent px-2 py-1",
isDisabled isDisabled
? "opacity-60 cursor-not-allowed" ? "cursor-not-allowed opacity-60"
: "cursor-pointer hover:bg-accent/50", : "cursor-pointer hover:bg-accent/50",
)} )}
onClick={() => { onClick={() => {
@@ -709,7 +709,7 @@ const TagsCell = React.memo<{
); );
return ( return (
<div className="w-full h-6 cursor-pointer"> <div className="h-6 w-full cursor-pointer">
<Tooltip> <Tooltip>
<TooltipTrigger asChild>{ButtonContent}</TooltipTrigger> <TooltipTrigger asChild>{ButtonContent}</TooltipTrigger>
{hiddenCount > 0 && ( {hiddenCount > 0 && (
@@ -735,13 +735,13 @@ const TagsCell = React.memo<{
return ( return (
<div <div
className={cn( className={cn(
"w-full h-6 relative", "relative h-6 w-full",
isDisabled && "opacity-60 pointer-events-none", isDisabled && "pointer-events-none opacity-60",
)} )}
> >
<div <div
ref={editorRef} ref={editorRef}
className="absolute top-0 left-0 z-50 w-40 min-h-6 bg-popover rounded-md shadow-md" className="absolute top-0 left-0 z-50 min-h-6 w-40 rounded-md bg-popover shadow-md"
> >
<MultipleSelector <MultipleSelector
value={valueOptions} value={valueOptions}
@@ -755,11 +755,11 @@ const TagsCell = React.memo<{
: "" : ""
} }
className={cn( className={cn(
"bg-transparent border-0! focus-within:ring-0!", "border-0! bg-transparent focus-within:ring-0!",
"[&_div:first-child]:border-0! [&_div:first-child]:ring-0! [&_div:first-child]:focus-within:ring-0!", "[&_div:first-child]:border-0! [&_div:first-child]:ring-0! [&_div:first-child]:focus-within:ring-0!",
"[&_div:first-child]:min-h-6! [&_div:first-child]:px-2! [&_div:first-child]:py-1!", "[&_div:first-child]:min-h-6! [&_div:first-child]:px-2! [&_div:first-child]:py-1!",
"[&_div:first-child>div]:items-center [&_div:first-child>div]:h-6!", "[&_div:first-child>div]:h-6! [&_div:first-child>div]:items-center",
"[&_input]:ml-0! [&_input]:mt-0! [&_input]:px-0!", "[&_input]:mt-0! [&_input]:ml-0! [&_input]:px-0!",
!isFocused && "[&_div:first-child>div]:justify-center", !isFocused && "[&_div:first-child>div]:justify-center",
)} )}
badgeClassName="shrink-0" badgeClassName="shrink-0"
@@ -859,7 +859,7 @@ const OverflowTooltipText = React.memo<{
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span <span
ref={textRef} ref={textRef}
className={cn("block min-w-0 max-w-full truncate", className)} className={cn("block max-w-full min-w-0 truncate", className)}
> >
{text} {text}
</span> </span>
@@ -894,16 +894,16 @@ const ProxyCellTrigger = React.memo<{
<PopoverTrigger asChild> <PopoverTrigger asChild>
<span <span
className={cn( className={cn(
"flex gap-2 items-center px-2 py-1 rounded min-w-0 max-w-full", "flex max-w-full min-w-0 items-center gap-2 rounded px-2 py-1",
isDisabled isDisabled
? "opacity-60 cursor-not-allowed pointer-events-none" ? "pointer-events-none cursor-not-allowed opacity-60"
: "cursor-pointer hover:bg-accent/50", : "cursor-pointer hover:bg-accent/50",
)} )}
> >
{vpnBadge && ( {vpnBadge && (
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1 py-0 leading-tight shrink-0" className="shrink-0 px-1 py-0 text-[10px] leading-tight"
> >
{vpnBadge} {vpnBadge}
</Badge> </Badge>
@@ -911,7 +911,7 @@ const ProxyCellTrigger = React.memo<{
<span <span
ref={textRef} ref={textRef}
className={cn( className={cn(
"text-sm min-w-0 truncate", "min-w-0 truncate text-sm",
!hasAssignment && "text-muted-foreground", !hasAssignment && "text-muted-foreground",
)} )}
> >
@@ -1037,15 +1037,15 @@ const NoteCell = React.memo<{
if (openNoteEditorFor !== profile.id) { if (openNoteEditorFor !== profile.id) {
return ( return (
<div className="w-full min-h-6"> <div className="min-h-6 w-full">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <button
type="button" type="button"
className={cn( className={cn(
"flex items-center px-2 py-1 min-h-6 w-full min-w-0 bg-transparent rounded border-none text-left", "flex min-h-6 w-full min-w-0 items-center rounded border-none bg-transparent px-2 py-1 text-left",
isDisabled isDisabled
? "opacity-60 cursor-not-allowed" ? "cursor-not-allowed opacity-60"
: "cursor-pointer hover:bg-accent/50", : "cursor-pointer hover:bg-accent/50",
)} )}
onClick={() => { onClick={() => {
@@ -1057,7 +1057,7 @@ const NoteCell = React.memo<{
> >
<span <span
className={cn( className={cn(
"text-sm truncate block w-full", "block w-full truncate text-sm",
!effectiveNote && "text-muted-foreground", !effectiveNote && "text-muted-foreground",
)} )}
> >
@@ -1067,7 +1067,7 @@ const NoteCell = React.memo<{
</TooltipTrigger> </TooltipTrigger>
{showTooltip && ( {showTooltip && (
<TooltipContent className="max-w-[320px]"> <TooltipContent className="max-w-[320px]">
<p className="whitespace-pre-wrap wrap-break-word"> <p className="wrap-break-word whitespace-pre-wrap">
{effectiveNote ?? t("profiles.note.empty")} {effectiveNote ?? t("profiles.note.empty")}
</p> </p>
</TooltipContent> </TooltipContent>
@@ -1080,13 +1080,13 @@ const NoteCell = React.memo<{
return ( return (
<div <div
className={cn( className={cn(
"w-full relative", "relative w-full",
isDisabled && "opacity-60 pointer-events-none", isDisabled && "pointer-events-none opacity-60",
)} )}
> >
<div <div
ref={editorRef} ref={editorRef}
className="absolute -top-[15px] -left-px z-50 w-60 min-h-6 bg-popover rounded-md shadow-md border" className="absolute top-[-15px] -left-px z-50 min-h-6 w-60 rounded-md border bg-popover shadow-md"
> >
<textarea <textarea
ref={textareaRef} ref={textareaRef}
@@ -1106,7 +1106,7 @@ const NoteCell = React.memo<{
setOpenNoteEditorFor(null); setOpenNoteEditorFor(null);
}} }}
placeholder={t("profiles.note.placeholder")} placeholder={t("profiles.note.placeholder")}
className="w-full min-h-6 max-h-[200px] px-2 py-1 text-sm bg-transparent border-0 resize-none focus:outline-none focus:ring-0" className="max-h-[200px] min-h-6 w-full resize-none border-0 bg-transparent px-2 py-1 text-sm focus:ring-0 focus:outline-none"
style={{ style={{
overflow: "auto", overflow: "auto",
}} }}
@@ -2103,18 +2103,18 @@ export function ProfilesDataTable({
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span className="flex justify-center items-center size-4"> <span className="flex size-4 items-center justify-center">
<button <button
type="button" type="button"
className="flex justify-center items-center p-0 border-none cursor-pointer" className="flex cursor-pointer items-center justify-center border-none p-0"
onClick={() => { onClick={() => {
meta.handleIconClick(profile.id); meta.handleIconClick(profile.id);
}} }}
aria-label={t("common.aria.selectProfile")} aria-label={t("common.aria.selectProfile")}
> >
<span className="size-4 group"> <span className="group size-4">
<OsIcon className="size-4 text-muted-foreground group-hover:hidden" /> <OsIcon className="size-4 text-muted-foreground group-hover:hidden" />
<span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none size-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" /> <span className="peer pointer-events-none hidden size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow duration-150 outline-none group-hover:block dark:bg-input/30 dark:data-[state=checked]:bg-primary" />
</span> </span>
</button> </button>
</span> </span>
@@ -2142,7 +2142,7 @@ export function ProfilesDataTable({
sideOffset={4} sideOffset={4}
horizontalOffset={8} horizontalOffset={8}
> >
<span className="flex justify-center items-center size-4"> <span className="flex size-4 items-center justify-center">
<Checkbox <Checkbox
checked={isSelected} checked={isSelected}
onCheckedChange={(value) => { onCheckedChange={(value) => {
@@ -2168,7 +2168,7 @@ export function ProfilesDataTable({
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span className="flex justify-center items-center size-4 cursor-not-allowed"> <span className="flex size-4 cursor-not-allowed items-center justify-center">
{IconComponent && ( {IconComponent && (
<IconComponent className="size-4 opacity-50" /> <IconComponent className="size-4 opacity-50" />
)} )}
@@ -2190,7 +2190,7 @@ export function ProfilesDataTable({
sideOffset={4} sideOffset={4}
horizontalOffset={8} horizontalOffset={8}
> >
<span className="flex justify-center items-center size-4"> <span className="flex size-4 items-center justify-center">
<Checkbox <Checkbox
checked={isSelected} checked={isSelected}
onCheckedChange={(value) => { onCheckedChange={(value) => {
@@ -2210,20 +2210,20 @@ export function ProfilesDataTable({
sideOffset={4} sideOffset={4}
horizontalOffset={8} horizontalOffset={8}
> >
<span className="flex relative justify-center items-center size-4"> <span className="relative flex size-4 items-center justify-center">
<button <button
type="button" type="button"
className="flex justify-center items-center p-0 border-none cursor-pointer" className="flex cursor-pointer items-center justify-center border-none p-0"
onClick={() => { onClick={() => {
meta.handleIconClick(profile.id); meta.handleIconClick(profile.id);
}} }}
aria-label={t("common.aria.selectProfile")} aria-label={t("common.aria.selectProfile")}
> >
<span className="size-4 group"> <span className="group size-4">
{IconComponent && ( {IconComponent && (
<IconComponent className="size-4 group-hover:hidden" /> <IconComponent className="size-4 group-hover:hidden" />
)} )}
<span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none size-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" /> <span className="peer pointer-events-none hidden size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow duration-150 outline-none group-hover:block dark:bg-input/30 dark:data-[state=checked]:bg-primary" />
</span> </span>
</button> </button>
</span> </span>
@@ -2332,7 +2332,7 @@ export function ProfilesDataTable({
: "default"; : "default";
return ( return (
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
{isDesynced && ( {isDesynced && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@@ -2360,8 +2360,8 @@ export function ProfilesDataTable({
: meta.t("profiles.actions.launch") : meta.t("profiles.actions.launch")
} }
className={cn( className={cn(
"size-7 p-0 grid place-items-center", "grid size-7 place-items-center p-0",
!canLaunch && "opacity-50 cursor-not-allowed", !canLaunch && "cursor-not-allowed opacity-50",
canLaunch && "cursor-pointer", canLaunch && "cursor-pointer",
isFollower && "border-accent", isFollower && "border-accent",
isRunning && isRunning &&
@@ -2374,7 +2374,7 @@ export function ProfilesDataTable({
} }
> >
{isLaunching || isStopping ? ( {isLaunching || isStopping ? (
<div className="size-3 rounded-full border border-current animate-spin border-t-transparent" /> <div className="size-3 animate-spin rounded-full border border-current border-t-transparent" />
) : isRunning ? ( ) : isRunning ? (
<LuSquare className="size-3.5 fill-current" /> <LuSquare className="size-3.5 fill-current" />
) : ( ) : (
@@ -2423,7 +2423,7 @@ export function ProfilesDataTable({
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
className="justify-start p-0 h-auto font-semibold text-left cursor-pointer" className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
> >
{meta.t("common.labels.name")} {meta.t("common.labels.name")}
{isActive("name", false) ? ( {isActive("name", false) ? (
@@ -2491,7 +2491,7 @@ export function ProfilesDataTable({
return ( return (
<div <div
ref={renameContainerRef} ref={renameContainerRef}
className="overflow-visible relative" className="relative overflow-visible"
> >
<Input <Input
autoFocus autoFocus
@@ -2523,7 +2523,7 @@ export function ProfilesDataTable({
meta.setRenameError(null); meta.setRenameError(null);
} }
}} }}
className="w-full min-w-0 max-w-full h-6 px-2 py-1 text-sm font-medium leading-none border-0 shadow-none focus-visible:ring-0" className="h-6 w-full max-w-full min-w-0 border-0 px-2 py-1 text-sm leading-none font-medium shadow-none focus-visible:ring-0"
/> />
</div> </div>
); );
@@ -2532,7 +2532,7 @@ export function ProfilesDataTable({
const display = ( const display = (
<OverflowTooltipText <OverflowTooltipText
text={name} text={name}
className="font-medium text-left leading-none" className="text-left leading-none font-medium"
/> />
); );
@@ -2548,13 +2548,13 @@ export function ProfilesDataTable({
const isLocked = meta.isProfileLockedByAnother(profile.id); const isLocked = meta.isProfileLockedByAnother(profile.id);
return ( return (
<div className="flex items-center gap-1.5 min-w-0 max-w-full overflow-hidden"> <div className="flex max-w-full min-w-0 items-center gap-1.5 overflow-hidden">
<button <button
type="button" type="button"
className={cn( className={cn(
"px-2 py-1 mr-auto text-left bg-transparent rounded border-none h-6 min-w-0 max-w-full overflow-hidden", "mr-auto h-6 max-w-full min-w-0 overflow-hidden rounded border-none bg-transparent px-2 py-1 text-left",
isDisabled isDisabled
? "opacity-60 cursor-not-allowed" ? "cursor-not-allowed opacity-60"
: "cursor-pointer hover:bg-accent/50", : "cursor-pointer hover:bg-accent/50",
)} )}
onClick={() => { onClick={() => {
@@ -2715,7 +2715,7 @@ export function ProfilesDataTable({
(snapshot?.current_bytes_received ?? 0); (snapshot?.current_bytes_received ?? 0);
return ( return (
<div className="overflow-hidden min-w-0"> <div className="min-w-0 overflow-hidden">
<BandwidthMiniChart <BandwidthMiniChart
key={`${profile.id}-${snapshot?.last_update ?? 0}-${bandwidthData.length}`} key={`${profile.id}-${snapshot?.last_update ?? 0}-${bandwidthData.length}`}
data={bandwidthData} data={bandwidthData}
@@ -2727,7 +2727,7 @@ export function ProfilesDataTable({
} }
return ( return (
<div className="flex overflow-hidden gap-2 items-center min-w-0"> <div className="flex min-w-0 items-center gap-2 overflow-hidden">
<Popover <Popover
open={isSelectorOpen} open={isSelectorOpen}
onOpenChange={(open) => { onOpenChange={(open) => {
@@ -2833,7 +2833,7 @@ export function ProfilesDataTable({
/> />
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1 py-0 leading-tight mr-1" className="mr-1 px-1 py-0 text-[10px] leading-tight"
> >
WG WG
</Badge> </Badge>
@@ -2956,7 +2956,7 @@ export function ProfilesDataTable({
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span className="flex justify-center items-center h-9 w-full"> <span className="flex h-9 w-full items-center justify-center">
{dot.encrypted ? ( {dot.encrypted ? (
<LuLock <LuLock
className={`size-3 ${dot.color.replace("bg-", "text-")}${dot.animate ? " animate-pulse" : ""}`} className={`size-3 ${dot.color.replace("bg-", "text-")}${dot.animate ? " animate-pulse" : ""}`}
@@ -2981,10 +2981,10 @@ export function ProfilesDataTable({
const profile = row.original; const profile = row.original;
return ( return (
<div className="flex justify-end items-center h-9 w-full"> <div className="flex h-9 w-full items-center justify-end">
<Button <Button
variant="ghost" variant="ghost"
className="p-0 size-7" className="size-7 p-0"
disabled={!meta.isClient} disabled={!meta.isClient}
onClick={() => { onClick={() => {
setProfileForInfoDialog(profile); setProfileForInfoDialog(profile);
@@ -3108,11 +3108,11 @@ export function ProfilesDataTable({
return ( return (
<> <>
<div className="relative flex-1 min-h-0 flex flex-col"> <div className="relative flex min-h-0 flex-1 flex-col">
<div <div
ref={scrollParentRef} ref={scrollParentRef}
className={cn( className={cn(
"overflow-auto relative flex-1 min-h-0 scroll-fade", "scroll-fade relative min-h-0 flex-1 overflow-auto",
// Clearance for the floating selection action bar (bottom-6 + // Clearance for the floating selection action bar (bottom-6 +
// ~46px tall) so the last rows can scroll out from behind it. // ~46px tall) so the last rows can scroll out from behind it.
// Same predicate DataTableActionBar uses for its visibility. // Same predicate DataTableActionBar uses for its visibility.
@@ -3128,11 +3128,11 @@ export function ProfilesDataTable({
} }
> >
<Table className="table-fixed" containerClassName="overflow-visible"> <Table className="table-fixed" containerClassName="overflow-visible">
<TableHeader className="overflow-visible sticky top-0 z-10 bg-background [&_tr]:border-0"> <TableHeader className="sticky top-0 z-10 overflow-visible bg-background [&_tr]:border-0">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow <TableRow
key={headerGroup.id} key={headerGroup.id}
className="overflow-visible !border-0" className="overflow-visible border-0!"
> >
{headerGroup.headers.map((header) => { {headerGroup.headers.map((header) => {
return ( return (
@@ -3196,7 +3196,7 @@ export function ProfilesDataTable({
title={crossOsTitle} title={crossOsTitle}
style={{ height: `${ROW_HEIGHT}px` }} style={{ height: `${ROW_HEIGHT}px` }}
className={cn( className={cn(
"overflow-visible hover:bg-accent/50 !border-0", "overflow-visible border-0! hover:bg-accent/50",
rowIsCrossOs && "opacity-60", rowIsCrossOs && "opacity-60",
)} )}
> >
@@ -3320,7 +3320,7 @@ export function ProfilesDataTable({
<LuPlay className="fill-current" /> <LuPlay className="fill-current" />
</DataTableActionBarAction> </DataTableActionBarAction>
{!bulkActionsUnlocked && ( {!bulkActionsUnlocked && (
<ProBadge className="absolute -top-2 -right-2 pointer-events-none" /> <ProBadge className="pointer-events-none absolute -top-2 -right-2" />
)} )}
</span> </span>
)} )}
@@ -3339,7 +3339,7 @@ export function ProfilesDataTable({
<LuSquare className="fill-current" /> <LuSquare className="fill-current" />
</DataTableActionBarAction> </DataTableActionBarAction>
{!bulkActionsUnlocked && ( {!bulkActionsUnlocked && (
<ProBadge className="absolute -top-2 -right-2 pointer-events-none" /> <ProBadge className="pointer-events-none absolute -top-2 -right-2" />
)} )}
</span> </span>
)} )}
src/components/profile-info-dialog.tsx
+69 -69
View File
@@ -116,9 +116,9 @@ function _OSIcon({ os }: { os: string }) {
function InfoCard({ label, value }: { label: string; value: string }) { function InfoCard({ label, value }: { label: string; value: string }) {
return ( return (
<div className="rounded-md bg-muted/50 border px-3 py-2.5"> <div className="rounded-md border bg-muted/50 px-3 py-2.5">
<p className="text-xs text-muted-foreground">{label}</p> <p className="text-xs text-muted-foreground">{label}</p>
<p className="text-sm mt-0.5 truncate">{value}</p> <p className="mt-0.5 truncate text-sm">{value}</p>
</div> </div>
); );
} }
@@ -503,7 +503,7 @@ export function ProfileInfoDialog({
> >
<DialogContent <DialogContent
hideClose hideClose
className="max-w-[min(60rem,calc(100%-4rem))] h-[min(clamp(30rem,80vh,48rem),calc(100vh-3rem))] flex flex-col p-0 gap-0 overflow-hidden" className="flex h-[min(clamp(30rem,80vh,48rem),calc(100vh-3rem))] max-w-[min(60rem,calc(100%-4rem))] flex-col gap-0 overflow-hidden p-0"
> >
{/* The dialog renders its own custom header, so the accessible title is {/* The dialog renders its own custom header, so the accessible title is
visually hidden but present for screen readers (Radix requires it). */} visually hidden but present for screen readers (Radix requires it). */}
@@ -720,20 +720,20 @@ function ProfileInfoLayout({
return ( return (
<> <>
{/* Top bar */} {/* Top bar */}
<div className="flex items-center gap-2 h-11 px-3 border-b border-border shrink-0"> <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
<LuUsers className="size-3.5 text-muted-foreground shrink-0" /> <LuUsers className="size-3.5 shrink-0 text-muted-foreground" />
<div className="flex items-center gap-1.5 text-xs min-w-0 flex-1"> <div className="flex min-w-0 flex-1 items-center gap-1.5 text-xs">
<span className="font-semibold"> <span className="font-semibold">
{t("profileInfo.breadcrumbRoot")} {t("profileInfo.breadcrumbRoot")}
</span> </span>
<span className="text-muted-foreground">/</span> <span className="text-muted-foreground">/</span>
<span className="text-muted-foreground truncate">{profile.name}</span> <span className="truncate text-muted-foreground">{profile.name}</span>
</div> </div>
{onCloneProfile && ( {onCloneProfile && (
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-7 px-2 text-xs gap-1.5" className="h-7 gap-1.5 px-2 text-xs"
disabled={isDisabled} disabled={isDisabled}
onClick={() => onCloneProfile(profile)} onClick={() => onCloneProfile(profile)}
> >
@@ -745,16 +745,16 @@ function ProfileInfoLayout({
type="button" type="button"
aria-label={t("common.buttons.close")} aria-label={t("common.buttons.close")}
onClick={onClose} onClick={onClose}
className="grid place-items-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors duration-100" className="grid size-7 place-items-center rounded-md text-muted-foreground transition-colors duration-100 hover:bg-accent/50 hover:text-foreground"
> >
<LuX className="size-3.5" /> <LuX className="size-3.5" />
</button> </button>
</div> </div>
{/* Body */} {/* Body */}
<div className="flex flex-1 min-h-0"> <div className="flex min-h-0 flex-1">
{/* Sidebar */} {/* Sidebar */}
<nav className="w-44 shrink-0 border-r border-border p-2 flex flex-col gap-0.5 overflow-y-auto"> <nav className="flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2">
{sidebarItems {sidebarItems
.filter((it) => !it.hidden) .filter((it) => !it.hidden)
.map((it) => { .map((it) => {
@@ -765,16 +765,16 @@ function ProfileInfoLayout({
type="button" type="button"
onClick={() => setSection(it.id)} onClick={() => setSection(it.id)}
className={cn( className={cn(
"flex items-center gap-2 h-7 px-2 rounded-md text-xs transition-colors duration-100 text-left", "flex h-7 items-center gap-2 rounded-md px-2 text-left text-xs transition-colors duration-100",
active active
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50", : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
)} )}
> >
<span className="shrink-0">{it.icon}</span> <span className="shrink-0">{it.icon}</span>
<span className="flex-1 truncate">{it.label}</span> <span className="flex-1 truncate">{it.label}</span>
{it.badge && ( {it.badge && (
<span className="text-[9px] uppercase text-muted-foreground tracking-wide truncate max-w-[60px]"> <span className="max-w-[60px] truncate text-[9px] tracking-wide text-muted-foreground uppercase">
{it.badge} {it.badge}
</span> </span>
)} )}
@@ -788,7 +788,7 @@ function ProfileInfoLayout({
type="button" type="button"
onClick={deleteAction.onClick} onClick={deleteAction.onClick}
disabled={deleteAction.disabled} disabled={deleteAction.disabled}
className="flex items-center gap-2 h-7 px-2 rounded-md text-xs transition-colors duration-100 text-destructive hover:bg-destructive/10 disabled:opacity-50 disabled:pointer-events-none" className="flex h-7 items-center gap-2 rounded-md px-2 text-xs text-destructive transition-colors duration-100 hover:bg-destructive/10 disabled:pointer-events-none disabled:opacity-50"
> >
<LuTrash2 className="size-3.5 shrink-0" /> <LuTrash2 className="size-3.5 shrink-0" />
<span className="flex-1 text-left"> <span className="flex-1 text-left">
@@ -800,21 +800,21 @@ function ProfileInfoLayout({
</nav> </nav>
{/* Main */} {/* Main */}
<div className="flex-1 min-w-0 overflow-y-auto scroll-fade p-4"> <div className="scroll-fade min-w-0 flex-1 overflow-y-auto p-4">
{section === "overview" && ( {section === "overview" && (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{/* Hero */} {/* Hero */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="rounded-lg bg-muted p-2.5 shrink-0"> <div className="shrink-0 rounded-lg bg-muted p-2.5">
<ProfileIcon className="size-7 text-foreground" /> <ProfileIcon className="size-7 text-foreground" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<h3 className="text-base font-semibold truncate"> <h3 className="truncate text-base font-semibold">
{profile.name} {profile.name}
</h3> </h3>
</div> </div>
<div className="flex flex-wrap items-center gap-1.5 mt-1 text-[11px]"> <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
<span className="font-mono text-muted-foreground"> <span className="font-mono text-muted-foreground">
{profile.version} {profile.version}
</span> </span>
@@ -823,17 +823,17 @@ function ProfileInfoLayout({
</div> </div>
{/* ID */} {/* ID */}
<div className="flex items-center gap-2 rounded-md bg-muted/40 px-3 py-2 border border-border"> <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2">
<span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0"> <span className="shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
ID ID
</span> </span>
<span className="font-mono text-xs truncate flex-1"> <span className="flex-1 truncate font-mono text-xs">
{profile.id} {profile.id}
</span> </span>
<button <button
type="button" type="button"
onClick={() => void handleCopyId()} onClick={() => void handleCopyId()}
className="text-muted-foreground hover:text-foreground transition-colors shrink-0" className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
aria-label={t("common.buttons.copy")} aria-label={t("common.buttons.copy")}
> >
{copied ? ( {copied ? (
@@ -874,7 +874,7 @@ function ProfileInfoLayout({
{/* Activity */} {/* Activity */}
<div className="mt-1 flex flex-col gap-1.5"> <div className="mt-1 flex flex-col gap-1.5">
<span className="text-[10px] uppercase tracking-wide text-muted-foreground"> <span className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.sections.activity")} {t("profileInfo.sections.activity")}
</span> </span>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
@@ -904,11 +904,11 @@ function ProfileInfoLayout({
</div> </div>
{profile.created_by_email && ( {profile.created_by_email && (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("sync.team.title")} {t("sync.team.title")}
</p> </p>
<p className="text-sm mt-0.5"> <p className="mt-0.5 text-sm">
{t("sync.team.createdBy", { {t("sync.team.createdBy", {
email: profile.created_by_email, email: profile.created_by_email,
})} })}
@@ -1014,7 +1014,7 @@ function _SectionPlaceholder({
</div> </div>
<p className="text-xs text-muted-foreground">{description}</p> <p className="text-xs text-muted-foreground">{description}</p>
{hint && ( {hint && (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2 text-xs"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-xs">
{hint} {hint}
</div> </div>
)} )}
@@ -1022,7 +1022,7 @@ function _SectionPlaceholder({
size="sm" size="sm"
onClick={onAction} onClick={onAction}
disabled={disabled} disabled={disabled}
className="self-start h-7 text-xs" className="h-7 self-start text-xs"
> >
{actionLabel} {actionLabel}
</Button> </Button>
@@ -1049,11 +1049,11 @@ function _SectionAction({
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
className={cn( className={cn(
"flex items-center gap-2 h-9 px-3 rounded-md text-xs transition-colors text-left", "flex h-9 items-center gap-2 rounded-md px-3 text-left text-xs transition-colors",
destructive destructive
? "text-destructive hover:bg-destructive/10" ? "text-destructive hover:bg-destructive/10"
: "hover:bg-accent", : "hover:bg-accent",
"disabled:opacity-50 disabled:pointer-events-none", "disabled:pointer-events-none disabled:opacity-50",
)} )}
> >
{icon} {icon}
@@ -1121,7 +1121,7 @@ function LaunchHookEditor({
setValue(e.target.value); setValue(e.target.value);
}} }}
placeholder={t("profiles.launchHook.placeholder")} placeholder={t("profiles.launchHook.placeholder")}
className="text-xs font-mono" className="font-mono text-xs"
/> />
{showInvalidHint && ( {showInvalidHint && (
<p className="text-xs text-warning"> <p className="text-xs text-warning">
@@ -1199,7 +1199,7 @@ function SyncSectionInline({
{t("profileInfo.sectionDesc.sync")} {t("profileInfo.sectionDesc.sync")}
</p> </p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0"> <span className="shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.fields.syncMode")} {t("profileInfo.fields.syncMode")}
</span> </span>
<Select <Select
@@ -1209,7 +1209,7 @@ function SyncSectionInline({
void onChangeMode(v); void onChangeMode(v);
}} }}
> >
<SelectTrigger className="h-7 text-xs flex-1"> <SelectTrigger className="h-7 flex-1 text-xs">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1222,15 +1222,15 @@ function SyncSectionInline({
</Select> </Select>
</div> </div>
{syncStatus && ( {syncStatus && (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.fields.syncStatus")} {t("profileInfo.fields.syncStatus")}
</p> </p>
<p className="text-sm mt-0.5"> <p className="mt-0.5 text-sm">
{t(`profileInfo.syncStatusValue.${syncStatus.status}`)} {t(`profileInfo.syncStatusValue.${syncStatus.status}`)}
</p> </p>
{syncStatus.error && ( {syncStatus.error && (
<p className="text-xs text-destructive mt-1">{syncStatus.error}</p> <p className="mt-1 text-xs text-destructive">{syncStatus.error}</p>
)} )}
</div> </div>
)} )}
@@ -1317,7 +1317,7 @@ function NetworkSectionInline({
</p> </p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-12"> <span className="w-12 shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.fields.proxy")} {t("profileInfo.fields.proxy")}
</span> </span>
<Select <Select
@@ -1327,7 +1327,7 @@ function NetworkSectionInline({
void onProxyChange(v); void onProxyChange(v);
}} }}
> >
<SelectTrigger className="h-7 text-xs flex-1"> <SelectTrigger className="h-7 flex-1 text-xs">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1344,7 +1344,7 @@ function NetworkSectionInline({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-12"> <span className="w-12 shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.fields.vpn")} {t("profileInfo.fields.vpn")}
</span> </span>
<Select <Select
@@ -1354,7 +1354,7 @@ function NetworkSectionInline({
void onVpnChange(v); void onVpnChange(v);
}} }}
> >
<SelectTrigger className="h-7 text-xs flex-1"> <SelectTrigger className="h-7 flex-1 text-xs">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1449,7 +1449,7 @@ function ExtensionsSectionInline({
{t("profileInfo.sectionDesc.extensions")} {t("profileInfo.sectionDesc.extensions")}
</p> </p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-16"> <span className="w-16 shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.fields.extensionGroup")} {t("profileInfo.fields.extensionGroup")}
</span> </span>
<Select <Select
@@ -1459,7 +1459,7 @@ function ExtensionsSectionInline({
void onChange(v); void onChange(v);
}} }}
> >
<SelectTrigger className="h-7 text-xs flex-1"> <SelectTrigger className="h-7 flex-1 text-xs">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1569,7 +1569,7 @@ function CookiesSectionInline({
const domains = stats?.domains ?? []; const domains = stats?.domains ?? [];
return ( return (
<div className="flex flex-col gap-3 min-h-0 flex-1"> <div className="flex min-h-0 flex-1 flex-col gap-3">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 text-sm font-semibold"> <div className="flex items-center gap-2 text-sm font-semibold">
<LuCookie className="size-4" /> <LuCookie className="size-4" />
@@ -1641,18 +1641,18 @@ function CookiesSectionInline({
{t("profileInfo.sectionDesc.cookies")} {t("profileInfo.sectionDesc.cookies")}
</p> </p>
{isRunning ? ( {isRunning ? (
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("profileInfo.cookies.runningNotice")} {t("profileInfo.cookies.runningNotice")}
</p> </p>
</div> </div>
) : ( ) : (
<> <>
<div className="rounded-md bg-muted/40 border border-border px-3 py-2"> <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground"> <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.fields.cookieCount")} {t("profileInfo.fields.cookieCount")}
</p> </p>
<p className="text-sm mt-0.5"> <p className="mt-0.5 text-sm">
{isLoading {isLoading
? t("profileInfo.values.loading") ? t("profileInfo.values.loading")
: stats : stats
@@ -1661,13 +1661,13 @@ function CookiesSectionInline({
</p> </p>
</div> </div>
{domains.length > 0 && ( {domains.length > 0 && (
<div className="rounded-md bg-muted/40 border border-border flex flex-col min-h-0 flex-1 overflow-hidden"> <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-muted/40">
<p className="text-[10px] uppercase tracking-wide text-muted-foreground px-3 py-2 border-b border-border shrink-0"> <p className="shrink-0 border-b border-border px-3 py-2 text-[10px] tracking-wide text-muted-foreground uppercase">
{t("profileInfo.cookies.domainsHeader", { {t("profileInfo.cookies.domainsHeader", {
count: domains.length, count: domains.length,
})} })}
</p> </p>
<ul className="text-xs px-3 py-2 overflow-y-auto flex-1 space-y-1"> <ul className="flex-1 space-y-1 overflow-y-auto px-3 py-2 text-xs">
{domains.map((d) => ( {domains.map((d) => (
<li <li
key={d.domain} key={d.domain}
@@ -1842,7 +1842,7 @@ function FingerprintSectionInline({
{error && <p className="text-xs text-destructive">{error}</p>} {error && <p className="text-xs text-destructive">{error}</p>}
{success && !error && <p className="text-xs text-success">{success}</p>} {success && !error && <p className="text-xs text-success">{success}</p>}
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-border"> <div className="mt-3 flex items-center gap-2 border-t border-border pt-3">
<Button <Button
size="sm" size="sm"
className="h-7 text-xs" className="h-7 text-xs"
@@ -2013,8 +2013,8 @@ function SecuritySectionInline({
setIsVerifyOpen(true); setIsVerifyOpen(true);
}} }}
className={cn( className={cn(
"flex-1 h-7 px-2 text-xs rounded-md border transition-colors", "h-7 flex-1 rounded-md border px-2 text-xs transition-colors",
"border-border text-muted-foreground hover:text-foreground hover:bg-accent/50", "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
)} )}
> >
{t("profilePassword.modes.validate")} {t("profilePassword.modes.validate")}
@@ -2026,10 +2026,10 @@ function SecuritySectionInline({
reset(); reset();
}} }}
className={cn( className={cn(
"flex-1 h-7 px-2 text-xs rounded-md border transition-colors", "h-7 flex-1 rounded-md border px-2 text-xs transition-colors",
mode === "change" mode === "change"
? "bg-accent text-accent-foreground border-transparent" ? "border-transparent bg-accent text-accent-foreground"
: "border-border text-muted-foreground hover:text-foreground hover:bg-accent/50", : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
)} )}
> >
{t("profilePassword.modes.change")} {t("profilePassword.modes.change")}
@@ -2041,10 +2041,10 @@ function SecuritySectionInline({
reset(); reset();
}} }}
className={cn( className={cn(
"flex-1 h-7 px-2 text-xs rounded-md border transition-colors", "h-7 flex-1 rounded-md border px-2 text-xs transition-colors",
mode === "remove" mode === "remove"
? "bg-destructive/10 text-destructive border-transparent" ? "border-transparent bg-destructive/10 text-destructive"
: "border-border text-muted-foreground hover:text-foreground hover:bg-accent/50", : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
)} )}
> >
{t("profilePassword.modes.remove")} {t("profilePassword.modes.remove")}
@@ -2106,7 +2106,7 @@ function SecuritySectionInline({
<Button <Button
size="sm" size="sm"
variant={mode === "remove" ? "destructive" : "default"} variant={mode === "remove" ? "destructive" : "default"}
className="self-start h-7 text-xs" className="h-7 self-start text-xs"
disabled={isRunning || isSubmitting} disabled={isRunning || isSubmitting}
onClick={() => { onClick={() => {
void onSubmit(); void onSubmit();
@@ -2397,11 +2397,11 @@ export function ProfileBypassRulesDialog({
if (!open) onClose(); if (!open) onClose();
}} }}
> >
<DialogContent className="sm:max-w-lg max-h-[80vh] flex flex-col"> <DialogContent className="flex max-h-[80vh] flex-col sm:max-w-lg">
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle>{t("profileInfo.network.bypassRulesTitle")}</DialogTitle> <DialogTitle>{t("profileInfo.network.bypassRulesTitle")}</DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="flex-1 min-h-0"> <ScrollArea className="min-h-0 flex-1">
<div className="flex flex-col gap-3 py-2"> <div className="flex flex-col gap-3 py-2">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("profileInfo.network.bypassRulesDescription")} {t("profileInfo.network.bypassRulesDescription")}
@@ -2423,12 +2423,12 @@ export function ProfileBypassRulesDialog({
onClick={handleAddRule} onClick={handleAddRule}
disabled={!newRule.trim()} disabled={!newRule.trim()}
> >
<LuPlus className="size-4 mr-1" /> <LuPlus className="mr-1 size-4" />
{t("profileInfo.network.addRule")} {t("profileInfo.network.addRule")}
</Button> </Button>
</div> </div>
{bypassRules.length === 0 ? ( {bypassRules.length === 0 ? (
<p className="text-sm text-muted-foreground py-2"> <p className="py-2 text-sm text-muted-foreground">
{t("profileInfo.network.noRules")} {t("profileInfo.network.noRules")}
</p> </p>
) : ( ) : (
@@ -2436,15 +2436,15 @@ export function ProfileBypassRulesDialog({
{bypassRules.map((rule) => ( {bypassRules.map((rule) => (
<div <div
key={rule} key={rule}
className="flex items-center justify-between gap-2 px-3 py-1.5 rounded-md bg-muted text-sm" className="flex items-center justify-between gap-2 rounded-md bg-muted px-3 py-1.5 text-sm"
> >
<span className="font-mono text-xs truncate">{rule}</span> <span className="truncate font-mono text-xs">{rule}</span>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
handleRemoveRule(rule); handleRemoveRule(rule);
}} }}
className="text-muted-foreground hover:text-destructive transition-colors shrink-0" className="shrink-0 text-muted-foreground transition-colors hover:text-destructive"
> >
<LuX className="size-3.5" /> <LuX className="size-3.5" />
</button> </button>
src/components/profile-selector-dialog.tsx
+4 -4
View File
@@ -171,7 +171,7 @@ export function ProfileSelectorDialog({
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
{url && ( {url && (
<div className="space-y-2"> <div className="space-y-2">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<Label className="text-sm font-medium"> <Label className="text-sm font-medium">
{t("profileSelector.openingUrl")} {t("profileSelector.openingUrl")}
</Label> </Label>
@@ -180,7 +180,7 @@ export function ProfileSelectorDialog({
successMessage={t("profileSelector.urlCopied")} successMessage={t("profileSelector.urlCopied")}
/> />
</div> </div>
<div className="p-2 text-sm break-all rounded bg-muted max-h-24 overflow-y-auto"> <div className="max-h-24 overflow-y-auto rounded bg-muted p-2 text-sm break-all">
{url} {url}
</div> </div>
</div> </div>
@@ -230,8 +230,8 @@ export function ProfileSelectorDialog({
!canUseForLinks ? "opacity-50" : "" !canUseForLinks ? "opacity-50" : ""
}`} }`}
> >
<div className="flex gap-3 items-center px-2 py-1 rounded-lg"> <div className="flex items-center gap-3 rounded-lg px-2 py-1">
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
{(() => { {(() => {
const IconComponent = getBrowserIcon( const IconComponent = getBrowserIcon(
profile.browser, profile.browser,
src/components/profile-sync-dialog.tsx
+6 -6
View File
@@ -172,7 +172,7 @@ export function ProfileSyncDialog({
return ( return (
<Dialog open={isOpen} onOpenChange={handleOpenChange}> <Dialog open={isOpen} onOpenChange={handleOpenChange}>
<DialogContent className="max-w-md flex flex-col overflow-hidden"> <DialogContent className="flex max-w-md flex-col overflow-hidden">
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle>{t("sync.mode.title")}</DialogTitle> <DialogTitle>{t("sync.mode.title")}</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -183,15 +183,15 @@ export function ProfileSyncDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex-1 min-h-0 overflow-y-auto"> <div className="min-h-0 flex-1 overflow-y-auto">
{isCheckingConfig ? ( {isCheckingConfig ? (
<div className="flex justify-center py-8"> <div className="flex justify-center py-8">
<div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" /> <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
</div> </div>
) : ( ) : (
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
{!hasConfig && ( {!hasConfig && (
<div className="p-3 text-sm rounded-md bg-muted"> <div className="rounded-md bg-muted p-3 text-sm">
<p className="mb-2">{t("sync.mode.notConfigured")}</p> <p className="mb-2">{t("sync.mode.notConfigured")}</p>
<Button <Button
variant="outline" variant="outline"
@@ -267,14 +267,14 @@ export function ProfileSyncDialog({
{syncMode === "Encrypted" && {syncMode === "Encrypted" &&
!hasE2ePassword && !hasE2ePassword &&
userChangedMode && ( userChangedMode && (
<div className="p-3 text-sm rounded-md bg-destructive/10 text-destructive"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{t("sync.mode.noPasswordWarning")} {t("sync.mode.noPasswordWarning")}
</div> </div>
)} )}
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("sync.mode.lastSynced")}</Label> <Label>{t("sync.mode.lastSynced")}</Label>
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
<Badge variant="outline"> <Badge variant="outline">
{formatLastSync(profile.last_sync)} {formatLastSync(profile.last_sync)}
</Badge> </Badge>
src/components/proxy-assignment-dialog.tsx
+5 -5
View File
@@ -157,8 +157,8 @@ export function ProxyAssignmentDialog({
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("proxyAssignment.selectedProfilesLabel")}</Label> <Label>{t("proxyAssignment.selectedProfilesLabel")}</Label>
<div className="p-3 bg-muted rounded-md max-h-[min(8rem,20vh)] overflow-y-auto"> <div className="max-h-[min(8rem,20vh)] overflow-y-auto rounded-md bg-muted p-3">
<ul className="text-sm space-y-1"> <ul className="space-y-1 text-sm">
{selectedProfiles.map((profileId) => { {selectedProfiles.map((profileId) => {
const profile = profiles.find( const profile = profiles.find(
(p: BrowserProfile) => p.id === profileId, (p: BrowserProfile) => p.id === profileId,
@@ -206,7 +206,7 @@ export function ProxyAssignmentDialog({
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
id={proxyListboxId} id={proxyListboxId}
className="w-[var(--radix-popover-trigger-width)] p-0" className="w-(--radix-popover-trigger-width) p-0"
sideOffset={8} sideOffset={8}
> >
<Command> <Command>
@@ -283,7 +283,7 @@ export function ProxyAssignmentDialog({
/> />
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1 py-0 leading-tight mr-1" className="mr-1 px-1 py-0 text-[10px] leading-tight"
> >
WG WG
</Badge> </Badge>
@@ -299,7 +299,7 @@ export function ProxyAssignmentDialog({
</div> </div>
{error && ( {error && (
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md"> <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
{error} {error}
</div> </div>
)} )}
src/components/proxy-check-button.tsx
+3 -3
View File
@@ -123,14 +123,14 @@ export function ProxyCheckButton({
disabled={isCurrentlyChecking || disabled} disabled={isCurrentlyChecking || disabled}
> >
{isCurrentlyChecking ? ( {isCurrentlyChecking ? (
<div className="size-3 rounded-full border border-current animate-spin border-t-transparent" /> <div className="size-3 animate-spin rounded-full border border-current border-t-transparent" />
) : result?.is_valid && result.country_code ? ( ) : result?.is_valid && result.country_code ? (
<span className="relative inline-flex items-center justify-center"> <span className="relative inline-flex items-center justify-center">
<FlagIcon countryCode={result.country_code} className="h-2.5" /> <FlagIcon countryCode={result.country_code} className="h-2.5" />
<FiCheck className="absolute bottom-[-6px] right-[-4px]" /> <FiCheck className="absolute right-[-4px] bottom-[-6px]" />
</span> </span>
) : result && !result.is_valid ? ( ) : result && !result.is_valid ? (
<span className="text-destructive text-sm">✕</span> <span className="text-sm text-destructive">✕</span>
) : ( ) : (
<FiCheck className="size-3" /> <FiCheck className="size-3" />
)} )}
src/components/proxy-export-dialog.tsx
+7 -7
View File
@@ -125,17 +125,17 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("proxies.exportDialog.preview")}</Label> <Label>{t("proxies.exportDialog.preview")}</Label>
<ScrollArea className="h-[clamp(120px,30vh,400px)] border rounded-md bg-muted/30"> <ScrollArea className="h-[clamp(120px,30vh,400px)] rounded-md border bg-muted/30">
{isLoading ? ( {isLoading ? (
<div className="flex items-center justify-center h-full p-4 text-sm text-muted-foreground"> <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
{t("common.buttons.loading")} {t("common.buttons.loading")}
</div> </div>
) : exportContent ? ( ) : exportContent ? (
<pre className="p-3 text-xs font-mono whitespace-pre-wrap break-all"> <pre className="p-3 font-mono text-xs break-all whitespace-pre-wrap">
{exportContent} {exportContent}
</pre> </pre>
) : ( ) : (
<div className="flex items-center justify-center h-full p-4 text-sm text-muted-foreground"> <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
{t("proxies.exportDialog.noProxies")} {t("proxies.exportDialog.noProxies")}
</div> </div>
)} )}
@@ -143,7 +143,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
</div> </div>
</div> </div>
<DialogFooter className="flex-col sm:flex-row gap-2"> <DialogFooter className="flex-col gap-2 sm:flex-row">
<RippleButton variant="outline" onClick={handleClose}> <RippleButton variant="outline" onClick={handleClose}>
{t("common.buttons.close")} {t("common.buttons.close")}
</RippleButton> </RippleButton>
@@ -151,7 +151,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
variant="outline" variant="outline"
onClick={() => void handleCopyToClipboard()} onClick={() => void handleCopyToClipboard()}
disabled={!exportContent || isLoading} disabled={!exportContent || isLoading}
className="flex gap-2 items-center" className="flex items-center gap-2"
> >
{copied ? ( {copied ? (
<LuCheck className="size-4" /> <LuCheck className="size-4" />
@@ -165,7 +165,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
<RippleButton <RippleButton
onClick={handleDownload} onClick={handleDownload}
disabled={!exportContent || isLoading} disabled={!exportContent || isLoading}
className="flex gap-2 items-center" className="flex items-center gap-2"
> >
<LuDownload className="size-4" /> <LuDownload className="size-4" />
{t("common.buttons.download")} {t("common.buttons.download")}
src/components/proxy-form-dialog.tsx
+2 -2
View File
@@ -161,7 +161,7 @@ export function ProxyFormDialog({
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4 @container"> <div className="@container grid gap-4 py-4">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="proxy-name">{t("proxies.form.name")}</Label> <Label htmlFor="proxy-name">{t("proxies.form.name")}</Label>
<Input <Input
@@ -231,7 +231,7 @@ export function ProxyFormDialog({
</div> </div>
</div> </div>
<div className="grid grid-cols-1 @sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @sm:grid-cols-2">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="proxy-username"> <Label htmlFor="proxy-username">
{form.proxy_type === "ss" {form.proxy_type === "ss"
src/components/proxy-import-dialog.tsx
+15 -15
View File
@@ -315,8 +315,8 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
} }
}} }}
> >
<LuUpload className="size-10 text-muted-foreground mb-4" /> <LuUpload className="mb-4 size-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground text-center"> <p className="text-center text-sm text-muted-foreground">
{t("proxies.importDialog.dropzonePrompt")} {t("proxies.importDialog.dropzonePrompt")}
<br /> <br />
<span className="text-xs"> <span className="text-xs">
@@ -335,7 +335,7 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
}} }}
/> />
</div> </div>
<p className="text-xs text-muted-foreground text-center"> <p className="text-center text-xs text-muted-foreground">
{t("proxies.importDialog.pasteHint", { modKey })} {t("proxies.importDialog.pasteHint", { modKey })}
</p> </p>
</div> </div>
@@ -369,19 +369,19 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
count: parsedProxies.length, count: parsedProxies.length,
})} })}
{invalidProxies.length > 0 && ( {invalidProxies.length > 0 && (
<span className="text-muted-foreground ml-2"> <span className="ml-2 text-muted-foreground">
{t("proxies.importDialog.invalidCount", { {t("proxies.importDialog.invalidCount", {
count: invalidProxies.length, count: invalidProxies.length,
})} })}
</span> </span>
)} )}
</Label> </Label>
<ScrollArea className="h-[clamp(120px,30vh,400px)] border rounded-md"> <ScrollArea className="h-[clamp(120px,30vh,400px)] rounded-md border">
<div className="p-2 space-y-1"> <div className="space-y-1 p-2">
{parsedProxies.map((proxy, i) => ( {parsedProxies.map((proxy, i) => (
<div <div
key={`${proxy.original_line}-${i}`} key={`${proxy.original_line}-${i}`}
className="text-xs font-mono p-2 bg-muted/30 rounded break-all" className="rounded bg-muted/30 p-2 font-mono text-xs break-all"
> >
<span className="text-primary"> <span className="text-primary">
{proxy.proxy_type}:// {proxy.proxy_type}://
@@ -407,21 +407,21 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("proxies.importDialog.ambiguousIntro")} {t("proxies.importDialog.ambiguousIntro")}
</p> </p>
<ScrollArea className="h-[clamp(150px,35vh,450px)] border rounded-md"> <ScrollArea className="h-[clamp(150px,35vh,450px)] rounded-md border">
<div className="p-3 space-y-4"> <div className="space-y-4 p-3">
{ambiguousProxies.map((proxy, i) => ( {ambiguousProxies.map((proxy, i) => (
<div <div
key={`${proxy.line}-${i}`} key={`${proxy.line}-${i}`}
className="space-y-2 pb-3 border-b last:border-0" className="space-y-2 border-b pb-3 last:border-0"
> >
<code className="text-xs bg-muted px-2 py-1 rounded block break-all"> <code className="block rounded bg-muted px-2 py-1 text-xs break-all">
{proxy.line} {proxy.line}
</code> </code>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{proxy.possible_formats.map((format) => ( {proxy.possible_formats.map((format) => (
<label <label
key={format} key={format}
className="flex items-center gap-2 cursor-pointer" className="flex cursor-pointer items-center gap-2"
> >
<input <input
type="radio" type="radio"
@@ -445,7 +445,7 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
{step === "result" && importResult && ( {step === "result" && importResult && (
<div className="space-y-4"> <div className="space-y-4">
<div className="p-4 bg-muted/30 rounded-lg space-y-2"> <div className="space-y-2 rounded-lg bg-muted/30 p-4">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-sm"> <span className="text-sm">
{t("proxies.importDialog.imported")} {t("proxies.importDialog.imported")}
@@ -479,8 +479,8 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
{importResult.errors.length > 0 && ( {importResult.errors.length > 0 && (
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("proxies.importDialog.errors")}</Label> <Label>{t("proxies.importDialog.errors")}</Label>
<ScrollArea className="h-[100px] border rounded-md"> <ScrollArea className="h-[100px] rounded-md border">
<div className="p-2 space-y-1"> <div className="space-y-1 p-2">
{importResult.errors.map((error, i) => ( {importResult.errors.map((error, i) => (
<div <div
key={`error-${i}`} key={`error-${i}`}
src/components/proxy-management-dialog.tsx
+25 -25
View File
@@ -541,7 +541,7 @@ export function ProxyManagementDialog({
onClick={() => { onClick={() => {
column.toggleSorting(column.getIsSorted() === "asc"); column.toggleSorting(column.getIsSorted() === "asc");
}} }}
className="justify-start p-0 h-auto font-semibold text-left cursor-pointer" className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
> >
{t("common.labels.name")} {t("common.labels.name")}
{column.getIsSorted() === "asc" ? ( {column.getIsSorted() === "asc" ? (
@@ -552,7 +552,7 @@ export function ProxyManagementDialog({
</Button> </Button>
), ),
cell: ({ row }) => ( cell: ({ row }) => (
<span className="font-medium block truncate"> <span className="block truncate font-medium">
{row.original.name} {row.original.name}
</span> </span>
), ),
@@ -563,7 +563,7 @@ export function ProxyManagementDialog({
enableSorting: false, enableSorting: false,
header: () => t("proxies.management.protocolCol"), header: () => t("proxies.management.protocolCol"),
cell: ({ row }) => ( cell: ({ row }) => (
<span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground"> <span className="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
{row.original.proxy_settings.proxy_type} {row.original.proxy_settings.proxy_type}
</span> </span>
), ),
@@ -573,7 +573,7 @@ export function ProxyManagementDialog({
enableSorting: false, enableSorting: false,
header: () => t("proxies.management.hostPort"), header: () => t("proxies.management.hostPort"),
cell: ({ row }) => ( cell: ({ row }) => (
<span className="font-mono text-xs text-muted-foreground block truncate"> <span className="block truncate font-mono text-xs text-muted-foreground">
{row.original.proxy_settings.host}: {row.original.proxy_settings.host}:
{row.original.proxy_settings.port} {row.original.proxy_settings.port}
</span> </span>
@@ -774,7 +774,7 @@ export function ProxyManagementDialog({
onClick={() => { onClick={() => {
column.toggleSorting(column.getIsSorted() === "asc"); column.toggleSorting(column.getIsSorted() === "asc");
}} }}
className="justify-start p-0 h-auto font-semibold text-left cursor-pointer" className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
> >
{t("common.labels.name")} {t("common.labels.name")}
{column.getIsSorted() === "asc" ? ( {column.getIsSorted() === "asc" ? (
@@ -793,7 +793,7 @@ export function ProxyManagementDialog({
vpnSyncErrors[vpn.id], vpnSyncErrors[vpn.id],
); );
return ( return (
<div className="flex items-center gap-2 font-medium min-w-0"> <div className="flex min-w-0 items-center gap-2 font-medium">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
@@ -1090,7 +1090,7 @@ export function ProxyManagementDialog({
return ( return (
<> <>
<Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}> <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
<DialogContent className="max-w-[min(80rem,calc(100%-4rem))] max-h-[85vh] flex flex-col"> <DialogContent className="flex max-h-[85vh] max-w-[min(80rem,calc(100%-4rem))] flex-col">
{!subPage && ( {!subPage && (
<DialogHeader> <DialogHeader>
<DialogTitle>{t("proxies.management.title")}</DialogTitle> <DialogTitle>{t("proxies.management.title")}</DialogTitle>
@@ -1100,14 +1100,14 @@ export function ProxyManagementDialog({
</DialogHeader> </DialogHeader>
)} )}
<div className="@container w-full flex-1 min-h-0 flex flex-col"> <div className="@container flex min-h-0 w-full flex-1 flex-col">
<AnimatedTabs <AnimatedTabs
key={initialTab} key={initialTab}
defaultValue={initialTab} defaultValue={initialTab}
onValueChange={(v) => setActiveTab(v as "proxies" | "vpns")} onValueChange={(v) => setActiveTab(v as "proxies" | "vpns")}
className="flex-1 min-h-0 flex flex-col" className="flex min-h-0 flex-1 flex-col"
> >
<div className="flex flex-wrap items-center justify-between gap-2 shrink-0"> <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
<AnimatedTabsList> <AnimatedTabsList>
<AnimatedTabsTrigger value="proxies"> <AnimatedTabsTrigger value="proxies">
<span>{t("proxies.management.tabProxies")}</span> <span>{t("proxies.management.tabProxies")}</span>
@@ -1133,7 +1133,7 @@ export function ProxyManagementDialog({
onClick={() => { onClick={() => {
setShowImportDialog(true); setShowImportDialog(true);
}} }}
className="flex gap-2 items-center" className="flex items-center gap-2"
aria-label={t("common.buttons.import")} aria-label={t("common.buttons.import")}
> >
<LuUpload className="size-4" /> <LuUpload className="size-4" />
@@ -1154,7 +1154,7 @@ export function ProxyManagementDialog({
onClick={() => { onClick={() => {
setShowExportDialog(true); setShowExportDialog(true);
}} }}
className="flex gap-2 items-center" className="flex items-center gap-2"
aria-label={t("common.buttons.export")} aria-label={t("common.buttons.export")}
disabled={storedProxies.length === 0} disabled={storedProxies.length === 0}
> >
@@ -1173,7 +1173,7 @@ export function ProxyManagementDialog({
<RippleButton <RippleButton
size="sm" size="sm"
onClick={handleCreateProxy} onClick={handleCreateProxy}
className="flex gap-2 items-center" className="flex items-center gap-2"
aria-label={t("proxies.management.newProxy")} aria-label={t("proxies.management.newProxy")}
> >
<GoPlus className="size-4" /> <GoPlus className="size-4" />
@@ -1198,7 +1198,7 @@ export function ProxyManagementDialog({
onClick={() => { onClick={() => {
setShowVpnImportDialog(true); setShowVpnImportDialog(true);
}} }}
className="flex gap-2 items-center" className="flex items-center gap-2"
aria-label={t("common.buttons.import")} aria-label={t("common.buttons.import")}
> >
<LuUpload className="size-4" /> <LuUpload className="size-4" />
@@ -1216,7 +1216,7 @@ export function ProxyManagementDialog({
<RippleButton <RippleButton
size="sm" size="sm"
onClick={handleCreateVpn} onClick={handleCreateVpn}
className="flex gap-2 items-center" className="flex items-center gap-2"
aria-label={t("proxies.management.newVpn")} aria-label={t("proxies.management.newVpn")}
> >
<GoPlus className="size-4" /> <GoPlus className="size-4" />
@@ -1236,9 +1236,9 @@ export function ProxyManagementDialog({
<AnimatedTabsContent <AnimatedTabsContent
value="proxies" value="proxies"
className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col" className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
> >
<div className="flex flex-col gap-4 flex-1 min-h-0"> <div className="flex min-h-0 flex-1 flex-col gap-4">
{isLoading ? ( {isLoading ? (
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
{t("proxies.management.loading")} {t("proxies.management.loading")}
@@ -1250,7 +1250,7 @@ export function ProxyManagementDialog({
) : ( ) : (
<FadingScrollArea <FadingScrollArea
className={cn( className={cn(
"flex-1 min-h-0", "min-h-0 flex-1",
selectedProxies.length > 0 && "pb-16", selectedProxies.length > 0 && "pb-16",
)} )}
style={ style={
@@ -1284,7 +1284,7 @@ export function ProxyManagementDialog({
// of it). // of it).
header.column.id === "name" && "max-w-0", header.column.id === "name" && "max-w-0",
header.column.id === "hostPort" && header.column.id === "hostPort" &&
"hidden @2xl:table-cell max-w-0", "hidden max-w-0 @2xl:table-cell",
(header.column.id === "protocol" || (header.column.id === "protocol" ||
header.column.id === "type") && header.column.id === "type") &&
"hidden @2xl:table-cell", "hidden @2xl:table-cell",
@@ -1320,7 +1320,7 @@ export function ProxyManagementDialog({
className={cn( className={cn(
cell.column.id === "name" && "max-w-0", cell.column.id === "name" && "max-w-0",
cell.column.id === "hostPort" && cell.column.id === "hostPort" &&
"hidden @2xl:table-cell max-w-0", "hidden max-w-0 @2xl:table-cell",
(cell.column.id === "protocol" || (cell.column.id === "protocol" ||
cell.column.id === "type") && cell.column.id === "type") &&
"hidden @2xl:table-cell", "hidden @2xl:table-cell",
@@ -1343,9 +1343,9 @@ export function ProxyManagementDialog({
<AnimatedTabsContent <AnimatedTabsContent
value="vpns" value="vpns"
className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col" className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
> >
<div className="flex flex-col gap-4 flex-1 min-h-0"> <div className="flex min-h-0 flex-1 flex-col gap-4">
{isLoadingVpns ? ( {isLoadingVpns ? (
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
{t("vpns.management.loading")} {t("vpns.management.loading")}
@@ -1357,7 +1357,7 @@ export function ProxyManagementDialog({
) : ( ) : (
<FadingScrollArea <FadingScrollArea
className={cn( className={cn(
"flex-1 min-h-0", "min-h-0 flex-1",
selectedVpns.length > 0 && "pb-16", selectedVpns.length > 0 && "pb-16",
)} )}
style={ style={
@@ -1391,7 +1391,7 @@ export function ProxyManagementDialog({
// of it). // of it).
header.column.id === "name" && "max-w-0", header.column.id === "name" && "max-w-0",
header.column.id === "hostPort" && header.column.id === "hostPort" &&
"hidden @2xl:table-cell max-w-0", "hidden max-w-0 @2xl:table-cell",
(header.column.id === "protocol" || (header.column.id === "protocol" ||
header.column.id === "type") && header.column.id === "type") &&
"hidden @2xl:table-cell", "hidden @2xl:table-cell",
@@ -1427,7 +1427,7 @@ export function ProxyManagementDialog({
className={cn( className={cn(
cell.column.id === "name" && "max-w-0", cell.column.id === "name" && "max-w-0",
cell.column.id === "hostPort" && cell.column.id === "hostPort" &&
"hidden @2xl:table-cell max-w-0", "hidden max-w-0 @2xl:table-cell",
(cell.column.id === "protocol" || (cell.column.id === "protocol" ||
cell.column.id === "type") && cell.column.id === "type") &&
"hidden @2xl:table-cell", "hidden @2xl:table-cell",
src/components/rail-nav.tsx
+22 -22
View File
@@ -290,13 +290,13 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
} = useLogoEasterEgg({ currentPage, onNavigate }); } = useLogoEasterEgg({ currentPage, onNavigate });
return ( return (
<nav className="flex flex-col items-center w-10 py-2 gap-1 bg-background border-r border-border shrink-0 relative"> <nav className="relative flex w-10 shrink-0 flex-col items-center gap-1 border-r border-border bg-background py-2">
{!isHidden ? ( {!isHidden ? (
<button <button
ref={logoRef} ref={logoRef}
type="button" type="button"
aria-label={t("header.donutLogo")} aria-label={t("header.donutLogo")}
className="grid place-items-center size-7 rounded-md cursor-pointer select-none text-foreground bg-transparent shrink-0" className="grid size-7 shrink-0 cursor-pointer place-items-center rounded-md bg-transparent text-foreground select-none"
onClick={handleClick} onClick={handleClick}
onPointerDown={() => { onPointerDown={() => {
setIsPressed(true); setIsPressed(true);
@@ -336,9 +336,9 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
<div className="size-7 shrink-0" /> <div className="size-7 shrink-0" />
)} )}
<div className="w-5 h-px bg-border my-1 shrink-0" /> <div className="my-1 h-px w-5 shrink-0 bg-border" />
<div className="flex flex-col items-center gap-1 w-full min-h-0 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"> <div className="flex min-h-0 w-full scrollbar-none flex-col items-center gap-1 overflow-y-auto [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
{TOP_ITEMS.map(({ page, Icon, labelKey }) => { {TOP_ITEMS.map(({ page, Icon, labelKey }) => {
const active = currentPage === page; const active = currentPage === page;
return ( return (
@@ -352,16 +352,16 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
aria-label={t(labelKey)} aria-label={t(labelKey)}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={cn( className={cn(
"relative grid place-items-center size-7 rounded-md cursor-pointer transition-colors duration-100 shrink-0", "relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-100",
active active
? "text-foreground bg-accent" ? "bg-accent text-foreground"
: "text-muted-foreground hover:text-card-foreground hover:bg-accent/50", : "text-muted-foreground hover:bg-accent/50 hover:text-card-foreground",
)} )}
> >
{active && ( {active && (
<span <span
aria-hidden="true" aria-hidden="true"
className="absolute left-[-7px] top-1.5 bottom-1.5 w-[2px] rounded-full bg-foreground" className="absolute inset-y-1.5 left-[-7px] w-[2px] rounded-full bg-foreground"
/> />
)} )}
<Icon className="size-3.5" /> <Icon className="size-3.5" />
@@ -385,10 +385,10 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
aria-label={t("rail.more.label")} aria-label={t("rail.more.label")}
aria-expanded={moreOpen} aria-expanded={moreOpen}
className={cn( className={cn(
"grid place-items-center size-7 rounded-md cursor-pointer transition-colors duration-100 shrink-0", "grid size-7 shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-100",
moreOpen moreOpen
? "text-foreground bg-accent" ? "bg-accent text-foreground"
: "text-muted-foreground hover:text-card-foreground hover:bg-accent/50", : "text-muted-foreground hover:bg-accent/50 hover:text-card-foreground",
)} )}
> >
<GoKebabHorizontal className="size-3.5" /> <GoKebabHorizontal className="size-3.5" />
@@ -407,16 +407,16 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
aria-label={t("rail.settings")} aria-label={t("rail.settings")}
aria-current={currentPage === "settings" ? "page" : undefined} aria-current={currentPage === "settings" ? "page" : undefined}
className={cn( className={cn(
"relative grid place-items-center size-7 rounded-md cursor-pointer transition-colors duration-100 shrink-0", "relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-100",
currentPage === "settings" currentPage === "settings"
? "text-foreground bg-accent" ? "bg-accent text-foreground"
: "text-muted-foreground hover:text-card-foreground hover:bg-accent/50", : "text-muted-foreground hover:bg-accent/50 hover:text-card-foreground",
)} )}
> >
{currentPage === "settings" && ( {currentPage === "settings" && (
<span <span
aria-hidden="true" aria-hidden="true"
className="absolute left-[-7px] top-1.5 bottom-1.5 w-[2px] rounded-full bg-foreground" className="absolute inset-y-1.5 left-[-7px] w-[2px] rounded-full bg-foreground"
/> />
)} )}
<GoGear className="size-3.5" /> <GoGear className="size-3.5" />
@@ -430,12 +430,12 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
<button <button
type="button" type="button"
aria-label={t("rail.more.closeAriaLabel")} aria-label={t("rail.more.closeAriaLabel")}
className="fixed inset-0 z-30 bg-transparent cursor-default" className="fixed inset-0 z-30 cursor-default bg-transparent"
onClick={() => { onClick={() => {
setMoreOpen(false); setMoreOpen(false);
}} }}
/> />
<div className="absolute bottom-14 left-11 w-56 bg-card border border-border rounded-lg shadow-2xl p-1 z-40 animate-in fade-in-0 slide-in-from-bottom-1 duration-100"> <div className="absolute bottom-14 left-11 z-40 w-56 animate-in rounded-lg border border-border bg-card p-1 shadow-2xl duration-100 fade-in-0 slide-in-from-bottom-1">
{MORE_ITEMS.map(({ page, Icon, labelKey, hintKey }) => ( {MORE_ITEMS.map(({ page, Icon, labelKey, hintKey }) => (
<button <button
key={page} key={page}
@@ -444,16 +444,16 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
setMoreOpen(false); setMoreOpen(false);
onNavigate(page); onNavigate(page);
}} }}
className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md cursor-pointer hover:bg-accent transition-colors duration-100 text-left" className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-100 hover:bg-accent"
> >
<span className="grid place-items-center size-5 rounded bg-muted text-muted-foreground shrink-0"> <span className="grid size-5 shrink-0 place-items-center rounded bg-muted text-muted-foreground">
<Icon className="size-3" /> <Icon className="size-3" />
</span> </span>
<span className="flex flex-col min-w-0"> <span className="flex min-w-0 flex-col">
<span className="text-xs font-medium text-foreground truncate"> <span className="truncate text-xs font-medium text-foreground">
{t(labelKey)} {t(labelKey)}
</span> </span>
<span className="text-[10px] text-muted-foreground truncate"> <span className="truncate text-[10px] text-muted-foreground">
{t(hintKey)} {t(hintKey)}
</span> </span>
</span> </span>
src/components/release-type-selector.tsx
+4 -4
View File
@@ -93,10 +93,10 @@ export function ReleaseTypeSelector({
role="combobox" role="combobox"
aria-expanded={popoverOpen} aria-expanded={popoverOpen}
aria-controls={listboxId} aria-controls={listboxId}
className="justify-between w-full" className="w-full justify-between"
> >
{selectedDisplayText} {selectedDisplayText}
<LuChevronsUpDown className="ml-2 size-4 opacity-50 shrink-0" /> <LuChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
</RippleButton> </RippleButton>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent id={listboxId} className="p-0"> <PopoverContent id={listboxId} className="p-0">
@@ -134,7 +134,7 @@ export function ReleaseTypeSelector({
: "opacity-0", : "opacity-0",
)} )}
/> />
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
<span className="capitalize">{option.type}</span> <span className="capitalize">{option.type}</span>
{option.type === "nightly" && ( {option.type === "nightly" && (
<Badge variant="secondary" className="text-xs"> <Badge variant="secondary" className="text-xs">
@@ -161,7 +161,7 @@ export function ReleaseTypeSelector({
) : ( ) : (
// Show a simple display when only one release type is available // Show a simple display when only one release type is available
releaseOptions.length === 1 && ( releaseOptions.length === 1 && (
<div className="flex gap-2 justify-center items-center p-3 rounded-md border bg-muted/50"> <div className="flex items-center justify-center gap-2 rounded-md border bg-muted/50 p-3">
<span className="text-sm font-medium capitalize"> <span className="text-sm font-medium capitalize">
{releaseOptions[0].type} {releaseOptions[0].type}
</span> </span>
src/components/settings-dialog.tsx
+20 -20
View File
@@ -194,7 +194,7 @@ export function SettingsDialog({
return ( return (
<Badge <Badge
variant="default" variant="default"
className="text-success-foreground bg-success" className="bg-success text-success-foreground"
> >
{t("common.status.granted")} {t("common.status.granted")}
</Badge> </Badge>
@@ -633,7 +633,7 @@ export function SettingsDialog({
return ( return (
<> <>
<Dialog open={isOpen} onOpenChange={handleClose} subPage={subPage}> <Dialog open={isOpen} onOpenChange={handleClose} subPage={subPage}>
<DialogContent className="max-w-md max-h-[calc(100vh-5rem)] flex flex-col"> <DialogContent className="flex max-h-[calc(100vh-5rem)] max-w-md flex-col">
{!subPage && ( {!subPage && (
<DialogHeader className="shrink-0"> <DialogHeader className="shrink-0">
<DialogTitle>{t("settings.title")}</DialogTitle> <DialogTitle>{t("settings.title")}</DialogTitle>
@@ -642,8 +642,8 @@ export function SettingsDialog({
<div <div
className={cn( className={cn(
"grid overflow-y-auto flex-1 gap-6 min-h-0", "grid min-h-0 flex-1 gap-6 overflow-y-auto",
subPage ? "py-2 w-full max-w-2xl mx-auto" : "py-4", subPage ? "mx-auto w-full max-w-2xl py-2" : "py-4",
)} )}
> >
{/* Appearance Section */} {/* Appearance Section */}
@@ -755,14 +755,14 @@ export function SettingsDialog({
return ( return (
<div <div
key={key} key={key}
className="flex flex-col gap-1 items-center" className="flex flex-col items-center gap-1"
> >
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="button" type="button"
aria-label={label} aria-label={label}
className="size-8 rounded-md border shadow-sm cursor-pointer" className="size-8 cursor-pointer rounded-md border shadow-sm"
style={{ backgroundColor: colorValue }} style={{ backgroundColor: colorValue }}
/> />
</PopoverTrigger> </PopoverTrigger>
@@ -771,7 +771,7 @@ export function SettingsDialog({
sideOffset={6} sideOffset={6}
> >
<ColorPicker <ColorPicker
className="p-3 rounded-md border shadow-sm bg-background" className="rounded-md border bg-background p-3 shadow-sm"
value={colorValue} value={colorValue}
onColorChange={([r, g, b, a]) => { onColorChange={([r, g, b, a]) => {
const next = Color({ r, g, b }).alpha(a); const next = Color({ r, g, b }).alpha(a);
@@ -792,21 +792,21 @@ export function SettingsDialog({
}} }}
> >
<ColorPickerSelection className="h-36 rounded" /> <ColorPickerSelection className="h-36 rounded" />
<div className="flex gap-3 items-center mt-3"> <div className="mt-3 flex items-center gap-3">
<ColorPickerEyeDropper /> <ColorPickerEyeDropper />
<div className="grid gap-1 w-full"> <div className="grid w-full gap-1">
<ColorPickerHue /> <ColorPickerHue />
<ColorPickerAlpha /> <ColorPickerAlpha />
</div> </div>
</div> </div>
<div className="flex gap-2 items-center mt-3"> <div className="mt-3 flex items-center gap-2">
<ColorPickerOutput /> <ColorPickerOutput />
<ColorPickerFormat /> <ColorPickerFormat />
</div> </div>
</ColorPicker> </ColorPicker>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<div className="text-[10px] text-muted-foreground text-center leading-tight"> <div className="text-center text-[10px] leading-tight text-muted-foreground">
{label} {label}
</div> </div>
</div> </div>
@@ -860,7 +860,7 @@ export function SettingsDialog({
{/* Default Browser Section - hidden in portable mode */} {/* Default Browser Section - hidden in portable mode */}
{!systemInfo?.portable && ( {!systemInfo?.portable && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<Label className="text-base font-medium"> <Label className="text-base font-medium">
{t("settings.defaultBrowser.title")} {t("settings.defaultBrowser.title")}
</Label> </Label>
@@ -909,7 +909,7 @@ export function SettingsDialog({
{permissions.map((permission) => ( {permissions.map((permission) => (
<div <div
key={permission.permission_type} key={permission.permission_type}
className="flex justify-between items-center p-3 rounded-lg border" className="flex items-center justify-between rounded-lg border p-3"
> >
<div className="flex items-center gap-x-3"> <div className="flex items-center gap-x-3">
{getPermissionIcon(permission.permission_type)} {getPermissionIcon(permission.permission_type)}
@@ -1015,7 +1015,7 @@ export function SettingsDialog({
{t("settings.encryption.passwordSetDescription")} {t("settings.encryption.passwordSetDescription")}
</span> </span>
</div> </div>
<div className="flex gap-2 flex-wrap"> <div className="flex flex-wrap gap-2">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@@ -1156,7 +1156,7 @@ export function SettingsDialog({
{t("settings.commercial.title")} {t("settings.commercial.title")}
</Label> </Label>
<div className="flex items-center justify-between p-3 rounded-md border bg-muted/40"> <div className="flex items-center justify-between rounded-md border bg-muted/40 p-3">
{cloudUser != null && cloudUser.plan !== "free" ? ( {cloudUser != null && cloudUser.plan !== "free" ? (
// Paid Donut plan supersedes the local commercial trial — // Paid Donut plan supersedes the local commercial trial —
// the trial only exists to gate commercial use until the // the trial only exists to gate commercial use until the
@@ -1205,7 +1205,7 @@ export function SettingsDialog({
</Label> </Label>
{!isLinux && ( {!isLinux && (
<div className="flex items-start gap-x-3 p-3 rounded-lg border"> <div className="flex items-start gap-x-3 rounded-lg border p-3">
<Checkbox <Checkbox
id="disable-auto-updates" id="disable-auto-updates"
checked={settings.disable_auto_updates ?? false} checked={settings.disable_auto_updates ?? false}
@@ -1227,7 +1227,7 @@ export function SettingsDialog({
</div> </div>
)} )}
<div className="flex items-start gap-x-3 p-3 rounded-lg border"> <div className="flex items-start gap-x-3 rounded-lg border p-3">
<Checkbox <Checkbox
id="keep-decrypted-profiles-in-ram" id="keep-decrypted-profiles-in-ram"
checked={settings.keep_decrypted_profiles_in_ram ?? false} checked={settings.keep_decrypted_profiles_in_ram ?? false}
@@ -1305,8 +1305,8 @@ export function SettingsDialog({
{/* System Info */} {/* System Info */}
{systemInfo && ( {systemInfo && (
<div className="pt-2 border-t"> <div className="border-t pt-2">
<p className="text-xs text-muted-foreground font-mono whitespace-pre-line select-all"> <p className="font-mono text-xs whitespace-pre-line text-muted-foreground select-all">
{`Donut Browser ${systemInfo.app_version}\n${systemInfo.os} ${systemInfo.arch}${systemInfo.portable ? " (portable)" : ""}`} {`Donut Browser ${systemInfo.app_version}\n${systemInfo.os} ${systemInfo.arch}${systemInfo.portable ? " (portable)" : ""}`}
</p> </p>
</div> </div>
@@ -1314,7 +1314,7 @@ export function SettingsDialog({
</div> </div>
{subPage ? ( {subPage ? (
<div className="shrink-0 flex items-center justify-end gap-2 pt-2 border-t border-border w-full max-w-2xl mx-auto"> <div className="mx-auto flex w-full max-w-2xl shrink-0 items-center justify-end gap-2 border-t border-border pt-2">
<LoadingButton <LoadingButton
size="sm" size="sm"
isLoading={isSaving} isLoading={isSaving}
src/components/shared-camoufox-config-form.tsx
+25 -25
View File
@@ -302,7 +302,7 @@ export function SharedCamoufoxConfigForm({
</div> </div>
{/* Randomize Fingerprint Option */} {/* Randomize Fingerprint Option */}
<div className="space-y-3 p-4 border rounded-lg bg-muted/30"> <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
id="randomize-fingerprint" id="randomize-fingerprint"
@@ -316,7 +316,7 @@ export function SharedCamoufoxConfigForm({
{t("fingerprint.generateRandomOnLaunch")} {t("fingerprint.generateRandomOnLaunch")}
</Label> </Label>
</div> </div>
<p className="text-sm text-muted-foreground ml-6"> <p className="ml-6 text-sm text-muted-foreground">
{t("fingerprint.generateRandomDescription")} {t("fingerprint.generateRandomDescription")}
</p> </p>
</div> </div>
@@ -410,7 +410,7 @@ export function SharedCamoufoxConfigForm({
{/* Navigator Properties */} {/* Navigator Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.navigatorProperties")}</Label> <Label>{t("fingerprint.navigatorProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label> <Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label>
<Input <Input
@@ -566,7 +566,7 @@ export function SharedCamoufoxConfigForm({
{/* Screen Properties */} {/* Screen Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.screenProperties")}</Label> <Label>{t("fingerprint.screenProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="screen-width"> <Label htmlFor="screen-width">
{t("fingerprint.screenWidth")} {t("fingerprint.screenWidth")}
@@ -687,7 +687,7 @@ export function SharedCamoufoxConfigForm({
{/* Window Properties */} {/* Window Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.windowProperties")}</Label> <Label>{t("fingerprint.windowProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="outer-width"> <Label htmlFor="outer-width">
{t("fingerprint.outerWidth")} {t("fingerprint.outerWidth")}
@@ -800,7 +800,7 @@ export function SharedCamoufoxConfigForm({
{/* Geolocation */} {/* Geolocation */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.geolocation")}</Label> <Label>{t("fingerprint.geolocation")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="latitude">{t("fingerprint.latitude")}</Label> <Label htmlFor="latitude">{t("fingerprint.latitude")}</Label>
<Input <Input
@@ -860,7 +860,7 @@ export function SharedCamoufoxConfigForm({
{/* Locale */} {/* Locale */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.locale")}</Label> <Label>{t("fingerprint.locale")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="locale-language"> <Label htmlFor="locale-language">
{t("fingerprint.language")} {t("fingerprint.language")}
@@ -917,7 +917,7 @@ export function SharedCamoufoxConfigForm({
{/* WebGL Properties */} {/* WebGL Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.webglProperties")}</Label> <Label>{t("fingerprint.webglProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="webgl-vendor"> <Label htmlFor="webgl-vendor">
{t("fingerprint.webglVendor")} {t("fingerprint.webglVendor")}
@@ -1065,7 +1065,7 @@ export function SharedCamoufoxConfigForm({
{/* Battery */} {/* Battery */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.battery")}</Label> <Label>{t("fingerprint.battery")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
@@ -1138,12 +1138,12 @@ export function SharedCamoufoxConfigForm({
</fieldset> </fieldset>
{limitedMode && ( {limitedMode && (
<> <>
<div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" /> <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
<div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
<div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
<div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
<div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
<div className="absolute inset-0 flex items-center justify-center z-[3]"> <div className="absolute inset-0 z-3 flex items-center justify-center">
<div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5"> <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
<ProBadge /> <ProBadge />
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
@@ -1168,7 +1168,7 @@ export function SharedCamoufoxConfigForm({
onValueChange={readOnly ? undefined : setActiveTab} onValueChange={readOnly ? undefined : setActiveTab}
className="w-full" className="w-full"
> >
<TabsList className="grid grid-cols-2 w-full"> <TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="automatic" disabled={readOnly}> <TabsTrigger value="automatic" disabled={readOnly}>
{t("fingerprint.automatic")} {t("fingerprint.automatic")}
</TabsTrigger> </TabsTrigger>
@@ -1217,7 +1217,7 @@ export function SharedCamoufoxConfigForm({
</div> </div>
{/* Randomize Fingerprint Option */} {/* Randomize Fingerprint Option */}
<div className="space-y-3 p-4 border rounded-lg bg-muted/30"> <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
id="randomize-fingerprint-auto" id="randomize-fingerprint-auto"
@@ -1234,7 +1234,7 @@ export function SharedCamoufoxConfigForm({
{t("fingerprint.generateRandomOnLaunch")} {t("fingerprint.generateRandomOnLaunch")}
</Label> </Label>
</div> </div>
<p className="text-sm text-muted-foreground ml-6"> <p className="ml-6 text-sm text-muted-foreground">
{t("fingerprint.generateRandomDescriptionAuto")} {t("fingerprint.generateRandomDescriptionAuto")}
</p> </p>
</div> </div>
@@ -1265,7 +1265,7 @@ export function SharedCamoufoxConfigForm({
className="space-y-3" className="space-y-3"
> >
<Label>{t("fingerprint.screenResolution")}</Label> <Label>{t("fingerprint.screenResolution")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="screen-max-width"> <Label htmlFor="screen-max-width">
{t("fingerprint.maxWidth")} {t("fingerprint.maxWidth")}
@@ -1354,12 +1354,12 @@ export function SharedCamoufoxConfigForm({
</fieldset> </fieldset>
{limitedMode && ( {limitedMode && (
<> <>
<div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" /> <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
<div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
<div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
<div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
<div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
<div className="absolute inset-0 flex items-center justify-center z-[3]"> <div className="absolute inset-0 z-3 flex items-center justify-center">
<div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5"> <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
<ProBadge /> <ProBadge />
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
src/components/shortcuts-page.tsx
+10 -10
View File
@@ -21,11 +21,11 @@ interface ShortcutsPageProps {
function Tokens({ tokens }: { tokens: string[] }) { function Tokens({ tokens }: { tokens: string[] }) {
return ( return (
<div className="flex items-center gap-1 shrink-0"> <div className="flex shrink-0 items-center gap-1">
{tokens.map((tok, i) => ( {tokens.map((tok, i) => (
<kbd <kbd
key={i} key={i}
className="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 rounded border border-border bg-muted text-[11px] font-medium text-foreground" className="inline-flex h-6 min-w-6 items-center justify-center rounded border border-border bg-muted px-1.5 text-[11px] font-medium text-foreground"
> >
{tok} {tok}
</kbd> </kbd>
@@ -49,8 +49,8 @@ export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
const digitGroups = groupTargets.slice(0, 9); const digitGroups = groupTargets.slice(0, 9);
return ( return (
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto px-6 pt-4 pb-8"> <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-4 pb-8">
<div className="max-w-3xl w-full mx-auto flex flex-col gap-6"> <div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
<header className="flex flex-col gap-1"> <header className="flex flex-col gap-1">
<h1 className="text-lg font-semibold">{t("shortcutsPage.title")}</h1> <h1 className="text-lg font-semibold">{t("shortcutsPage.title")}</h1>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -63,17 +63,17 @@ export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
if (items.length === 0) return null; if (items.length === 0) return null;
return ( return (
<section key={key} className="flex flex-col gap-2"> <section key={key} className="flex flex-col gap-2">
<h2 className="text-[10px] uppercase tracking-wide text-muted-foreground"> <h2 className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t(titleKey)} {t(titleKey)}
</h2> </h2>
<div className="rounded-md border bg-card divide-y divide-border"> <div className="divide-y divide-border rounded-md border bg-card">
{items.map((s) => ( {items.map((s) => (
<div <div
key={s.id} key={s.id}
className="flex items-center justify-between gap-4 px-3 py-2" className="flex items-center justify-between gap-4 px-3 py-2"
> >
<span <span
className="text-sm truncate min-w-0" className="min-w-0 truncate text-sm"
title={t(s.labelKey)} title={t(s.labelKey)}
> >
{t(s.labelKey)} {t(s.labelKey)}
@@ -88,17 +88,17 @@ export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
{digitGroups.length > 0 ? ( {digitGroups.length > 0 ? (
<section className="flex flex-col gap-2"> <section className="flex flex-col gap-2">
<h2 className="text-[10px] uppercase tracking-wide text-muted-foreground"> <h2 className="text-[10px] tracking-wide text-muted-foreground uppercase">
{t("commandPalette.groups.profileGroups")} {t("commandPalette.groups.profileGroups")}
</h2> </h2>
<div className="rounded-md border bg-card divide-y divide-border"> <div className="divide-y divide-border rounded-md border bg-card">
{digitGroups.map((target, i) => ( {digitGroups.map((target, i) => (
<div <div
key={target.id} key={target.id}
className="flex items-center justify-between gap-4 px-3 py-2" className="flex items-center justify-between gap-4 px-3 py-2"
> >
<span <span
className="text-sm truncate min-w-0" className="min-w-0 truncate text-sm"
title={target.name} title={target.name}
> >
{target.name} {target.name}
src/components/sync-all-dialog.tsx
+3 -3
View File
@@ -129,7 +129,7 @@ export function SyncAllDialog({ isOpen, onClose }: SyncAllDialogProps) {
{isLoading ? ( {isLoading ? (
<div className="flex justify-center py-8"> <div className="flex justify-center py-8">
<div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" /> <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
</div> </div>
) : ( ) : (
<div className="grid grid-cols-2 gap-2 py-2"> <div className="grid grid-cols-2 gap-2 py-2">
@@ -141,12 +141,12 @@ export function SyncAllDialog({ isOpen, onClose }: SyncAllDialogProps) {
<div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"> <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
<Icon className="size-4" /> <Icon className="size-4" />
</div> </div>
<div className="min-w-0 flex-1 text-sm font-medium truncate"> <div className="min-w-0 flex-1 truncate text-sm font-medium">
{label} {label}
</div> </div>
<Badge <Badge
variant="secondary" variant="secondary"
className="shrink-0 tabular-nums px-2" className="shrink-0 px-2 tabular-nums"
> >
{count} {count}
</Badge> </Badge>
src/components/sync-config-dialog.tsx
+9 -9
View File
@@ -248,7 +248,7 @@ export function SyncConfigDialog({
{isLoggedIn && user ? ( {isLoggedIn && user ? (
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="flex gap-2 items-center text-sm"> <div className="flex items-center gap-2 text-sm">
<div className="size-2 rounded-full bg-success" /> <div className="size-2 rounded-full bg-success" />
{t("sync.cloud.connected")} {t("sync.cloud.connected")}
</div> </div>
@@ -300,7 +300,7 @@ export function SyncConfigDialog({
: t("sync.team.roleMember")} : t("sync.team.roleMember")}
</span> </span>
</div> </div>
<p className="text-xs text-muted-foreground pt-1"> <p className="pt-1 text-xs text-muted-foreground">
{t("sync.team.manageOnWeb")} {t("sync.team.manageOnWeb")}
</p> </p>
</> </>
@@ -354,7 +354,7 @@ export function SyncConfigDialog({
<TabsContent value="cloud"> <TabsContent value="cloud">
{isCloudLoading ? ( {isCloudLoading ? (
<div className="flex justify-center py-8"> <div className="flex justify-center py-8">
<div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" /> <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
</div> </div>
) : ( ) : (
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
@@ -374,7 +374,7 @@ export function SyncConfigDialog({
<TabsContent value="self-hosted"> <TabsContent value="self-hosted">
{isLoading ? ( {isLoading ? (
<div className="flex justify-center py-8"> <div className="flex justify-center py-8">
<div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" /> <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
</div> </div>
) : ( ) : (
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
@@ -412,7 +412,7 @@ export function SyncConfigDialog({
onClick={() => { onClick={() => {
setShowToken(!showToken); setShowToken(!showToken);
}} }}
className="absolute right-3 top-1/2 p-1 rounded-sm transition-colors transform -translate-y-1/2 hover:bg-accent" className="absolute top-1/2 right-3 -translate-y-1/2 transform rounded-sm p-1 transition-colors hover:bg-accent"
aria-label={ aria-label={
showToken showToken
? t("common.aria.hideToken") ? t("common.aria.hideToken")
@@ -434,19 +434,19 @@ export function SyncConfigDialog({
</div> </div>
{connectionStatus === "testing" && ( {connectionStatus === "testing" && (
<div className="flex gap-2 items-center text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="size-4 rounded-full border-2 border-current animate-spin border-t-transparent" /> <div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
{t("sync.status.syncing")} {t("sync.status.syncing")}
</div> </div>
)} )}
{connectionStatus === "connected" && ( {connectionStatus === "connected" && (
<div className="flex gap-2 items-center text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="size-2 rounded-full bg-success" /> <div className="size-2 rounded-full bg-success" />
{t("sync.status.connected")} {t("sync.status.connected")}
</div> </div>
)} )}
{connectionStatus === "error" && ( {connectionStatus === "error" && (
<div className="flex gap-2 items-center text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="size-2 rounded-full bg-destructive" /> <div className="size-2 rounded-full bg-destructive" />
{t("sync.status.disconnected")} {t("sync.status.disconnected")}
</div> </div>
src/components/sync-follower-dialog.tsx
+7 -7
View File
@@ -127,20 +127,20 @@ export function SyncFollowerDialog({
{leaderProfile && ( {leaderProfile && (
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center gap-2 p-2 rounded-md bg-primary/10 border border-primary/20"> <div className="flex items-center gap-2 rounded-md border border-primary/20 bg-primary/10 p-2">
<Badge variant="default" className="text-xs"> <Badge variant="default" className="text-xs">
{t("profiles.synchronizer.leader")} {t("profiles.synchronizer.leader")}
</Badge> </Badge>
<span className="text-sm font-medium truncate"> <span className="truncate text-sm font-medium">
{leaderProfile.name} {leaderProfile.name}
</span> </span>
</div> </div>
<div className="border rounded-md"> <div className="rounded-md border">
<ScrollArea className="h-[clamp(120px,30vh,20rem)]"> <ScrollArea className="h-[clamp(120px,30vh,20rem)]">
<div className="space-y-1 p-2"> <div className="space-y-1 p-2">
{eligibleProfiles.length === 0 ? ( {eligibleProfiles.length === 0 ? (
<p className="text-sm text-muted-foreground py-4 text-center"> <p className="py-4 text-center text-sm text-muted-foreground">
{t("profiles.synchronizer.wayfernOnly")} {t("profiles.synchronizer.wayfernOnly")}
</p> </p>
) : ( ) : (
@@ -155,7 +155,7 @@ export function SyncFollowerDialog({
return ( return (
<div <div
key={profile.id} key={profile.id}
className="flex items-center gap-3 p-2 rounded-md hover:bg-accent cursor-pointer" className="flex cursor-pointer items-center gap-3 rounded-md p-2 hover:bg-accent"
onClick={() => { onClick={() => {
handleToggle( handleToggle(
profile.id, profile.id,
@@ -174,7 +174,7 @@ export function SyncFollowerDialog({
handleToggle(profile.id, checked === true); handleToggle(profile.id, checked === true);
}} }}
/> />
<span className="text-sm truncate flex-1"> <span className="flex-1 truncate text-sm">
{profile.name} {profile.name}
</span> </span>
{isFlaky && ( {isFlaky && (
@@ -182,7 +182,7 @@ export function SyncFollowerDialog({
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] px-1.5 py-0 text-warning border-warning/50 shrink-0" className="shrink-0 border-warning/50 px-1.5 py-0 text-[10px] text-warning"
> >
{t("profiles.synchronizer.flakyBadge")} {t("profiles.synchronizer.flakyBadge")}
</Badge> </Badge>
src/components/thank-you-dialog.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function ThankYouDialog({
initial={{ opacity: 0, y: 8 }} initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ ...spring, delay: 0.15 }} transition={{ ...spring, delay: 0.15 }}
className="mx-auto max-w-[46ch] text-sm leading-6 text-pretty text-muted-foreground" className="mx-auto max-w-[46ch] text-sm/6 text-pretty text-muted-foreground"
> >
{t("onboarding.thankYou.body")} {t("onboarding.thankYou.body")}
</motion.p> </motion.p>
src/components/traffic-details-dialog.tsx
+28 -28
View File
@@ -127,7 +127,7 @@ const TruncatedDomain = React.memo<{ domain: string }>(({ domain }) => {
}, [checkTruncation]); }, [checkTruncation]);
const content = ( const content = (
<span ref={ref} className="truncate block min-w-0 flex-1"> <span ref={ref} className="block min-w-0 flex-1 truncate">
{domain} {domain}
</span> </span>
); );
@@ -209,8 +209,8 @@ export function TrafficDetailsDialog({
const formattedTime = time.toLocaleTimeString(); const formattedTime = time.toLocaleTimeString();
return ( return (
<div className="bg-popover border rounded-lg px-3 py-2 shadow-lg"> <div className="rounded-lg border bg-popover px-3 py-2 shadow-lg">
<p className="text-xs text-muted-foreground mb-1">{formattedTime}</p> <p className="mb-1 text-xs text-muted-foreground">{formattedTime}</p>
{payload.map((entry) => ( {payload.map((entry) => (
<p key={String(entry.dataKey)} className="text-sm"> <p key={String(entry.dataKey)} className="text-sm">
<span className="text-muted-foreground"> <span className="text-muted-foreground">
@@ -262,7 +262,7 @@ export function TrafficDetailsDialog({
<DialogTitle> <DialogTitle>
{t("traffic.title")} {t("traffic.title")}
{profileName && ( {profileName && (
<span className="text-muted-foreground font-normal ml-2"> <span className="ml-2 font-normal text-muted-foreground">
— {profileName} — {profileName}
</span> </span>
)} )}
@@ -273,7 +273,7 @@ export function TrafficDetailsDialog({
<div className="space-y-6 pr-4"> <div className="space-y-6 pr-4">
{/* Chart with Period Selector */} {/* Chart with Period Selector */}
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="mb-2 flex items-center justify-between">
<h3 className="text-sm font-medium"> <h3 className="text-sm font-medium">
{t("traffic.bandwidthOverTime")} {t("traffic.bandwidthOverTime")}
</h3> </h3>
@@ -283,7 +283,7 @@ export function TrafficDetailsDialog({
setTimePeriod(v as TimePeriod); setTimePeriod(v as TimePeriod);
}} }}
> >
<SelectTrigger className="w-[120px] h-8"> <SelectTrigger className="h-8 w-[120px]">
<SelectValue <SelectValue
placeholder={t("traffic.timePeriodPlaceholder")} placeholder={t("traffic.timePeriodPlaceholder")}
/> />
@@ -396,7 +396,7 @@ export function TrafficDetailsDialog({
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<div className="flex items-center justify-center gap-6 mt-2"> <div className="mt-2 flex items-center justify-center gap-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div <div
className="size-3 rounded" className="size-3 rounded"
@@ -420,7 +420,7 @@ export function TrafficDetailsDialog({
{/* Period Stats - now uses backend-computed values */} {/* Period Stats - now uses backend-computed values */}
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div className="bg-muted/50 rounded-lg p-3"> <div className="rounded-lg bg-muted/50 p-3">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("traffic.sentLabel", { {t("traffic.sentLabel", {
period: period:
@@ -433,7 +433,7 @@ export function TrafficDetailsDialog({
{formatBytes(stats?.period_bytes_sent ?? 0)} {formatBytes(stats?.period_bytes_sent ?? 0)}
</p> </p>
</div> </div>
<div className="bg-muted/50 rounded-lg p-3"> <div className="rounded-lg bg-muted/50 p-3">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("traffic.receivedLabel", { {t("traffic.receivedLabel", {
period: period:
@@ -446,7 +446,7 @@ export function TrafficDetailsDialog({
{formatBytes(stats?.period_bytes_received ?? 0)} {formatBytes(stats?.period_bytes_received ?? 0)}
</p> </p>
</div> </div>
<div className="bg-muted/50 rounded-lg p-3"> <div className="rounded-lg bg-muted/50 p-3">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("traffic.requestsLabel", { {t("traffic.requestsLabel", {
period: period:
@@ -462,7 +462,7 @@ export function TrafficDetailsDialog({
</div> </div>
{/* Total Stats (smaller, under period stats) */} {/* Total Stats (smaller, under period stats) */}
<div className="flex items-center gap-6 text-sm text-muted-foreground border-t pt-4"> <div className="flex items-center gap-6 border-t pt-4 text-sm text-muted-foreground">
<div> <div>
<span className="font-medium"> <span className="font-medium">
{t("traffic.allTimeTraffic")} {t("traffic.allTimeTraffic")}
@@ -488,7 +488,7 @@ export function TrafficDetailsDialog({
{/* Top Domains by Traffic */} {/* Top Domains by Traffic */}
{topDomainsByTraffic.length > 0 && ( {topDomainsByTraffic.length > 0 && (
<div> <div>
<h3 className="text-sm font-medium mb-2"> <h3 className="mb-2 text-sm font-medium">
{t("traffic.topByTraffic", { {t("traffic.topByTraffic", {
period: period:
timePeriod === "all" timePeriod === "all"
@@ -496,8 +496,8 @@ export function TrafficDetailsDialog({
: timePeriod, : timePeriod,
})} })}
</h3> </h3>
<div className="border rounded-md"> <div className="rounded-md border">
<div className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30"> <div className="grid grid-cols-[1fr_80px_80px_80px] gap-2 border-b bg-muted/30 px-3 py-2 text-xs font-medium text-muted-foreground">
<span>{t("traffic.columnDomain")}</span> <span>{t("traffic.columnDomain")}</span>
<span className="text-right"> <span className="text-right">
{t("traffic.columnRequests")} {t("traffic.columnRequests")}
@@ -513,10 +513,10 @@ export function TrafficDetailsDialog({
{topDomainsByTraffic.map((domain, index) => ( {topDomainsByTraffic.map((domain, index) => (
<div <div
key={domain.domain} key={domain.domain}
className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30" className="grid grid-cols-[1fr_80px_80px_80px] gap-2 border-b px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
> >
<div className="flex items-center gap-2 min-w-0"> <div className="flex min-w-0 items-center gap-2">
<span className="text-xs text-muted-foreground w-4 shrink-0"> <span className="w-4 shrink-0 text-xs text-muted-foreground">
{index + 1} {index + 1}
</span> </span>
<TruncatedDomain domain={domain.domain} /> <TruncatedDomain domain={domain.domain} />
@@ -540,7 +540,7 @@ export function TrafficDetailsDialog({
{/* Top Domains by Requests */} {/* Top Domains by Requests */}
{topDomainsByRequests.length > 0 && ( {topDomainsByRequests.length > 0 && (
<div> <div>
<h3 className="text-sm font-medium mb-2"> <h3 className="mb-2 text-sm font-medium">
{t("traffic.topByRequests", { {t("traffic.topByRequests", {
period: period:
timePeriod === "all" timePeriod === "all"
@@ -548,8 +548,8 @@ export function TrafficDetailsDialog({
: timePeriod, : timePeriod,
})} })}
</h3> </h3>
<div className="border rounded-md"> <div className="rounded-md border">
<div className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30"> <div className="grid grid-cols-[1fr_80px_100px] gap-2 border-b bg-muted/30 px-3 py-2 text-xs font-medium text-muted-foreground">
<span>{t("traffic.columnDomain")}</span> <span>{t("traffic.columnDomain")}</span>
<span className="text-right"> <span className="text-right">
{t("traffic.columnRequests")} {t("traffic.columnRequests")}
@@ -562,10 +562,10 @@ export function TrafficDetailsDialog({
{topDomainsByRequests.map((domain, index) => ( {topDomainsByRequests.map((domain, index) => (
<div <div
key={domain.domain} key={domain.domain}
className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30" className="grid grid-cols-[1fr_80px_100px] gap-2 border-b px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
> >
<div className="flex items-center gap-2 min-w-0"> <div className="flex min-w-0 items-center gap-2">
<span className="text-xs text-muted-foreground w-4 shrink-0"> <span className="w-4 shrink-0 text-xs text-muted-foreground">
{index + 1} {index + 1}
</span> </span>
<TruncatedDomain domain={domain.domain} /> <TruncatedDomain domain={domain.domain} />
@@ -588,15 +588,15 @@ export function TrafficDetailsDialog({
{/* Unique IPs */} {/* Unique IPs */}
{stats?.unique_ips && stats.unique_ips.length > 0 && ( {stats?.unique_ips && stats.unique_ips.length > 0 && (
<div> <div>
<h3 className="text-sm font-medium mb-2"> <h3 className="mb-2 text-sm font-medium">
{t("traffic.uniqueIps", { count: stats.unique_ips.length })} {t("traffic.uniqueIps", { count: stats.unique_ips.length })}
</h3> </h3>
<FadingScrollArea className="p-3 max-h-[clamp(120px,15vh,240px)]"> <FadingScrollArea className="max-h-[clamp(120px,15vh,240px)] p-3">
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{stats.unique_ips.map((ip) => ( {stats.unique_ips.map((ip) => (
<span <span
key={ip} key={ip}
className="text-xs bg-muted px-2 py-1 rounded font-mono" className="rounded bg-muted px-2 py-1 font-mono text-xs"
> >
{ip} {ip}
</span> </span>
@@ -608,9 +608,9 @@ export function TrafficDetailsDialog({
{/* No data state */} {/* No data state */}
{!stats && ( {!stats && (
<div className="text-center py-8 text-muted-foreground"> <div className="py-8 text-center text-muted-foreground">
<p>{t("traffic.noData")}</p> <p>{t("traffic.noData")}</p>
<p className="text-sm mt-1">{t("traffic.noDataHint")}</p> <p className="mt-1 text-sm">{t("traffic.noDataHint")}</p>
</div> </div>
)} )}
</div> </div>
src/components/ui/alert.tsx
+3 -3
View File
@@ -4,13 +4,13 @@ import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const alertVariants = cva( 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", "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-card text-card-foreground", default: "bg-card text-card-foreground",
destructive: destructive:
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
}, },
}, },
defaultVariants: { defaultVariants: {
@@ -55,7 +55,7 @@ function AlertDescription({
<div <div
data-slot="alert-description" data-slot="alert-description"
className={cn( className={cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
className, className,
)} )}
{...props} {...props}
src/components/ui/animated-switch.tsx
+2 -2
View File
@@ -22,9 +22,9 @@ function AnimatedSwitch({ className, ...props }: AnimatedSwitchProps) {
data-slot="animated-switch" data-slot="animated-switch"
className={cn( className={cn(
"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center justify-start rounded-full border border-transparent px-[2px]", "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center justify-start rounded-full border border-transparent px-[2px]",
"bg-input data-[state=checked]:bg-primary data-[state=checked]:justify-end", "bg-input data-[state=checked]:justify-end data-[state=checked]:bg-primary",
"transition-colors duration-200 ease-out", "transition-colors duration-200 ease-out",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50", "disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
src/components/ui/animated-tabs.tsx
+3 -3
View File
@@ -78,7 +78,7 @@ function AnimatedTabsList({
<TabsPrimitive.List <TabsPrimitive.List
data-slot="animated-tabs-list" data-slot="animated-tabs-list"
className={cn( className={cn(
"relative inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-md p-0 [scrollbar-width:none]", "relative inline-flex max-w-full scrollbar-none items-center gap-1 overflow-x-auto rounded-md p-0",
className, className,
)} )}
onMouseLeave={(event) => { onMouseLeave={(event) => {
@@ -120,10 +120,10 @@ function AnimatedTabsTrigger({
onMouseEnter?.(event); onMouseEnter?.(event);
}} }}
className={cn( className={cn(
"relative isolate inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-sm font-medium transition-colors duration-150", "relative isolate inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium whitespace-nowrap transition-colors duration-150",
"text-muted-foreground hover:text-foreground", "text-muted-foreground hover:text-foreground",
isActive && "text-foreground", isActive && "text-foreground",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
"disabled:pointer-events-none disabled:opacity-50", "disabled:pointer-events-none disabled:opacity-50",
className, className,
)} )}
src/components/ui/badge.tsx
+3 -3
View File
@@ -5,16 +5,16 @@ import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const badgeVariants = cva( 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", "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
{ {
variants: { variants: {
variant: { variant: {
default: default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary: secondary:
"border-transparent bg-secondary dark:bg-secondary/60 text-secondary-foreground [a&]:hover:bg-secondary/90", "border-transparent bg-secondary text-secondary-foreground dark:bg-secondary/60 [a&]:hover:bg-secondary/90",
destructive: destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
outline: outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
}, },
src/components/ui/button.tsx
+4 -4
View File
@@ -5,16 +5,16 @@ import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"cursor-pointer 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", "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{ {
variants: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
outline: outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9", icon: "size-9",
}, },
src/components/ui/card.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card" data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
className, className,
)} )}
{...props} {...props}
@@ -40,7 +40,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-description" data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)} className={cn("text-sm text-muted-foreground", className)}
{...props} {...props}
/> />
); );
src/components/ui/chart.tsx
+5 -5
View File
@@ -61,7 +61,7 @@ const ChartContainer = React.forwardRef<
data-chart={chartId} data-chart={chartId}
ref={ref} ref={ref}
className={cn( className={cn(
"flex aspect-video max-h-[min(45vh,20rem)] w-full justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", "flex aspect-video max-h-[min(45vh,20rem)] w-full justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none",
className, className,
)} )}
{...props} {...props}
@@ -196,7 +196,7 @@ const ChartTooltipContent = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
className, className,
)} )}
> >
@@ -213,7 +213,7 @@ const ChartTooltipContent = React.forwardRef<
<div <div
key={String(item.dataKey ?? index)} key={String(item.dataKey ?? index)}
className={cn( className={cn(
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", "flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground",
indicator === "dot" && "items-center", indicator === "dot" && "items-center",
)} )}
> >
@@ -258,7 +258,7 @@ const ChartTooltipContent = React.forwardRef<
</span> </span>
</div> </div>
{item.value && ( {item.value && (
<span className="font-mono font-medium tabular-nums text-foreground"> <span className="font-mono font-medium text-foreground tabular-nums">
{item.value.toLocaleString()} {item.value.toLocaleString()}
</span> </span>
)} )}
@@ -314,7 +314,7 @@ const ChartLegendContent = React.forwardRef<
<div <div
key={item.value} key={item.value}
className={cn( className={cn(
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground", "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground",
)} )}
> >
{itemConfig?.icon && !hideIcon ? ( {itemConfig?.icon && !hideIcon ? (
src/components/ui/checkbox.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function Checkbox({
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
data-slot="checkbox" data-slot="checkbox"
className={cn( className={cn(
"cursor-pointer peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "peer size-4 shrink-0 cursor-pointer rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
className, className,
)} )}
{...props} {...props}
src/components/ui/color-picker.tsx
+15 -15
View File
@@ -152,7 +152,7 @@ export const ColorPicker = ({
}} }}
> >
<div <div
className={cn("flex flex-col gap-4 size-full", className)} className={cn("flex size-full flex-col gap-4", className)}
{...props} {...props}
> >
{children} {children}
@@ -232,7 +232,7 @@ export const ColorPickerSelection = memo(
return ( return (
<div <div
className={cn("relative rounded cursor-pointer size-full", className)} className={cn("relative size-full cursor-pointer rounded", className)}
onPointerDown={(e) => { onPointerDown={(e) => {
e.preventDefault(); e.preventDefault();
setIsDragging(true); setIsDragging(true);
@@ -245,7 +245,7 @@ export const ColorPickerSelection = memo(
{...props} {...props}
> >
<div <div
className="absolute size-4 rounded-full border-2 border-white -translate-x-1/2 -translate-y-1/2 pointer-events-none" className="pointer-events-none absolute size-4 -translate-1/2 rounded-full border-2 border-white"
style={{ style={{
left: `${positionX * 100}%`, left: `${positionX * 100}%`,
top: `${positionY * 100}%`, top: `${positionY * 100}%`,
@@ -269,7 +269,7 @@ export const ColorPickerHue = ({
return ( return (
<Slider.Root <Slider.Root
className={cn("flex relative w-full h-4 touch-none", className)} className={cn("relative flex h-4 w-full touch-none", className)}
max={360} max={360}
onValueChange={([hue]) => { onValueChange={([hue]) => {
setHue(hue); setHue(hue);
@@ -281,7 +281,7 @@ export const ColorPickerHue = ({
<Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]"> <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
<Slider.Range className="absolute h-full" /> <Slider.Range className="absolute h-full" />
</Slider.Track> </Slider.Track>
<Slider.Thumb className="block size-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" /> <Slider.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
</Slider.Root> </Slider.Root>
); );
}; };
@@ -296,7 +296,7 @@ export const ColorPickerAlpha = ({
return ( return (
<Slider.Root <Slider.Root
className={cn("flex relative w-full h-4 touch-none", className)} className={cn("relative flex h-4 w-full touch-none", className)}
max={100} max={100}
onValueChange={([alpha]) => { onValueChange={([alpha]) => {
setAlpha(alpha); setAlpha(alpha);
@@ -312,10 +312,10 @@ export const ColorPickerAlpha = ({
'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center', 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
}} }}
> >
<div className="absolute inset-0 bg-linear-to-r from-transparent rounded-full to-black/50" /> <div className="absolute inset-0 rounded-full bg-linear-to-r from-transparent to-black/50" />
<Slider.Range className="absolute h-full bg-transparent rounded-full" /> <Slider.Range className="absolute h-full rounded-full bg-transparent" />
</Slider.Track> </Slider.Track>
<Slider.Thumb className="block size-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" /> <Slider.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
</Slider.Root> </Slider.Root>
); );
}; };
@@ -372,7 +372,7 @@ export const ColorPickerOutput = ({
return ( return (
<Select onValueChange={setMode} value={mode}> <Select onValueChange={setMode} value={mode}>
<SelectTrigger className="w-20 h-8 text-xs shrink-0" {...props}> <SelectTrigger className="h-8 w-20 shrink-0 text-xs" {...props}>
<SelectValue placeholder={t("common.labels.mode")} /> <SelectValue placeholder={t("common.labels.mode")} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -396,11 +396,11 @@ const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
type="text" type="text"
{...props} {...props}
className={cn( className={cn(
"h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none", "h-8 w-13 rounded-l-none bg-secondary px-2 text-xs shadow-none",
className, className,
)} )}
/> />
<span className="absolute right-2 top-1/2 text-xs -translate-y-1/2 text-muted-foreground"> <span className="absolute top-1/2 right-2 -translate-y-1/2 text-xs text-muted-foreground">
% %
</span> </span>
</div> </div>
@@ -422,13 +422,13 @@ export const ColorPickerFormat = ({
return ( return (
<div <div
className={cn( className={cn(
"flex relative items-center -space-x-px w-full rounded-md shadow-sm", "relative flex w-full items-center -space-x-px rounded-md shadow-sm",
className, className,
)} )}
{...props} {...props}
> >
<Input <Input
className="px-2 h-8 text-xs rounded-r-none shadow-none bg-secondary" className="h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none"
readOnly readOnly
type="text" type="text"
value={hex} value={hex}
@@ -479,7 +479,7 @@ export const ColorPickerFormat = ({
return ( return (
<div className={cn("w-full rounded-md shadow-sm", className)} {...props}> <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
<Input <Input
className="px-2 w-full h-8 text-xs shadow-none bg-secondary" className="h-8 w-full bg-secondary px-2 text-xs shadow-none"
readOnly readOnly
type="text" type="text"
value={`rgba(${rgb.join(", ")}, ${alpha}%)`} value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
src/components/ui/command.tsx
+7 -7
View File
@@ -22,7 +22,7 @@ function Command({
<CommandPrimitive <CommandPrimitive
data-slot="command" data-slot="command"
className={cn( className={cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className, className,
)} )}
{...props} {...props}
@@ -57,7 +57,7 @@ function CommandDialog({
<Command <Command
filter={filter} filter={filter}
shouldFilter={shouldFilter} shouldFilter={shouldFilter}
className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-item]_svg]:size-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3"
> >
{children} {children}
</Command> </Command>
@@ -79,7 +79,7 @@ function CommandInput({
<CommandPrimitive.Input <CommandPrimitive.Input
data-slot="command-input" data-slot="command-input"
className={cn( className={cn(
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
{...props} {...props}
@@ -124,7 +124,7 @@ function CommandGroup({
<CommandPrimitive.Group <CommandPrimitive.Group
data-slot="command-group" data-slot="command-group"
className={cn( className={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-x-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", "overflow-x-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
className, className,
)} )}
{...props} {...props}
@@ -139,7 +139,7 @@ function CommandSeparator({
return ( return (
<CommandPrimitive.Separator <CommandPrimitive.Separator
data-slot="command-separator" data-slot="command-separator"
className={cn("bg-border -mx-1 h-px", className)} className={cn("-mx-1 h-px bg-border", className)}
{...props} {...props}
/> />
); );
@@ -153,7 +153,7 @@ function CommandItem({
<CommandPrimitive.Item <CommandPrimitive.Item
data-slot="command-item" data-slot="command-item"
className={cn( className={cn(
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
className, className,
)} )}
{...props} {...props}
@@ -169,7 +169,7 @@ function CommandShortcut({
<span <span
data-slot="command-shortcut" data-slot="command-shortcut"
className={cn( className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest", "ml-auto text-xs tracking-widest text-muted-foreground",
className, className,
)} )}
{...props} {...props}
src/components/ui/dialog.tsx
+5 -5
View File
@@ -258,14 +258,14 @@ function DialogContent({
// w-[calc(100%-2rem)] (not w-full + max-w) keeps the 1rem window // w-[calc(100%-2rem)] (not w-full + max-w) keeps the 1rem window
// gutter even when callers override max-w-*: tailwind-merge drops // gutter even when callers override max-w-*: tailwind-merge drops
// a base max-w in favor of the caller's, but leaves width alone. // a base max-w in favor of the caller's, but leaves width alone.
"bg-background fixed top-[50%] left-[50%] z-10000 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg max-h-[calc(100vh-3rem)] overflow-y-auto", "fixed top-[50%] left-[50%] z-10000 grid max-h-[calc(100vh-3rem)] w-[calc(100%-2rem)] max-w-lg -translate-[50%] gap-4 overflow-y-auto rounded-lg border bg-background p-6 shadow-lg",
className, className,
)} )}
{...props} {...props}
> >
{children} {children}
{!hideClose && dismissible && ( {!hideClose && dismissible && (
<DialogPrimitive.Close className="cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"> <DialogPrimitive.Close className="absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<RxCross2 /> <RxCross2 />
<span className="sr-only">{t("common.buttons.close")}</span> <span className="sr-only">{t("common.buttons.close")}</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
@@ -286,7 +286,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="dialog-header" data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-left pr-8", className)} className={cn("flex flex-col gap-2 pr-8 text-left", className)}
{...props} {...props}
/> />
); );
@@ -297,7 +297,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="dialog-footer" data-slot="dialog-footer"
className={cn( className={cn(
"flex flex-row flex-wrap justify-end gap-2 shrink-0", "flex shrink-0 flex-row flex-wrap justify-end gap-2",
className, className,
)} )}
{...props} {...props}
@@ -312,7 +312,7 @@ function DialogTitle({
return ( return (
<DialogPrimitive.Title <DialogPrimitive.Title
data-slot="dialog-title" data-slot="dialog-title"
className={cn("text-lg font-semibold leading-none", className)} className={cn("text-lg leading-none font-semibold", className)}
{...props} {...props}
/> />
); );
src/components/ui/dropdown-menu.tsx
+9 -9
View File
@@ -42,7 +42,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content" data-slot="dropdown-menu-content"
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[50000] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", "z-50000 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
className, className,
)} )}
{...props} {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
data-inset={inset} data-inset={inset}
data-variant={variant} data-variant={variant}
className={cn( className={cn(
"cursor-pointer focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
className, className,
)} )}
{...props} {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item" data-slot="dropdown-menu-checkbox-item"
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className, className,
)} )}
checked={checked} checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item" data-slot="dropdown-menu-radio-item"
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className, className,
)} )}
{...props} {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label" data-slot="dropdown-menu-label"
data-inset={inset} data-inset={inset}
className={cn( className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
className, className,
)} )}
{...props} {...props}
@@ -170,7 +170,7 @@ function DropdownMenuSeparator({
return ( return (
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator" data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)} className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props} {...props}
/> />
); );
@@ -184,7 +184,7 @@ function DropdownMenuShortcut({
<span <span
data-slot="dropdown-menu-shortcut" data-slot="dropdown-menu-shortcut"
className={cn( className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest", "ml-auto text-xs tracking-widest text-muted-foreground",
className, className,
)} )}
{...props} {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger" data-slot="dropdown-menu-sub-trigger"
data-inset={inset} data-inset={inset}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", "flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
className, className,
)} )}
{...props} {...props}
@@ -232,7 +232,7 @@ function DropdownMenuSubContent({
data-slot="dropdown-menu-sub-content" data-slot="dropdown-menu-sub-content"
collisionPadding={collisionPadding} collisionPadding={collisionPadding}
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[50000] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto rounded-md border p-1 shadow-lg", "z-50000 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
className, className,
)} )}
{...props} {...props}
src/components/ui/fading-scroll-area.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ export type FadingScrollAreaProps = HTMLAttributes<HTMLDivElement>;
/** /**
* Scrollable container with top/bottom fade overlays. The fades only become * Scrollable container with top/bottom fade overlays. The fades only become
* visible when the matching direction is actually scrollable. Use in place * visible when the matching direction is actually scrollable. Use in place
* of `<div className="border rounded-md max-h-[...] overflow-auto">` for * of `<div className="max-h-[...] overflow-auto rounded-md border">` for
* lists that should match the borderless aesthetic of the profile table. * lists that should match the borderless aesthetic of the profile table.
*/ */
export function FadingScrollArea({ export function FadingScrollArea({
@@ -23,7 +23,7 @@ export function FadingScrollArea({
return ( return (
<div <div
ref={ref} ref={ref}
className={cn("overflow-y-auto scroll-fade", className)} className={cn("scroll-fade overflow-y-auto", className)}
{...props} {...props}
> >
{children} {children}
src/components/ui/input.tsx
+3 -3
View File
@@ -8,9 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type} type={type}
data-slot="input" data-slot="input"
className={cn( className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
className, className,
)} )}
{...props} {...props}
src/components/ui/popover.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ function PopoverContent({
sideOffset={sideOffset} sideOffset={sideOffset}
collisionPadding={collisionPadding} collisionPadding={collisionPadding}
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[50000] max-h-(--radix-popover-content-available-height) origin-(--radix-popover-content-transform-origin) overflow-y-auto rounded-md border p-4 shadow-md outline-hidden", "z-50000 max-h-(--radix-popover-content-available-height) origin-(--radix-popover-content-transform-origin) overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
className, className,
)} )}
{...props} {...props}
src/components/ui/pro-badge.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export function ProBadge({ className }: { className?: string }) {
return ( return (
<span <span
className={cn( className={cn(
"text-[10px] font-semibold px-1 py-0.5 rounded bg-primary text-primary-foreground", "rounded bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground",
className, className,
)} )}
> >
src/components/ui/progress.tsx
+2 -2
View File
@@ -14,14 +14,14 @@ function Progress({
<ProgressPrimitive.Root <ProgressPrimitive.Root
data-slot="progress" data-slot="progress"
className={cn( className={cn(
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
className, className,
)} )}
{...props} {...props}
> >
<ProgressPrimitive.Indicator <ProgressPrimitive.Indicator
data-slot="progress-indicator" data-slot="progress-indicator"
className="bg-primary h-full w-full flex-1 transition-all" className="size-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }} style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
/> />
</ProgressPrimitive.Root> </ProgressPrimitive.Root>
src/components/ui/radio-group.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item <RadioGroupPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"cursor-pointer aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "aspect-square size-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
{...props} {...props}
src/components/ui/ripple.tsx
+5 -5
View File
@@ -7,15 +7,15 @@ import * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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", "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
outline: outline:
"border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", "border bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary: secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80", "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
}, },
size: { size: {
default: "h-10 px-4 py-2 has-[>svg]:px-3", default: "h-10 px-4 py-2 has-[>svg]:px-3",
sm: "h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", sm: "h-9 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
lg: "h-11 px-8 has-[>svg]:px-6", lg: "h-11 px-8 has-[>svg]:px-6",
icon: "size-10", icon: "size-10",
}, },
@@ -35,7 +35,7 @@ const buttonVariants = cva(
}, },
); );
const rippleVariants = cva("absolute rounded-full size-5 pointer-events-none", { const rippleVariants = cva("pointer-events-none absolute size-5 rounded-full", {
variants: { variants: {
variant: { variant: {
default: "bg-primary-foreground", default: "bg-primary-foreground",
src/components/ui/scroll-area.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ function ScrollArea({
> >
<ScrollAreaPrimitive.Viewport <ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport" data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1" className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
> >
{children} {children}
</ScrollAreaPrimitive.Viewport> </ScrollAreaPrimitive.Viewport>
@@ -49,7 +49,7 @@ function ScrollBar({
> >
<ScrollAreaPrimitive.ScrollAreaThumb <ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb" data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full" className="relative flex-1 rounded-full bg-border"
/> />
</ScrollAreaPrimitive.ScrollAreaScrollbar> </ScrollAreaPrimitive.ScrollAreaScrollbar>
); );
src/components/ui/select.tsx
+6 -6
View File
@@ -37,7 +37,7 @@ function SelectTrigger({
data-slot="select-trigger" data-slot="select-trigger"
data-size={size} data-size={size}
className={cn( className={cn(
"cursor-pointer border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
className, className,
)} )}
{...props} {...props}
@@ -61,7 +61,7 @@ function SelectContent({
<SelectPrimitive.Content <SelectPrimitive.Content
data-slot="select-content" data-slot="select-content"
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[50000] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", "relative z-50000 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
position === "popper" && position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className, className,
@@ -74,7 +74,7 @@ function SelectContent({
className={cn( className={cn(
"p-1", "p-1",
position === "popper" && position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1", "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
)} )}
> >
{children} {children}
@@ -92,7 +92,7 @@ function SelectLabel({
return ( return (
<SelectPrimitive.Label <SelectPrimitive.Label
data-slot="select-label" data-slot="select-label"
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)} className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
{...props} {...props}
/> />
); );
@@ -107,7 +107,7 @@ function SelectItem({
<SelectPrimitive.Item <SelectPrimitive.Item
data-slot="select-item" data-slot="select-item"
className={cn( className={cn(
"cursor-pointer focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className, className,
)} )}
{...props} {...props}
@@ -129,7 +129,7 @@ function SelectSeparator({
return ( return (
<SelectPrimitive.Separator <SelectPrimitive.Separator
data-slot="select-separator" data-slot="select-separator"
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)} className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
{...props} {...props}
/> />
); );
src/components/ui/sonner.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]} theme={theme as ToasterProps["theme"]}
className="toaster group" className="group toaster"
style={ style={
{ {
"--normal-bg": "var(--card)", "--normal-bg": "var(--card)",
src/components/ui/table.tsx
+4 -4
View File
@@ -16,7 +16,7 @@ function Table({
> >
<table <table
data-slot="table" data-slot="table"
className={cn("w-full text-sm caption-bottom", className)} className={cn("w-full caption-bottom text-sm", className)}
{...props} {...props}
/> />
</div> </div>
@@ -48,7 +48,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
<tfoot <tfoot
data-slot="table-footer" data-slot="table-footer"
className={cn( className={cn(
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className, className,
)} )}
{...props} {...props}
@@ -61,7 +61,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
<tr <tr
data-slot="table-row" data-slot="table-row"
className={cn( className={cn(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className, className,
)} )}
{...props} {...props}
@@ -74,7 +74,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
<th <th
data-slot="table-head" data-slot="table-head"
className={cn( className={cn(
"px-2 h-8 font-medium text-left align-middle whitespace-nowrap text-foreground", "h-8 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground",
className, className,
)} )}
{...props} {...props}
src/components/ui/tabs.tsx
+3 -3
View File
@@ -78,7 +78,7 @@ const TabsList = React.forwardRef<
ref={ref} ref={ref}
data-slot="tabs-list" data-slot="tabs-list"
className={cn( className={cn(
"inline-flex h-10 max-w-full items-center justify-center overflow-x-auto rounded-md bg-muted p-1 text-muted-foreground [scrollbar-width:none]", "inline-flex h-10 max-w-full scrollbar-none items-center justify-center overflow-x-auto rounded-md bg-muted p-1 text-muted-foreground",
className, className,
)} )}
{...props} {...props}
@@ -104,7 +104,7 @@ const TabsTrigger = React.forwardRef<
ref={ref} ref={ref}
data-slot="tabs-trigger" data-slot="tabs-trigger"
className={cn( className={cn(
"cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", "inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className, className,
)} )}
{...props} {...props}
@@ -134,7 +134,7 @@ function TabsContent({
exit={{ opacity: 0, filter: "blur(4px)" }} exit={{ opacity: 0, filter: "blur(4px)" }}
transition={transition} transition={transition}
className={cn( className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "mt-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none",
className, className,
)} )}
{...props} {...props}
src/components/ui/textarea.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return ( return (
<textarea <textarea
className={cn( className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
ref={ref} ref={ref}
src/components/ui/tooltip.tsx
+2 -2
View File
@@ -51,14 +51,14 @@ function TooltipContent({
sideOffset={sideOffset} sideOffset={sideOffset}
alignOffset={alignOffset} alignOffset={alignOffset}
className={cn( className={cn(
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[50000] w-fit max-w-[min(24rem,calc(100vw-2rem))] origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", "z-50000 w-fit max-w-[min(24rem,calc(100vw-2rem))] origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground fade-in-0 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
className, className,
)} )}
{...props} {...props}
> >
{children} {children}
<TooltipPrimitive.Arrow <TooltipPrimitive.Arrow
className="fill-primary z-[50000]" className="z-50000 fill-primary"
style={ style={
arrowOffset !== 0 arrowOffset !== 0
? { transform: `translateX(${-arrowOffset}px)` } ? { transform: `translateX(${-arrowOffset}px)` }
src/components/vpn-check-button.tsx
+2 -2
View File
@@ -75,11 +75,11 @@ export function VpnCheckButton({
disabled={isCurrentlyChecking || disabled} disabled={isCurrentlyChecking || disabled}
> >
{isCurrentlyChecking ? ( {isCurrentlyChecking ? (
<div className="size-3 rounded-full border border-current animate-spin border-t-transparent" /> <div className="size-3 animate-spin rounded-full border border-current border-t-transparent" />
) : result?.is_valid ? ( ) : result?.is_valid ? (
<FiCheck className="size-3 text-success" /> <FiCheck className="size-3 text-success" />
) : result && !result.is_valid ? ( ) : result && !result.is_valid ? (
<span className="text-destructive text-sm">✕</span> <span className="text-sm text-destructive">✕</span>
) : ( ) : (
<FiCheck className="size-3" /> <FiCheck className="size-3" />
)} )}
src/components/vpn-import-dialog.tsx
+6 -6
View File
@@ -219,8 +219,8 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
} }
}} }}
> >
<LuUpload className="size-10 text-muted-foreground mb-4" /> <LuUpload className="mb-4 size-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground text-center"> <p className="text-center text-sm text-muted-foreground">
{t("vpns.import.dropzonePrompt")} {t("vpns.import.dropzonePrompt")}
</p> </p>
<input <input
@@ -235,7 +235,7 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
}} }}
/> />
</div> </div>
<p className="text-xs text-muted-foreground text-center"> <p className="text-center text-xs text-muted-foreground">
{t("vpns.import.pasteHint", { modKey })} {t("vpns.import.pasteHint", { modKey })}
</p> </p>
</div> </div>
@@ -243,7 +243,7 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
{step === "vpn-preview" && vpnPreview && ( {step === "vpn-preview" && vpnPreview && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-3 p-4 bg-muted/30 rounded-lg"> <div className="flex items-center gap-3 rounded-lg bg-muted/30 p-4">
<LuShield className="size-8 text-primary" /> <LuShield className="size-8 text-primary" />
<div> <div>
<div className="font-medium"> <div className="font-medium">
@@ -275,8 +275,8 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("vpns.import.configPreview")}</Label> <Label>{t("vpns.import.configPreview")}</Label>
<ScrollArea className="h-[min(150px,25vh)] border rounded-md"> <ScrollArea className="h-[min(150px,25vh)] rounded-md border">
<pre className="p-2 text-xs font-mono whitespace-pre-wrap break-all"> <pre className="p-2 font-mono text-xs break-all whitespace-pre-wrap">
{vpnPreview.content.slice(0, 1000)} {vpnPreview.content.slice(0, 1000)}
{vpnPreview.content.length > 1000 && "..."} {vpnPreview.content.length > 1000 && "..."}
</pre> </pre>
src/components/wayfern-config-form.tsx
+29 -29
View File
@@ -227,7 +227,7 @@ export function WayfernConfigForm({
</div> </div>
{/* Randomize Fingerprint Option */} {/* Randomize Fingerprint Option */}
<div className="space-y-3 p-4 border rounded-lg bg-muted/30"> <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
id="randomize-fingerprint" id="randomize-fingerprint"
@@ -241,7 +241,7 @@ export function WayfernConfigForm({
{t("fingerprint.generateRandomOnLaunch")} {t("fingerprint.generateRandomOnLaunch")}
</Label> </Label>
</div> </div>
<p className="text-sm text-muted-foreground ml-6"> <p className="ml-6 text-sm text-muted-foreground">
{t("fingerprint.generateRandomDescription")} {t("fingerprint.generateRandomDescription")}
</p> </p>
</div> </div>
@@ -290,8 +290,8 @@ export function WayfernConfigForm({
{/* User Agent and Platform */} {/* User Agent and Platform */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.userAgentAndPlatform")}</Label> <Label>{t("fingerprint.userAgentAndPlatform")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2 col-span-full"> <div className="col-span-full space-y-2">
<Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label> <Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label>
<Input <Input
id="user-agent" id="user-agent"
@@ -381,7 +381,7 @@ export function WayfernConfigForm({
{/* Hardware Properties */} {/* Hardware Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.hardwareProperties")}</Label> <Label>{t("fingerprint.hardwareProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="hardware-concurrency"> <Label htmlFor="hardware-concurrency">
{t("fingerprint.hardwareConcurrency")} {t("fingerprint.hardwareConcurrency")}
@@ -439,7 +439,7 @@ export function WayfernConfigForm({
{/* Screen Properties */} {/* Screen Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.screenProperties")}</Label> <Label>{t("fingerprint.screenProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="screen-width"> <Label htmlFor="screen-width">
{t("fingerprint.screenWidth")} {t("fingerprint.screenWidth")}
@@ -561,7 +561,7 @@ export function WayfernConfigForm({
{/* Window Properties */} {/* Window Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.windowProperties")}</Label> <Label>{t("fingerprint.windowProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="window-outer-width"> <Label htmlFor="window-outer-width">
{t("fingerprint.outerWidth")} {t("fingerprint.outerWidth")}
@@ -674,7 +674,7 @@ export function WayfernConfigForm({
{/* Language & Locale */} {/* Language & Locale */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.languageAndLocale")}</Label> <Label>{t("fingerprint.languageAndLocale")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="language"> <Label htmlFor="language">
{t("fingerprint.primaryLanguage")} {t("fingerprint.primaryLanguage")}
@@ -756,7 +756,7 @@ export function WayfernConfigForm({
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("fingerprint.timezoneGeolocationDescription")} {t("fingerprint.timezoneGeolocationDescription")}
</p> </p>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="timezone"> <Label htmlFor="timezone">
{t("fingerprint.timezoneIana")} {t("fingerprint.timezoneIana")}
@@ -853,7 +853,7 @@ export function WayfernConfigForm({
{/* WebGL Properties */} {/* WebGL Properties */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.webglProperties")}</Label> <Label>{t("fingerprint.webglProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="webgl-vendor"> <Label htmlFor="webgl-vendor">
{t("fingerprint.webglVendor")} {t("fingerprint.webglVendor")}
@@ -951,7 +951,7 @@ export function WayfernConfigForm({
{/* Audio */} {/* Audio */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.audioProperties")}</Label> <Label>{t("fingerprint.audioProperties")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="audio-sample-rate"> <Label htmlFor="audio-sample-rate">
{t("fingerprint.sampleRate")} {t("fingerprint.sampleRate")}
@@ -994,7 +994,7 @@ export function WayfernConfigForm({
{/* Battery */} {/* Battery */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.battery")}</Label> <Label>{t("fingerprint.battery")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
@@ -1040,7 +1040,7 @@ export function WayfernConfigForm({
{/* Vendor Info */} {/* Vendor Info */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{t("fingerprint.vendorInfo")}</Label> <Label>{t("fingerprint.vendorInfo")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="vendor">{t("fingerprint.vendor")}</Label> <Label htmlFor="vendor">{t("fingerprint.vendor")}</Label>
<Input <Input
@@ -1094,12 +1094,12 @@ export function WayfernConfigForm({
</fieldset> </fieldset>
{limitedMode && ( {limitedMode && (
<> <>
<div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" /> <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
<div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
<div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
<div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
<div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
<div className="absolute inset-0 flex items-center justify-center z-[3]"> <div className="absolute inset-0 z-3 flex items-center justify-center">
<div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5"> <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
<ProBadge /> <ProBadge />
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
@@ -1123,7 +1123,7 @@ export function WayfernConfigForm({
onValueChange={readOnly ? undefined : setActiveTab} onValueChange={readOnly ? undefined : setActiveTab}
className="w-full" className="w-full"
> >
<TabsList className="grid grid-cols-2 w-full"> <TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="automatic" disabled={readOnly}> <TabsTrigger value="automatic" disabled={readOnly}>
{t("fingerprint.automatic")} {t("fingerprint.automatic")}
</TabsTrigger> </TabsTrigger>
@@ -1180,7 +1180,7 @@ export function WayfernConfigForm({
</div> </div>
{/* Randomize Fingerprint Option */} {/* Randomize Fingerprint Option */}
<div className="space-y-3 p-4 border rounded-lg bg-muted/30"> <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Checkbox <Checkbox
id="randomize-fingerprint-auto" id="randomize-fingerprint-auto"
@@ -1197,7 +1197,7 @@ export function WayfernConfigForm({
{t("fingerprint.generateRandomOnLaunch")} {t("fingerprint.generateRandomOnLaunch")}
</Label> </Label>
</div> </div>
<p className="text-sm text-muted-foreground ml-6"> <p className="ml-6 text-sm text-muted-foreground">
{t("fingerprint.generateRandomDescription")} {t("fingerprint.generateRandomDescription")}
</p> </p>
</div> </div>
@@ -1228,7 +1228,7 @@ export function WayfernConfigForm({
className="space-y-3" className="space-y-3"
> >
<Label>{t("fingerprint.screenResolution")}</Label> <Label>{t("fingerprint.screenResolution")}</Label>
<div className="grid grid-cols-1 @md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="screen-max-width"> <Label htmlFor="screen-max-width">
{t("fingerprint.maxWidth")} {t("fingerprint.maxWidth")}
@@ -1317,12 +1317,12 @@ export function WayfernConfigForm({
</fieldset> </fieldset>
{limitedMode && ( {limitedMode && (
<> <>
<div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" /> <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
<div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
<div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" /> <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
<div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
<div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" /> <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
<div className="absolute inset-0 flex items-center justify-center z-[3]"> <div className="absolute inset-0 z-3 flex items-center justify-center">
<div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5"> <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
<ProBadge /> <ProBadge />
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
src/components/wayfern-terms-dialog.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export function WayfernTermsDialog({
href="https://wayfern.com/tos" href="https://wayfern.com/tos"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-primary hover:underline text-sm font-medium block" className="block text-sm font-medium text-primary hover:underline"
> >
https://wayfern.com/tos https://wayfern.com/tos
</a> </a>
src/components/welcome-dialog.tsx
+8 -8
View File
@@ -214,7 +214,7 @@ export function WelcomeDialog({
<h2 className="text-2xl font-semibold tracking-tight text-balance"> <h2 className="text-2xl font-semibold tracking-tight text-balance">
{t("welcome.license.title")} {t("welcome.license.title")}
</h2> </h2>
<p className="mx-auto max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground"> <p className="mx-auto max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
{t("welcome.license.body")} {t("welcome.license.body")}
</p> </p>
</div> </div>
@@ -286,7 +286,7 @@ export function WelcomeDialog({
<LuMic className="size-5 shrink-0" /> <LuMic className="size-5 shrink-0" />
{t("welcome.permissions.title")} {t("welcome.permissions.title")}
</h2> </h2>
<p className="mx-auto max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground"> <p className="mx-auto max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
{t("welcome.permissions.desc")} {t("welcome.permissions.desc")}
</p> </p>
</div> </div>
@@ -337,7 +337,7 @@ export function WelcomeDialog({
<LuTriangleAlert className="size-5 shrink-0" /> <LuTriangleAlert className="size-5 shrink-0" />
{t("welcome.ready.errorTitle")} {t("welcome.ready.errorTitle")}
</h2> </h2>
<p className="max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground"> <p className="max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
{setup.error?.stage === "downloading" {setup.error?.stage === "downloading"
? t("welcome.ready.errorDownload", { ? t("welcome.ready.errorDownload", {
browser: browserName, browser: browserName,
@@ -371,7 +371,7 @@ export function WelcomeDialog({
<h2 className="text-2xl font-semibold tracking-tight text-balance"> <h2 className="text-2xl font-semibold tracking-tight text-balance">
{t("welcome.ready.title")} {t("welcome.ready.title")}
</h2> </h2>
<p className="max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground"> <p className="max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
{setup.phase === "ready" {setup.phase === "ready"
? t("welcome.ready.descReady") ? t("welcome.ready.descReady")
: setup.phase === "extracting" : setup.phase === "extracting"
@@ -396,14 +396,14 @@ export function WelcomeDialog({
}} }}
/> />
</div> </div>
<div className="flex items-center justify-between text-sm tabular-nums text-muted-foreground"> <div className="flex items-center justify-between text-sm text-muted-foreground tabular-nums">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<LuLoaderCircle className="size-4 shrink-0 animate-spin" /> <LuLoaderCircle className="size-4 shrink-0 animate-spin" />
{t("welcome.ready.downloading")} {t("welcome.ready.downloading")}
</span> </span>
<span>{setup.downloadPercent}%</span> <span>{setup.downloadPercent}%</span>
</div> </div>
<div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-0.5 text-xs tabular-nums text-muted-foreground"> <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground tabular-nums">
<span> <span>
{setup.totalBytes != null {setup.totalBytes != null
? t("welcome.ready.stats", { ? t("welcome.ready.stats", {
@@ -435,7 +435,7 @@ export function WelcomeDialog({
{setup.phase === "extracting" && ( {setup.phase === "extracting" && (
<div className="flex w-full max-w-xs flex-col gap-2"> <div className="flex w-full max-w-xs flex-col gap-2">
{setup.extractionOvertime ? ( {setup.extractionOvertime ? (
<div className="flex items-center justify-center gap-1.5 text-sm tabular-nums text-muted-foreground"> <div className="flex items-center justify-center gap-1.5 text-sm text-muted-foreground tabular-nums">
<LuLoaderCircle className="size-4 shrink-0 animate-spin" /> <LuLoaderCircle className="size-4 shrink-0 animate-spin" />
{t("welcome.ready.almostFinished")} {t("welcome.ready.almostFinished")}
</div> </div>
@@ -455,7 +455,7 @@ export function WelcomeDialog({
}} }}
/> />
</div> </div>
<div className="flex items-center justify-between text-sm tabular-nums text-muted-foreground"> <div className="flex items-center justify-between text-sm text-muted-foreground tabular-nums">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<LuLoaderCircle className="size-4 shrink-0 animate-spin" /> <LuLoaderCircle className="size-4 shrink-0 animate-spin" />
{t("welcome.ready.extracting")} {t("welcome.ready.extracting")}
src/components/window-drag-area.tsx
+4 -4
View File
@@ -109,7 +109,7 @@ export function WindowDragArea() {
return ( return (
<div <div
className="fixed top-0 right-0 z-50 flex items-center h-11 select-none" className="fixed top-0 right-0 z-50 flex h-11 items-center select-none"
aria-hidden="false" aria-hidden="false"
> >
<button <button
@@ -117,7 +117,7 @@ export function WindowDragArea() {
onClick={() => { onClick={() => {
void handleMinimize(); void handleMinimize();
}} }}
className="flex items-center justify-center w-11 h-full hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground" className="flex h-full w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
aria-label={t("common.window.minimize")} aria-label={t("common.window.minimize")}
> >
<svg <svg
@@ -136,7 +136,7 @@ export function WindowDragArea() {
onClick={() => { onClick={() => {
void handleToggleMaximize(); void handleToggleMaximize();
}} }}
className="flex items-center justify-center w-11 h-full hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground" className="flex h-full w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
aria-label={ aria-label={
isMaximized ? t("common.window.restore") : t("common.window.maximize") isMaximized ? t("common.window.restore") : t("common.window.maximize")
} }
@@ -175,7 +175,7 @@ export function WindowDragArea() {
onClick={() => { onClick={() => {
void handleClose(); void handleClose();
}} }}
className="flex items-center justify-center w-11 h-full hover:bg-destructive/90 transition-colors text-muted-foreground hover:text-destructive-foreground" className="flex h-full w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-destructive/90 hover:text-destructive-foreground"
aria-label={t("common.buttons.close")} aria-label={t("common.buttons.close")}
> >
<svg <svg