[Init] Initial commit - NetMesh terminal manager

components/systemManager/DockerManagerTab.tsx

@@ -0,0 +1,89 @@
+import { Box, Layers } from 'lucide-react';
+import React, { memo, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import type { useSystemManagerBackend } from '../../application/state/useSystemManagerBackend';
+import type { TerminalSession } from '../../types';
+import { cn } from '../../lib/utils';
+import { DockerContainersPanel } from './DockerContainersPanel';
+import { DockerImagesPanel } from './DockerImagesPanel';
+import { SystemPanelShell } from './SystemPanelUi';
+
+type Backend = ReturnType<typeof useSystemManagerBackend>;
+type DockerSubTab = 'containers' | 'images';
+
+interface DockerManagerTabProps {
+  sessionId: string;
+  parentSession: TerminalSession;
+  isVisible: boolean;
+  warmupEnabled?: boolean;
+  backend: Backend;
+  listRefreshIntervalSec: number;
+  statsRefreshIntervalSec: number;
+  targetOs?: 'linux' | 'darwin' | 'win32' | 'unknown';
+}
+
+export const DockerManagerTab = memo(function DockerManagerTab({
+  sessionId,
+  parentSession,
+  isVisible,
+  warmupEnabled = false,
+  backend,
+  listRefreshIntervalSec,
+  statsRefreshIntervalSec,
+  targetOs = 'unknown',
+}: DockerManagerTabProps) {
+  const { t } = useI18n();
+  const [subTab, setSubTab] = useState<DockerSubTab>('containers');
+
+  const tabs: { id: DockerSubTab; icon: typeof Box; label: string }[] = [
+    { id: 'containers', icon: Box, label: t('systemManager.docker.subTabs.containers') },
+    { id: 'images', icon: Layers, label: t('systemManager.docker.subTabs.images') },
+  ];
+
+  return (
+    <SystemPanelShell section="system-manager-docker">
+      <div className="shrink-0 flex items-center gap-0.5 px-2 py-1 border-b border-border/30">
+        {tabs.map(({ id, icon: Icon, label }) => (
+          <button
+            key={id}
+            type="button"
+            className={cn(
+              'flex items-center gap-1.5 px-2.5 py-0.5 rounded-md text-[11px] transition-all duration-200',
+              subTab === id
+                ? 'bg-primary/15 text-primary font-medium shadow-sm'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+            )}
+            onClick={() => setSubTab(id)}
+          >
+            <Icon size={12} />
+            {label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-1 min-h-0 flex flex-col">
+        <div className={cn('flex-1 min-h-0 flex flex-col', subTab !== 'containers' && 'hidden')}>
+          <DockerContainersPanel
+            sessionId={sessionId}
+            parentSession={parentSession}
+            isVisible={isVisible && subTab === 'containers'}
+            warmupEnabled={warmupEnabled || (isVisible && subTab !== 'containers')}
+            backend={backend}
+            listRefreshIntervalSec={listRefreshIntervalSec}
+            statsRefreshIntervalSec={statsRefreshIntervalSec}
+            targetOs={targetOs}
+          />
+        </div>
+        <div className={cn('flex-1 min-h-0 flex flex-col', subTab !== 'images' && 'hidden')}>
+          <DockerImagesPanel
+            sessionId={sessionId}
+            isVisible={isVisible && subTab === 'images'}
+            warmupEnabled={warmupEnabled || (isVisible && subTab !== 'images')}
+            backend={backend}
+            listRefreshIntervalSec={listRefreshIntervalSec}
+          />
+        </div>
+      </div>
+    </SystemPanelShell>
+  );
+});