rainysy/Netcatty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add push-style host details panels (#649)

Browse Source 
Refs: https://github.com/binaricat/Netcatty/issues/640
This commit is contained in:
Eric Chan
2026-04-08 16:42:32 +08:00
committed by GitHub
parent 1d2489b02c
commit 7e566efe9c
11 changed files with 154 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/GroupDetailsPanel.tsx
View File

@@ -39,6 +39,7 @@ import {
import {
AsidePanel,
AsidePanelContent,
type AsidePanelLayout,
} from "./ui/aside-panel";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
@@ -63,6 +64,7 @@ interface GroupDetailsPanelProps {
terminalFontSize: number;
onSave: (config: GroupConfig, newName?: string, newParent?: string | null) => void;
onCancel: () => void;
layout?: AsidePanelLayout;
}
const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
@@ -76,6 +78,7 @@ const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
terminalFontSize,
onSave,
onCancel,
layout = "overlay",
}) => {
const { t } = useI18n();
const availableFonts = useAvailableFonts();
@@ -351,6 +354,7 @@ const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
onClearProxy={clearProxyConfig}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -368,6 +372,7 @@ const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
onClearChain={clearHostChain}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -395,6 +400,7 @@ const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
}}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -411,6 +417,7 @@ const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
onClose={onCancel}
onBack={() => setActiveSubPanel("none")}
showBackButton={true}
layout={layout}
/>
);
}
@@ -427,6 +434,7 @@ const GroupDetailsPanel: React.FC<GroupDetailsPanelProps> = ({
onClose={onCancel}
width="w-[380px]"
title={t("vault.groups.details")}
layout={layout}
actions={
<Button
variant="ghost"

10
components/HostDetailsPanel.tsx
View File

@@ -51,6 +51,7 @@ import {
AsidePanel,
AsidePanelContent,
AsidePanelFooter,
type AsidePanelLayout,
} from "./ui/aside-panel";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
@@ -100,6 +101,7 @@ interface HostDetailsPanelProps {
onCreateGroup?: (groupPath: string) => void; // Callback to create a new group
onCreateTag?: (tag: string) => void; // Callback to create a new tag
groupDefaults?: Partial<import('../domain/models').GroupConfig>;
layout?: AsidePanelLayout;
}
const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
@@ -118,6 +120,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
onCreateGroup,
onCreateTag,
groupDefaults,
layout = "overlay",
}) => {
const { t } = useI18n();
const { checkSshAgent } = useApplicationBackend();
@@ -502,6 +505,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
onSave={handleCreateGroup}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -514,6 +518,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
onClearProxy={clearProxyConfig}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -531,6 +536,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
onClearChain={clearHostChain}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -559,6 +565,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
}}
onBack={() => setActiveSubPanel("none")}
onCancel={onCancel}
layout={layout}
/>
);
}
@@ -576,6 +583,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
onClose={onCancel}
onBack={() => setActiveSubPanel("none")}
showBackButton={true}
layout={layout}
/>
);
}
@@ -614,6 +622,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
onClose={onCancel}
onBack={() => setActiveSubPanel("none")}
showBackButton={true}
layout={layout}
/>
);
}
@@ -624,6 +633,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
open={true}
onClose={onCancel}
width="w-[420px]"
layout={layout}
title={
initialData ? t("hostDetails.title.details") : t("hostDetails.title.new")
}

4
components/SerialHostDetailsPanel.tsx
View File

