[Init] Initial commit - NetMesh terminal manager

components/SnippetsPackageDialogs.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SnippetsPackageDialogsProps = Record<string, any>;
+
+export const SnippetsPackageDialogs: React.FC<SnippetsPackageDialogsProps> = ({
+  isPackageDialogOpen,
+  t,
+  selectedPackage,
+  newPackageName,
+  setNewPackageName,
+  createPackage,
+  setIsPackageDialogOpen,
+  isRenameDialogOpen,
+  renamingPackagePath,
+  renamePackageName,
+  setRenamePackageName,
+  setRenameError,
+  renamePackage,
+  renameError,
+  setIsRenameDialogOpen,
+}) => (
+  <>
+      {/* New Package Inline Form */}
+      {isPackageDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <Card className="w-full max-w-sm p-4 space-y-4">
+            <div>
+              <p className="text-sm font-semibold">{t('snippets.packageDialog.title')}</p>
+              <p className="text-xs text-muted-foreground">{t('snippets.packageDialog.parent', { parent: selectedPackage || t('snippets.packageDialog.root') })}</p>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('field.name')}</Label>
+              <Input
+                autoFocus
+                placeholder={t('snippets.packageDialog.placeholder')}
+                value={newPackageName}
+                onChange={(e) => setNewPackageName(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && createPackage()}
+              />
+              <p className="text-[11px] text-muted-foreground">{t('snippets.packageDialog.hint')}</p>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => setIsPackageDialogOpen(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button onClick={createPackage}>{t('common.create')}</Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Rename Package Dialog */}
+      {isRenameDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <Card className="w-full max-w-sm p-4 space-y-4">
+            <div>
+              <p className="text-sm font-semibold">{t('snippets.renameDialog.title')}</p>
+              <p className="text-xs text-muted-foreground">{t('snippets.renameDialog.currentPath', { path: renamingPackagePath })}</p>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('field.name')}</Label>
+              <Input
+                autoFocus
+                placeholder={t('snippets.renameDialog.placeholder')}
+                value={renamePackageName}
+                onChange={(e) => {
+                  setRenamePackageName(e.target.value);
+                  setRenameError('');
+                }}
+                onKeyDown={(e) => e.key === 'Enter' && renamePackage()}
+              />
+              {renameError && (
+                <p className="text-[11px] text-destructive">{renameError}</p>
+              )}
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => setIsRenameDialogOpen(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button onClick={renamePackage}>{t('common.rename')}</Button>
+            </div>
+          </Card>
+        </div>
+      )}
+  </>
+);