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
2026-04-09 00:11:55 +03:00
parent 5cc16725fb
commit 9916ef5aaf
47 changed files with 3910 additions and 10 deletions
@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from 'react';
+import { sessions } from '../api';
+import type { Session } from '../api';
+import { Badge, Button, Table, type TableColumn } from '../ui';
+import styles from './Page.module.css';
+
+export function SessionsPage() {
+  const [items, setItems] = useState<Session[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    sessions.list()
+      .then((res) => setItems(res.data))
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(load, [load]);
+
+  const handleDelete = async (id: number) => {
+    await sessions.remove(id);
+    load();
+  };
+
+  const columns: TableColumn<Session>[] = [
+    { key: 'id',      header: 'ID',       render: (s) => s.id,          width: 60 },
+    { key: 'name',    header: 'Name',     render: (s) => s.sessionName },
+    {
+      key: 'status',
+      header: 'Status',
+      width: 100,
+      render: (s) => (
+        <Badge variant={s.status === 'open' ? 'success' : 'neutral'}>
+          {s.status}
+        </Badge>
+      ),
+    },
+    {
+      key: 'lastUsed',
+      header: 'Last Used',
+      width: 160,
+      render: (s) => s.lastUsedAt ? new Date(s.lastUsedAt).toLocaleString() : '—',
+    },
+    {
+      key: 'actions',
+      header: '',
+      width: 80,
+      align: 'right',
+      render: (s) => (
+        <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
+          Delete
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <h1 className={styles.heading}>Sessions</h1>
+      {error && <p className={styles.error}>{error}</p>}
+      <Table
+        columns={columns}
+        data={items}
+        rowKey={(s) => s.id}
+        loading={loading}
+        emptyMessage="No sessions yet."
+      />
+    </div>
+  );
+}