@@ -17,6 +17,7 @@ import {
AsidePanel,
AsidePanelContent,
AsidePanelFooter,
type AsidePanelLayout,
} from './ui/aside-panel';
interface SerialPort {
@@ -35,6 +36,7 @@ interface SerialHostDetailsPanelProps {
groups?: string[];
onSave: (host: Host) => void;
onCancel: () => void;
layout?: AsidePanelLayout;
}
const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
@@ -49,6 +51,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
groups = [],
onSave,
onCancel,
layout = 'overlay',
}) => {
const { t } = useI18n();
const terminalBackend = useTerminalBackend();
@@ -164,6 +167,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
title={t('serial.edit.title')}
subtitle={initialData.label}
className="z-40"
layout={layout}
>
<AsidePanelContent>
{/* Label */}

4
components/ThemeSelectPanel.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import {
AsidePanel,
AsidePanelContent,
type AsidePanelLayout,
} from './ui/aside-panel';
import { ScrollArea } from './ui/scroll-area';
import { ThemeList } from './ThemeList';
@@ -13,6 +14,7 @@ interface ThemeSelectPanelProps {
onClose: () => void;
onBack?: () => void;
showBackButton?: boolean;
layout?: AsidePanelLayout;
}
const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
@@ -22,6 +24,7 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
onClose,
onBack,
showBackButton = true,
layout = 'overlay',
}) => {
return (
<AsidePanel
@@ -30,6 +33,7 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
title="Select Color Theme"
showBackButton={showBackButton}
onBack={onBack}
layout={layout}
>
<AsidePanelContent className="p-0">
<ScrollArea className="h-full">

46
components/VaultView.tsx
View File

@@ -1443,6 +1443,15 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
}, [managedSources]);
const isHostsSectionActive = currentSection === "hosts";
const hasHostsSidePanel =
isHostsSectionActive &&
((isGroupPanelOpen && !!editingGroupPath) || isHostPanelOpen);
const splitViewGridStyle = hasHostsSidePanel
? {
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 220px), 280px))",
justifyContent: "start" as const,
}
: undefined;
const isSameDropTarget = useCallback((a: DropTarget | null, b: DropTarget | null) => {
if (!a || !b) return a === b;
@@ -1973,9 +1982,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
</h3>
<div className={cn(
viewMode === "grid"
? "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
? cn(
"grid gap-3",
!hasHostsSidePanel && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
)
: "flex flex-col gap-0",
)}>
)}
style={viewMode === "grid" ? splitViewGridStyle : undefined}>
{pinnedHosts.map((host) => {
const safeHost = sanitizeHost(host);
const effectiveDistro = getEffectiveHostDistro(safeHost);
@@ -2073,9 +2086,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
</h3>
<div className={cn(
viewMode === "grid"
? "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
? cn(
"grid gap-3",
!hasHostsSidePanel && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
)
: "flex flex-col gap-0",
)}>
)}
style={viewMode === "grid" ? splitViewGridStyle : undefined}>
{recentHosts.map((host) => {
const safeHost = sanitizeHost(host);
const effectiveDistro = getEffectiveHostDistro(safeHost);
@@ -2174,9 +2191,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
className={cn(
displayedGroups.length === 0 ? "hidden" : "",
viewMode === "grid"
? "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
? cn(
"grid gap-3",
!hasHostsSidePanel && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
)
: "flex flex-col gap-0",
)}
style={viewMode === "grid" ? splitViewGridStyle : undefined}
onDragOver={(e) => {
e.preventDefault();
}}
@@ -2414,9 +2435,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
<div
className={cn(
viewMode === "grid"
? "grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
? cn(
"grid gap-3",
!hasHostsSidePanel && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
)
: "flex flex-col gap-0",
)}
style={viewMode === "grid" ? splitViewGridStyle : undefined}
>
{group.hosts.filter((h) => selectedGroupPath || !pinnedRecentIds.has(h.id)).map((host) => {
const safeHost = sanitizeHost(host);
@@ -2555,9 +2580,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
<div
className={cn(
viewMode === "grid"
? "grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
? cn(
"grid gap-3",
!hasHostsSidePanel && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
)
: "flex flex-col gap-0",
)}
style={viewMode === "grid" ? splitViewGridStyle : undefined}
>
{displayedHosts.filter((h) => selectedGroupPath || !pinnedRecentIds.has(h.id)).map((host) => {
const safeHost = sanitizeHost(host);
@@ -2823,6 +2852,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
setIsGroupPanelOpen(false);
setEditingGroupPath(null);
}}
layout="inline"
/>
)}
@@ -2862,6 +2892,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
Array.from(new Set([...customGroups, groupPath])),
);
}}
layout="inline"
/>
)}
@@ -2882,6 +2913,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
setIsHostPanelOpen(false);
setEditingHost(null);
}}
layout="inline"
/>
)}

5
components/host-details/ChainPanel.tsx
View File

