feat(client): add UI kit, data layer, app shell, and Table component

- design token system (Atlantis, Kimberly, Powder Ash palette)
- Button, Badge, Input, Select, Card, SidePanel, Breadcrumbs components
- generic typed Table<T> component with loading/empty states
- API data layer: typed fetch client for environments, keys, sessions, scenarios
- Vite dev proxy targeting server on port 13000
- App shell with SidePanel nav and four entity pages (Environments, Keys, Sessions, Scenarios)
- Storybook config with dark/light theme toggle and a11y addon
This commit is contained in:
2026-04-09 00:11:55 +03:00
parent 5cc16725fb
commit 9916ef5aaf
47 changed files with 3910 additions and 10 deletions
+57
View File
@@ -0,0 +1,57 @@
.shell {
display: flex;
height: 100vh;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family);
overflow: hidden;
}
.brand {
font-weight: 700;
font-size: 1rem;
color: var(--color-primary);
letter-spacing: 0.02em;
}
.nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-2) 0;
}
.navItem {
display: block;
width: 100%;
padding: var(--space-2) var(--space-3);
background: none;
border: none;
border-radius: var(--radius-md);
color: var(--color-text);
font-size: var(--font-size-sm);
font-family: var(--font-family);
text-align: left;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.navItem:hover {
background: var(--color-bg-subtle);
}
.navItemActive {
background: var(--color-secondary);
color: var(--color-secondary-fg);
font-weight: 600;
}
.navItemActive:hover {
background: var(--color-secondary-hover);
}
.main {
flex: 1;
overflow-y: auto;
padding: var(--space-6);
}