Spaces:
Paused
Paused
File size: 3,288 Bytes
f878eff | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import { useState, useCallback } from "preact/hooks";
import { useT } from "../../../shared/i18n/context";
import type { ProxyEntry } from "../../../shared/types";
interface BulkActionsProps {
selectedCount: number;
selectedIds: Set<string>;
proxies: ProxyEntry[];
onBulkAssign: (proxyId: string) => void;
onEvenDistribute: () => void;
onOpenRuleAssign: () => void;
}
export function BulkActions({
selectedCount,
selectedIds,
proxies,
onBulkAssign,
onEvenDistribute,
onOpenRuleAssign,
}: BulkActionsProps) {
const t = useT();
const [targetProxy, setTargetProxy] = useState("global");
const handleApply = useCallback(() => {
if (selectedIds.size === 0) return;
onBulkAssign(targetProxy);
}, [selectedIds, targetProxy, onBulkAssign]);
if (selectedCount === 0) return null;
return (
<div class="sticky bottom-0 z-40 bg-white dark:bg-card-dark border-t border-gray-200 dark:border-border-dark shadow-lg px-4 py-3">
<div class="flex items-center gap-3 flex-wrap">
{/* Selection count */}
<span class="text-sm font-medium text-slate-700 dark:text-text-main shrink-0">
{selectedCount} {t("accountsCount")} {t("selected")}
</span>
<div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
{/* Batch assign */}
<div class="flex items-center gap-2">
<span class="text-xs text-slate-500 dark:text-text-dim shrink-0">{t("batchAssignTo")}:</span>
<select
value={targetProxy}
onChange={(e) => setTargetProxy((e.target as HTMLSelectElement).value)}
class="text-xs px-2 py-1.5 rounded-md border border-gray-200 dark:border-border-dark bg-white dark:bg-bg-dark text-slate-700 dark:text-text-main focus:outline-none focus:ring-1 focus:ring-primary cursor-pointer"
>
<option value="global">{t("globalDefault")}</option>
<option value="direct">{t("directNoProxy")}</option>
<option value="auto">{t("autoRoundRobin")}</option>
{proxies.map((p) => (
<option key={p.id} value={p.id}>
{p.name}
</option>
))}
</select>
<button
onClick={handleApply}
class="px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary-hover transition-colors"
>
{t("applyBtn")}
</button>
</div>
<div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
{/* Even distribute */}
<button
onClick={onEvenDistribute}
disabled={proxies.length === 0}
class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
>
{t("evenDistribute")}
</button>
{/* Rule assign */}
<button
onClick={onOpenRuleAssign}
class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
>
{t("ruleAssign")}
</button>
</div>
</div>
);
}
|