renciy/Netcatty
1
0
Fork 0
mirror of https://github.com/binaricat/Netcatty.git synced 2026-10-09 15:58:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pin the host multi-select bar to the top of the page (#793)

Browse Source 
The bulk-action bar for multi-select (selected count, Select All /
Deselect All / Delete / close) was rendered inside the Hosts
section, so it scrolled out of view as soon as the user moved
past the first row of cards.

Hoist the bar out of the scroll container and render it as a
sibling right after the top header. It is now always visible below
the header while multi-select is active in the Hosts section, and
slims down visually:

- Single flat row (no inner pill, no secondary border)
- Compact button sizing: h-7, px-2, text-xs, icon-12
- Bottom-only border for separation from the scroll area
- Count label forced to h-7 + leading-none so it vertically
  centers against the buttons

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈大猫
2026-04-22 01:46:22 +08:00
committed by GitHub
parent e992d51fa6
commit 0108390d4f
1 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/VaultView.tsx
+46 -43
View File
@@ -1977,6 +1977,52 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
</div>
</header>
{isMultiSelectMode && isHostsSectionActive && (
<div className="px-4 py-1.5 bg-background border-b border-border/40 flex items-center gap-2">
<span className="flex items-center h-7 text-xs text-muted-foreground leading-none">
{t("vault.hosts.selected", { count: selectedHostIds.size })}
</span>
<div className="flex-1" />
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-xs"
onClick={() => {
const allIds = new Set(displayedHosts.map(h => h.id));
setSelectedHostIds(allIds);
}}
>
{t("vault.hosts.selectAll")}
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-xs"
onClick={clearHostSelection}
>
{t("vault.hosts.deselectAll")}
</Button>
<Button
variant="destructive"
size="sm"
className="h-7 px-2 text-xs"
disabled={selectedHostIds.size === 0}
onClick={deleteSelectedHosts}
>
<Trash2 size={12} className="mr-1" />
{t("vault.hosts.deleteSelected", { count: selectedHostIds.size })}
</Button>
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={clearHostSelection}
>
<X size={12} />
</Button>
</div>
)}
{/* Keep hosts mounted so switching sections does not reset scroll or remount the list. */}
<div
className={cn(
@@ -2411,49 +2457,6 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
</div>
</div>
{isMultiSelectMode && (
<div className="flex items-center gap-2 p-2 bg-secondary/60 rounded-lg border border-border/40">
<span className="text-sm text-muted-foreground">
{t("vault.hosts.selected", { count: selectedHostIds.size })}
</span>
<div className="flex-1" />
<Button
variant="ghost"
size="sm"
onClick={() => {
const allIds = new Set(displayedHosts.map(h => h.id));
setSelectedHostIds(allIds);
}}
>
{t("vault.hosts.selectAll")}
</Button>
<Button
variant="ghost"
size="sm"
onClick={clearHostSelection}
>
{t("vault.hosts.deselectAll")}
</Button>
<Button
variant="destructive"
size="sm"
disabled={selectedHostIds.size === 0}
onClick={deleteSelectedHosts}
>
<Trash2 size={14} className="mr-1" />
{t("vault.hosts.deleteSelected", { count: selectedHostIds.size })}
</Button>
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={clearHostSelection}
>
<X size={14} />
</Button>
</div>
)}
{viewMode === "tree" ? (
<HostTreeView
groupTree={treeViewGroupTree}