[Init] Initial commit - NetMesh terminal manager

components/snippets/SnippetTargetsSection.tsx

@@ -0,0 +1,199 @@
+import { FolderTree, Server } from 'lucide-react';
+import React from 'react';
+import { DistroAvatar } from '../DistroAvatar';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { hostDisplayTitle } from '@/domain/hostDisplay.ts';
+import { cn } from '@/lib/utils';
+import type { Host } from '@/domain/models';
+
+export interface SnippetTargetsSectionProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  targetHosts: Host[];
+  onEditTargets: () => void;
+  targetGroups?: string[];
+  onEditGroups?: () => void;
+  hint?: string;
+  variant?: 'card' | 'embedded';
+  targetsAllHosts?: boolean;
+  onTargetsAllHostsChange?: (checked: boolean) => void;
+}
+
+const actionButtonClass = (embedded: boolean) => cn(
+  'shrink-0 rounded-md transition-colors',
+  embedded ? 'h-6 px-2 text-[11px]' : 'h-6 px-2 text-xs',
+);
+
+const TargetsBody: React.FC<{
+  t: SnippetTargetsSectionProps['t'];
+  targetHosts: Host[];
+  onEditTargets: () => void;
+  targetGroups?: string[];
+  onEditGroups?: () => void;
+  hint?: string;
+  embedded?: boolean;
+  targetsAllHosts?: boolean;
+  onTargetsAllHostsChange?: (checked: boolean) => void;
+}> = ({
+  t,
+  targetHosts,
+  onEditTargets,
+  targetGroups = [],
+  onEditGroups,
+  hint,
+  embedded = false,
+  targetsAllHosts = false,
+  onTargetsAllHostsChange,
+}) => (
+  <>
+    <div className="flex items-center justify-between gap-3">
+      <p className={cn(
+        'font-semibold text-muted-foreground shrink-0',
+        embedded ? 'text-[11px]' : 'text-xs',
+      )}
+      >
+        {t('snippets.targets.title')}
+      </p>
+
+      <div className="flex items-center gap-1 min-w-0">
+        {!targetsAllHosts ? (
+          <>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(actionButtonClass(embedded), 'text-primary gap-1')}
+              onClick={onEditTargets}
+            >
+              <Server size={12} />
+              {t('snippets.targets.selectHosts')}
+            </Button>
+            {onEditGroups ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(actionButtonClass(embedded), 'text-primary gap-1')}
+                onClick={onEditGroups}
+              >
+                <FolderTree size={12} />
+                {t('snippets.targets.selectGroups')}
+              </Button>
+            ) : null}
+          </>
+        ) : null}
+
+        {onTargetsAllHostsChange ? (
+          <button
+            type="button"
+            aria-pressed={targetsAllHosts}
+            aria-label={t('snippets.targets.allHosts')}
+            className={cn(
+              actionButtonClass(embedded),
+              targetsAllHosts
+                ? 'bg-muted text-foreground font-medium'
+                : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+            )}
+            onClick={() => onTargetsAllHostsChange(!targetsAllHosts)}
+          >
+            {t('snippets.targets.allHostsShort')}
+          </button>
+        ) : null}
+      </div>
+    </div>
+
+    {hint && !targetsAllHosts ? (
+      <p className="text-[11px] text-muted-foreground leading-relaxed">{hint}</p>
+    ) : null}
+
+    {targetsAllHosts ? (
+      <p className={cn(
+        'text-muted-foreground/80',
+        embedded ? 'text-[10px]' : 'text-[11px]',
+      )}
+      >
+        {t('snippets.targets.allHostsActive')}
+      </p>
+    ) : targetHosts.length === 0 && targetGroups.length === 0 ? (
+      embedded ? null : (
+        <Button
+          variant="secondary"
+          className="w-full h-10"
+          onClick={onEditTargets}
+        >
+          {t('snippets.targets.add')}
+        </Button>
+      )
+    ) : (
+      <div className={cn('gap-2', embedded ? 'flex flex-wrap' : 'space-y-2')}>
+        {targetGroups.map((groupPath) => (
+          <div
+            key={`group:${groupPath}`}
+            className={cn(
+              'flex items-center gap-2 rounded-lg border border-border/60 bg-primary/5 max-w-full',
+              embedded ? 'px-2 py-1.5 text-xs' : 'px-3 py-2 text-sm',
+            )}
+          >
+            <FolderTree size={14} className="text-primary shrink-0" />
+            <span className="truncate font-medium">{groupPath}</span>
+          </div>
+        ))}
+        {targetHosts.map((host) => (
+          embedded ? (
+            <div
+              key={host.id}
+              className="flex items-center gap-2 px-2 py-1.5 rounded-lg border border-border/60 bg-background/60 text-xs max-w-full"
+            >
+              <DistroAvatar host={host} fallback={host.os[0].toUpperCase()} size="sm" />
+              <span className="truncate font-medium">{hostDisplayTitle(host)}</span>
+            </div>
+          ) : (
+            <div
+              key={host.id}
+              className="flex items-center gap-3 px-3 py-2 bg-background/60 border border-border/70 rounded-lg"
+            >
+              <DistroAvatar host={host} fallback={host.os[0].toUpperCase()} size="log" />
+              <div className="min-w-0 flex-1 text-sm font-semibold truncate">
+                {hostDisplayTitle(host)}
+              </div>
+            </div>
+          )
+        ))}
+      </div>
+    )}
+  </>
+);
+
+export const SnippetTargetsSection: React.FC<SnippetTargetsSectionProps> = ({
+  t,
+  targetHosts,
+  onEditTargets,
+  targetGroups,
+  onEditGroups,
+  hint,
+  variant = 'card',
+  targetsAllHosts,
+  onTargetsAllHostsChange,
+}) => {
+  const body = (
+    <TargetsBody
+      t={t}
+      targetHosts={targetHosts}
+      onEditTargets={onEditTargets}
+      targetGroups={targetGroups}
+      onEditGroups={onEditGroups}
+      hint={hint}
+      embedded={variant === 'embedded'}
+      targetsAllHosts={targetsAllHosts}
+      onTargetsAllHostsChange={onTargetsAllHostsChange}
+    />
+  );
+
+  if (variant === 'embedded') {
+    return <div className="space-y-2">{body}</div>;
+  }
+
+  return (
+    <Card className="p-3 space-y-3 bg-card border-border/80">
+      {body}
+    </Card>
+  );
+};