feat(client): add create/edit environment pages and hoverable cards

- add CreateEnvironmentPage and EditEnvironmentPage with pre-filled form
- add /environments/new and /environments/:id/edit routes
- add Edit option to card context menu and detail page toolbar
- move env id pill to card footer (left), timestamp stays right
- make env cards clickable (navigate to detail); cog stops propagation
- add hoverable Card variant with primary border+shadow on hover
- add link color tokens and global anchor styles for both themes
- fix Timestamp pill visibility in dark mode with border token
- add DescriptionList truncate prop with ellipsis and title tooltip
- stack DescriptionList dd below dt with 8px gap between items
This commit is contained in:
2026-04-09 17:22:01 +03:00
parent 89016b01d2
commit 18177cac52
11 changed files with 397 additions and 16 deletions
+11 -5
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Trash2 } from 'lucide-react';
import { Pencil, Trash2 } from 'lucide-react';
import { environments } from '../api';
import type { Environment } from '../api';
import { Breadcrumbs, Button, Card, DescriptionList, Timestamp } from '../ui';
@@ -40,10 +40,16 @@ export function EnvironmentDetailPage() {
]}
/>
{env && (
<Button variant="danger" size="sm" onClick={handleDelete}>
<Trash2 size={14} />
{t('environments.action_delete')}
</Button>
<div className={styles.toolbarActions}>
<Button variant="secondary" size="sm" onClick={() => navigate(`/environments/${env.id}/edit`)}>
<Pencil size={14} />
{t('environments.action_edit')}
</Button>
<Button variant="danger" size="sm" onClick={handleDelete}>
<Trash2 size={14} />
{t('environments.action_delete')}
</Button>
</div>
)}
</div>