[Init] Initial commit - NetMesh terminal manager

components/host-details/EnvVarsPanel.tsx

@@ -0,0 +1,133 @@
+/**
+ * Environment Variables Sub-Panel
+ * Panel for configuring environment variables for SSH connections
+ */
+import { Plus,X } from 'lucide-react';
+import React from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { EnvVar } from '../../types';
+import { AsidePanel,AsidePanelContent,type AsidePanelLayout,type AsidePanelResizeProps } from '../ui/aside-panel';
+import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+import { Input } from '../ui/input';
+
+export interface EnvVarsPanelProps {
+    hostLabel: string;
+    hostHostname: string;
+    environmentVariables: EnvVar[];
+    newEnvName: string;
+    newEnvValue: string;
+    setNewEnvName: (name: string) => void;
+    setNewEnvValue: (value: string) => void;
+    onAddEnvVar: () => void;
+    onRemoveEnvVar: (index: number) => void;
+    onUpdateEnvVar: (index: number, field: 'name' | 'value', value: string) => void;
+    onSave: () => void;
+    onBack: () => void;
+    onCancel: () => void;
+    layout?: AsidePanelLayout;
+}
+
+export type EnvVarsPanelPropsWithResize = EnvVarsPanelProps & AsidePanelResizeProps;
+
+export const EnvVarsPanel: React.FC<EnvVarsPanelPropsWithResize> = ({
+    hostLabel,
+    hostHostname,
+    environmentVariables,
+    newEnvName,
+    newEnvValue,
+    setNewEnvName,
+    setNewEnvValue,
+    onAddEnvVar,
+    onRemoveEnvVar,
+    onUpdateEnvVar,
+    onSave,
+    onBack,
+    onCancel,
+    layout = 'overlay',
+    resizable,
+    persistWidthStorageKey,
+    resizeAriaLabel,
+}) => {
+    const { t } = useI18n();
+    return (
+        <AsidePanel
+            open={true}
+            onClose={onCancel}
+            title={t('hostDetails.envVars.title')}
+            showBackButton={true}
+            onBack={onBack}
+            layout={layout}
+            resizable={resizable}
+            persistWidthStorageKey={persistWidthStorageKey}
+            resizeAriaLabel={resizeAriaLabel}
+            actions={
+                <Button size="sm" onClick={onSave}>
+                    {t('common.save')}
+                </Button>
+            }
+        >
+            <AsidePanelContent>
+                <div className="text-sm text-muted-foreground">
+                    {t('hostDetails.envVars.desc', { host: hostLabel || hostHostname })}
+                    <p className="text-xs mt-1">{t('hostDetails.envVars.note')}</p>
+                </div>
+
+                <Button className="w-full h-10" onClick={onAddEnvVar} disabled={!newEnvName.trim()}>
+                    <Plus size={14} className="mr-2" /> {t('hostDetails.envVars.add')}
+                </Button>
+
+                {/* Existing variables */}
+                {environmentVariables.map((envVar, index) => (
+                    <Card key={index} className="p-3 space-y-2 bg-card border-border/80">
+                        <div className="flex items-center justify-between">
+                            <span className="text-xs font-semibold">{t('hostDetails.envVars.variable')}</span>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 text-muted-foreground hover:text-destructive"
+                                onClick={() => onRemoveEnvVar(index)}
+                            >
+                                <X size={14} />
+                            </Button>
+                        </div>
+                        <Input
+                            placeholder={t('hostDetails.envVars.variable')}
+                            value={envVar.name}
+                            onChange={(e) => onUpdateEnvVar(index, 'name', e.target.value)}
+                            className="h-10"
+                        />
+                        <Input
+                            placeholder={t('hostDetails.envVars.value')}
+                            value={envVar.value}
+                            onChange={(e) => onUpdateEnvVar(index, 'value', e.target.value)}
+                            className="h-10"
+                        />
+                    </Card>
+                ))}
+
+                {/* New variable input */}
+                <Card className="p-3 space-y-2 bg-card border-border/80">
+                    <div className="flex items-center justify-between">
+                        <span className="text-xs font-semibold">{t('hostDetails.envVars.newVariable')}</span>
+                        <X size={14} className="text-muted-foreground opacity-0" />
+                    </div>
+                    <Input
+                        placeholder={t('hostDetails.envVars.variableName')}
+                        value={newEnvName}
+                        onChange={(e) => setNewEnvName(e.target.value)}
+                        className="h-10"
+                    />
+                    <Input
+                        placeholder={t('hostDetails.envVars.value')}
+                        value={newEnvValue}
+                        onChange={(e) => setNewEnvValue(e.target.value)}
+                        className="h-10"
+                    />
+                </Card>
+            </AsidePanelContent>
+        </AsidePanel>
+    );
+};
+
+export default EnvVarsPanel;