feat(ui): add breadcrumb icons, fix alignment, and remove duplicate form headers

- add section icons to all breadcrumbs across every page
- fix breadcrumb nav display:flex so icons align vertically with buttons
- wrap all page breadcrumbs in pageToolbar div for consistent layout
- add Breadcrumbs to AllRunsPage which previously used a plain h1
- fix envCardHeader flex:1 so settings button hugs the right edge
- remove card header from environment create/edit forms (duplicated breadcrumb)
This commit is contained in:
2026-04-10 19:58:33 +03:00
parent de0cbeef7c
commit 99da7ac891
37 changed files with 224 additions and 84 deletions
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { KeyRound, X, Save } from 'lucide-react';
import { credentials } from '../../api';
import type { Credential } from '../../api';
import { Breadcrumbs, Button, Card, Input, CodeEditor } from '../../ui';
@@ -69,7 +70,7 @@ export function EditCredentialPage() {
<div className={styles.pageToolbar}>
<Breadcrumbs
items={[
{ label: t('credentials.title'), onClick: () => navigate('/credentials') },
{ label: t('credentials.title'), icon: <KeyRound size={14} />, onClick: () => navigate('/credentials') },
{
label: credential?.name ?? `#${id}`,
onClick: () => navigate(`/credentials/${id}`),
@@ -123,9 +124,11 @@ export function EditCredentialPage() {
variant="secondary"
onClick={() => navigate(`/credentials/${id}`)}
>
<X size={14} />
{t('credentials.action_cancel')}
</Button>
<Button type="submit" loading={saving}>
<Save size={14} />
{t('credentials.action_update')}
</Button>
</div>