@@ -7,7 +7,7 @@ import React, { useMemo, useState } from 'react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { Host } from '../../types';
import { DistroAvatar } from '../DistroAvatar';
import { AsidePanel } from '../ui/aside-panel';
import { AsidePanel, type AsidePanelLayout } from '../ui/aside-panel';
import { Button } from '../ui/button';
import { Card } from '../ui/card';
import { Input } from '../ui/input';
@@ -24,6 +24,7 @@ export interface ChainPanelProps {
onClearChain: () => void;
onBack: () => void;
onCancel: () => void;
layout?: AsidePanelLayout;
}
export const ChainPanel: React.FC<ChainPanelProps> = ({
@@ -37,6 +38,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
onClearChain,
onBack,
onCancel,
layout = 'overlay',
}) => {
const { t } = useI18n();
const [searchQuery, setSearchQuery] = useState('');
@@ -54,6 +56,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
title={t('hostDetails.chain.title')}
showBackButton={true}
onBack={onBack}
layout={layout}
actions={
<Button size="sm" onClick={onBack}>
{t('common.save')}

5
components/host-details/CreateGroupPanel.tsx
View File

@@ -5,7 +5,7 @@
import { FolderPlus,HelpCircle,Plus } from 'lucide-react';
import React from 'react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { AsidePanel,AsidePanelContent } from '../ui/aside-panel';
import { AsidePanel,AsidePanelContent,type AsidePanelLayout } from '../ui/aside-panel';
import { Button } from '../ui/button';
import { Card } from '../ui/card';
import { Input } from '../ui/input';
@@ -42,6 +42,7 @@ export interface CreateGroupPanelProps {
onSave: () => void;
onBack: () => void;
onCancel: () => void;
layout?: AsidePanelLayout;
}
export const CreateGroupPanel: React.FC<CreateGroupPanelProps> = ({
@@ -53,6 +54,7 @@ export const CreateGroupPanel: React.FC<CreateGroupPanelProps> = ({
onSave,
onBack,
onCancel,
layout = 'overlay',
}) => {
const { t } = useI18n();
return (
@@ -62,6 +64,7 @@ export const CreateGroupPanel: React.FC<CreateGroupPanelProps> = ({
title={t('hostDetails.group.title')}
showBackButton={true}
onBack={onBack}
layout={layout}
actions={
<Button size="sm" onClick={onSave} disabled={!newGroupName.trim()}>
{t('common.save')}

5
components/host-details/EnvVarsPanel.tsx
View File

@@ -6,7 +6,7 @@ import { Plus,X } from 'lucide-react';
import React from 'react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { EnvVar } from '../../types';
import { AsidePanel,AsidePanelContent } from '../ui/aside-panel';
import { AsidePanel,AsidePanelContent,type AsidePanelLayout } from '../ui/aside-panel';
import { Button } from '../ui/button';
import { Card } from '../ui/card';
import { Input } from '../ui/input';
@@ -25,6 +25,7 @@ export interface EnvVarsPanelProps {
onSave: () => void;
onBack: () => void;
onCancel: () => void;
layout?: AsidePanelLayout;
}
export const EnvVarsPanel: React.FC<EnvVarsPanelProps> = ({
@@ -41,6 +42,7 @@ export const EnvVarsPanel: React.FC<EnvVarsPanelProps> = ({
onSave,
onBack,
onCancel,
layout = 'overlay',
}) => {
const { t } = useI18n();
return (
@@ -50,6 +52,7 @@ export const EnvVarsPanel: React.FC<EnvVarsPanelProps> = ({
title={t('hostDetails.envVars.title')}
showBackButton={true}
onBack={onBack}
layout={layout}
actions={
<Button size="sm" onClick={onSave}>
{t('common.save')}

5
components/host-details/ProxyPanel.tsx
View File

@@ -7,7 +7,7 @@ import React from 'react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { cn } from '../../lib/utils';
import { ProxyConfig } from '../../types';
import { AsidePanel,AsidePanelContent } from '../ui/aside-panel';
import { AsidePanel,AsidePanelContent,type AsidePanelLayout } from '../ui/aside-panel';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { Card } from '../ui/card';
@@ -19,6 +19,7 @@ export interface ProxyPanelProps {
onClearProxy: () => void;
onBack: () => void;
onCancel: () => void;
layout?: AsidePanelLayout;
}
export const ProxyPanel: React.FC<ProxyPanelProps> = ({
@@ -27,6 +28,7 @@ export const ProxyPanel: React.FC<ProxyPanelProps> = ({
onClearProxy,
onBack,
onCancel,
layout = 'overlay',
}) => {
const { t } = useI18n();
return (
@@ -36,6 +38,7 @@ export const ProxyPanel: React.FC<ProxyPanelProps> = ({
title={t('hostDetails.proxyPanel.title')}
showBackButton={true}
onBack={onBack}
layout={layout}
actions={
<Button size="sm" onClick={onBack} disabled={!proxyConfig?.host}>
{t('common.save')}

57
components/ui/aside-panel.tsx
View File

@@ -1,5 +1,5 @@
import { ArrowLeft, MoreVertical, X } from 'lucide-react';
import React, { createContext, ReactNode, useCallback, useContext, useState } from 'react';
import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
import { cn } from '../../lib/utils';
import { Popover, PopoverContent, PopoverTrigger } from './popover';
import { ScrollArea } from './scroll-area';
@@ -44,6 +44,7 @@ interface AsidePanelProps {
children: ReactNode;
className?: string;
width?: string;
layout?: AsidePanelLayout;
}
interface AsidePanelHeaderProps {
@@ -171,14 +172,34 @@ interface AsidePanelStackProps {
initialItem: AsideContentItem;
className?: string;
width?: string;
layout?: AsidePanelLayout;
}
export type AsidePanelLayout = 'overlay' | 'inline';
const resolveInlineWidth = (width: string) => {
const arbitraryWidthMatch = width.match(/w-\[(.+)\]/);
if (arbitraryWidthMatch) {
return arbitraryWidthMatch[1];
}
switch (width) {
case 'w-full':
return '100%';
case 'w-screen':
return '100vw';
default:
return '380px';
}
};
export const AsidePanelStack: React.FC<AsidePanelStackProps> = ({
open,
onClose,
initialItem,
className,
width = 'w-[380px]',
layout = 'overlay',
}) => {
const [stack, setStack] = useState<AsideContentItem[]>([initialItem]);
@@ -205,6 +226,13 @@ export const AsidePanelStack: React.FC<AsidePanelStackProps> = ({
const currentItem = stack[stack.length - 1];
const canGoBack = stack.length > 1;
const inlineWidth = useMemo(() => resolveInlineWidth(width), [width]);
const inlineStyle = layout === 'inline'
? ({
width: inlineWidth,
['--aside-inline-width' as string]: inlineWidth,
} as React.CSSProperties)
: undefined;
// Reset stack when panel closes/opens
React.useEffect(() => {
@@ -218,10 +246,13 @@ export const AsidePanelStack: React.FC<AsidePanelStackProps> = ({
return (
<AsidePanelContext.Provider value={{ push, pop, replace, clear, canGoBack, currentItem }}>
<div className={cn(
"absolute right-0 top-0 bottom-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden",
width,
layout === 'inline'
? "relative split-panel-enter shrink-0 h-full min-h-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden shadow-[-16px_0_32px_hsl(var(--foreground)/0.08)]"
: "absolute right-0 top-0 bottom-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden",
layout === 'overlay' && width,
className
)}>
)}
style={inlineStyle}>
<AsidePanelHeader
title={currentItem.title}
subtitle={currentItem.subtitle}
@@ -248,15 +279,27 @@ export const AsidePanel: React.FC<AsidePanelProps> = ({
children,
className,
width = 'w-[380px]',
layout = 'overlay',
}) => {
if (!open) return null;
const inlineWidth = resolveInlineWidth(width);
const inlineStyle = layout === 'inline'
? ({
width: inlineWidth,
['--aside-inline-width' as string]: inlineWidth,
} as React.CSSProperties)
: undefined;
return (
<div className={cn(
"absolute right-0 top-0 bottom-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden",
width,
layout === 'inline'
? "relative split-panel-enter shrink-0 h-full min-h-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden shadow-[-16px_0_32px_hsl(var(--foreground)/0.08)]"
: "absolute right-0 top-0 bottom-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden",
layout === 'overlay' && width,
className
)}>
)}
style={inlineStyle}>
{title && (
<AsidePanelHeader
title={title}

23
index.css
View File

@@ -102,6 +102,29 @@
}
}
@keyframes split-panel-enter {
0% {
width: 0;
min-width: 0;
opacity: 0;
transform: translateX(22px);
}
55% {
opacity: 0.88;
}
100% {
width: var(--aside-inline-width);
min-width: var(--aside-inline-width);
opacity: 1;
transform: translateX(0);
}
}
.split-panel-enter {
animation: split-panel-enter 220ms cubic-bezier(0.24, 0.84, 0.32, 1) both;
will-change: width, opacity, transform;
}
:root {
color-scheme: light;
}