wip 21

frontend/src/components/LoadingState.tsx

@@ -0,0 +1,26 @@
+import { LoadingIcon } from '../icons';
+import { cn } from '../utils/cn';
+
+interface LoadingStateProps {
+  message?: string;
+  className?: string;
+  iconSize?: number;
+}
+
+export function LoadingState({
+  message = 'Loading...',
+  className = '',
+  iconSize = 24,
+}: LoadingStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-3 text-gray-500 dark:text-gray-400',
+        className,
+      )}
+    >
+      <LoadingIcon size={iconSize} className="text-purple-600 dark:text-purple-400" />
+      <span className="text-sm font-medium">{message}</span>
+    </div>
+  );
+}

frontend/src/components/ReadingHistoryGraph.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { getSVGGraphData } from './ReadingHistoryGraph';
 
-// Test data matching Go test exactly
+// Intentionally exact fixture data for algorithm parity coverage
 const testInput = [
   { date: '2024-01-01', minutes_read: 10 },
   { date: '2024-01-02', minutes_read: 90 },
@@ -23,7 +23,7 @@ describe('ReadingHistoryGraph', () => {
     it('should match exactly', () => {
       const result = getSVGGraphData(testInput, svgWidth, svgHeight);
 
-      // Expected values from Go test
+      // Expected exact algorithm output
       const expectedBezierPath =
         'M 50,95 C63,95 80,50 100,50 C120,50 128,73 150,73 C172,73 180,98 200,98 C220,98 230,95 250,95 C270,95 279,98 300,98 C321,98 330,62 350,62 C370,62 380,67 400,67 C420,67 430,73 450,73 C470,73 489,50 500,50';
       const expectedBezierFill = 'L 500,98 L 50,98 Z';
@@ -37,13 +37,13 @@ describe('ReadingHistoryGraph', () => {
       expect(svgHeight).toBe(expectedHeight);
       expect(result.Offset).toBe(expectedOffset);
 
-      // Verify line points are integers like Go
+      // Verify line points are integer pixel values
       result.LinePoints.forEach((p, _i) => {
         expect(Number.isInteger(p.x)).toBe(true);
         expect(Number.isInteger(p.y)).toBe(true);
       });
 
-      // Expected line points from Go calculation:
+      // Expected line points from the current algorithm:
       // idx 0: itemSize=5, itemY=95, lineX=50
       // idx 1: itemSize=45, itemY=55, lineX=100
       // idx 2: itemSize=25, itemY=75, lineX=150

frontend/src/components/Table.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Table, type Column } from './Table';
+
+interface TestRow {
+  id: string;
+  name: string;
+  role: string;
+}
+
+const columns: Column<TestRow>[] = [
+  {
+    key: 'name',
+    header: 'Name',
+  },
+  {
+    key: 'role',
+    header: 'Role',
+  },
+];
+
+const data: TestRow[] = [
+  { id: 'user-1', name: 'Ada', role: 'Admin' },
+  { id: 'user-2', name: 'Grace', role: 'Reader' },
+];
+
+describe('Table', () => {
+  it('renders a skeleton table while loading', () => {
+    const { container } = render(<Table columns={columns} data={[]} loading />);
+
+    expect(screen.queryByText('No Results')).not.toBeInTheDocument();
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(5);
+  });
+
+  it('renders the empty state message when there is no data', () => {
+    render(<Table columns={columns} data={[]} emptyMessage="Nothing here" />);
+
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  it('uses a custom render function for column output', () => {
+    const customColumns: Column<TestRow>[] = [
+      {
+        key: 'name',
+        header: 'Name',
+        render: (_value, row, index) => `${index + 1}. ${row.name.toUpperCase()}`,
+      },
+    ];
+
+    render(<Table columns={customColumns} data={data} />);
+
+    expect(screen.getByText('1. ADA')).toBeInTheDocument();
+    expect(screen.getByText('2. GRACE')).toBeInTheDocument();
+  });
+
+});

frontend/src/components/index.ts

@@ -17,6 +17,7 @@ export {
   PageLoader,
   InlineLoader,
 } from './Skeleton';
+export { LoadingState } from './LoadingState';
 
 // Field components
 export { Field, FieldLabel, FieldValue, FieldActions } from './Field';