feat(snippets): add snippets entity, crud, and auto-browser-per-run

- add Snippet entity with name, description, code; full CRUD backend - add snippets pages (list, create, edit, detail) and nav entry - add runSnippet helper in code-executor using new Function with args array - add result param to execute() so validateCode can access exec output - remove sessionName from steps; each run now spawns its own fresh browser - fix waitForURL race by polling localStorage for token instead
2026-04-10 00:22:51 +03:00
parent 1efbbb38a3
commit 1164289173
26 changed files with 876 additions and 89 deletions
@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Code, Pencil, Trash2, Plus } from 'lucide-react';
+import { snippets } from '../../api';
+import type { Snippet } from '../../api';
+import { Breadcrumbs, Button, Card, ContextMenu, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
+
+function SnippetCard({
+  snippet,
+  onDelete,
+}: {
+  snippet: Snippet;
+  onDelete: (id: number) => void;
+}) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const header = (
+    <div className={styles.envCardHeader}>
+      <span className={styles.envCardName}>{snippet.name}</span>
+      <div onClick={(e) => e.stopPropagation()}>
+        <ContextMenu
+          align="right"
+          trigger={
+            <Button variant="ghost" size="sm" aria-label={t('snippets.menu_label')}>
+              <Code size={14} />
+            </Button>
+          }
+          items={[
+            {
+              label: t('snippets.action_edit'),
+              icon: <Pencil size={14} />,
+              onClick: () => navigate(`/snippets/${snippet.id}/edit`),
+            },
+            {
+              label: t('snippets.action_delete'),
+              icon: <Trash2 size={14} />,
+              variant: 'danger',
+              onClick: () => onDelete(snippet.id),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+
+  const footer = (
+    <div className={styles.envCardFooter}>
+      <span className={styles.envCardId}>#{snippet.id}</span>
+      <Timestamp value={snippet.updatedAt} />
+    </div>
+  );
+
+  return (
+    <Card
+      className={styles.envCard}
+      header={header}
+      headerVariant="primary"
+      footer={footer}
+      onClick={() => navigate(`/snippets/${snippet.id}`)}
+    >
+      {snippet.description && (
+        <p className={styles.muted}>{snippet.description}</p>
+      )}
+    </Card>
+  );
+}
+
+function AddSnippetCard() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    <div className={styles.envCardAdd}>
+      <Button variant="ghost" onClick={() => navigate('/snippets/new')}>
+        <Plus size={16} />
+        {t('snippets.action_add')}
+      </Button>
+    </div>
+  );
+}
+
+export function SnippetsPage() {
+  const { t } = useTranslation();
+  const [items, setItems] = useState<Snippet[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = () => {
+    snippets
+      .list()
+      .then((res) => setItems(res.data))
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const handleDelete = async (id: number) => {
+    await snippets.remove(id);
+    load();
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs items={[{ label: t('snippets.title') }]} />
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+      {loading && <p className={styles.muted}>{t('snippets.loading')}</p>}
+
+      {!loading && (
+        <div className={styles.envGrid}>
+          {items.map((s) => (
+            <SnippetCard key={s.id} snippet={s} onDelete={handleDelete} />
+          ))}
+          {items.length === 0 && (
+            <p className={styles.muted}>{t('snippets.empty')}</p>
+          )}
+          <AddSnippetCard />
+        </div>
+      )}
+    </div>
+  );
+}