[Product Homepage Design] Implementation - #156
Open
yetone wants to merge 38 commits into
Open
Conversation
added 30 commits
May 25, 2026 03:37
- Create full React + TypeScript frontend project structure - Implement HeroSection component with logo, tagline, CTA, and external links - Add unit tests covering REQ-1 (logo/tagline) and REQ-10 (GitHub/docs links) - Create shared types, API client, and utility constants - Add .gitignore entries for node_modules and dist
- Add Playwright E2E tests for hero section visibility, logo, tagline, CTA button, and external links - Configure Playwright with Chromium browser and dev server - Install @playwright/test dependency - Update .gitignore to exclude node_modules and test-results
- Implement FeaturesSection with 6 implemented feature cards - Add PlannedFeatures section with Raft consensus roadmap item - Include inline SVG icons, prominent styling for Memcached Protocol - Add Coming Soon badge for planned features - Ensure keyboard focusability and ARIA accessibility - Add comprehensive unit tests covering REQ-8 and REQ-9
- ConnectionStatus component with color-coded states (green/yellow/red) - useConnection hook for polling /api/health endpoint - ARIA labels for screen reader accessibility - Unit tests covering all connection states and polling behavior
- Add KVExplorer component with key input, Get button, and result display - Support loading states, validation errors, and not-found messages - Update KVOperationRequest type to use 'op' field matching API spec - Update KVOperationResponse with status/value/message format - Add 23 unit tests covering happy path, error handling, and edge cases - Add 7 E2E tests for browser-based KV Explorer interactions - Exclude e2e tests from vitest config to avoid playwright conflict
- Implement LSMTreeVisualization component with SVG rendering - Show memtable, immutable memtable, and SSTable levels - Display file counts and key counts per level - Add hover tooltips with detailed info (size, compaction status) - Use colorblind-safe patterns (stripes, dots, crosshatch, etc.) - Add comprehensive unit tests (32 tests, all passing) Covers REQ-5: LSM Tree Visualization
Add KVSetPanel component for storing key-value pairs via the MirDB API. Includes form validation, loading states, success/error feedback, and support for flags and expiration time. Covers REQ-7 (write operations) for the Key-Value Explorer.
…and tooltips - Create SystemOverview component displaying server config - Show listen address, max LSM levels, work directory, SSTable size, memtable size - Add interactive tooltips on hover for each config value - Add 31 comprehensive unit and integration tests - Include component in App.tsx homepage layout - Add vite-env.d.ts for proper Vite type support
…dcls-cd93f73' into feature/product-homepage-design-dcls-cd93f73
…lization into App - Add API integration tests for getLSMState() endpoint - Add re-rendering tests simulating memtable flush and compaction - Add e2e tests for LSM tree visualization section - Integrate LSMTreeVisualization into App.tsx with demo state
…dcls-cd93f73' into feature/product-homepage-design-dcls-cd93f73
…ponent Add KVExplorer export alongside existing KVSetPanel in the kv-explorer index barrel file. Both scenarios 8 (GET) and 9 (SET) share this folder.
- MetricsDashboard component displaying 4 key metrics - MetricCard sub-component with smooth transitions - useMetrics hook polling /api/metrics every 2 seconds - Format helpers for keys, disk, latency, and compactions - Responsive grid layout (1/2/4 columns) - Loading and error states with retry - Unit and integration tests
Align KVSetPanel and its tests with the shared KVOperationRequest/ KVOperationResponse types (op/status fields). Fixes TypeScript compilation errors where 'operation' and 'success' were used instead of 'op' and 'status'.
…dcls-cd93f73' into feature/product-homepage-design-dcls-cd93f73
- Add KVDeletePanel component for individual key deletion - Add KVFlushPanel component with confirmation dialog for flush_all - Update shared types to include 'deleted' response status - Add comprehensive unit tests covering happy path, error handling, loading states, validation, and accessibility
…dcls-cd93f73' into feature/product-homepage-design-dcls-cd93f73
- Add KVDeletePanel component for key deletion and flush_all operations - Update shared types to include 'deleted' status in KVOperationResponse - Add deleteKey and flushAll helpers to API client - Implement confirmation dialog for destructive flush_all action - Add comprehensive unit tests covering delete, not_found, error, flush_all with confirmation, and cross-operation loading states - Follow existing component patterns from KVExplorer and KVSetPanel
- Align aria-label with remote test expectations - Use DELETED as default success message - Call onDeleteError fallback for not_found when onDeleteNotFound absent - Update tests to match backward-compatible behavior
…uick try Implements REQ-3 and REQ-14: - InteractiveDemo component with command input and output terminal - Command parser supporting set, get, delete, flush_all operations - Memcached protocol-style responses (STORED, END, DELETED, OK, ERROR) - Keyboard shortcuts: Enter to execute, Ctrl+L to clear history - Error handling with helpful hints for invalid commands - Connection error messages when server is unavailable - Quick Try mode allowing users to test operations without installation Sub-components: - CommandInput: text input with execute button and command hints - OutputTerminal: scrollable terminal displaying command history Tests: 58 unit/integration tests covering all 5 scenario test cases
- Add ThemeContext with light/dark theme state management - Add ThemeToggle component with sun/moon SVG icons - Integrate ThemeProvider into App.tsx with header placement - Add flash-of-light-theme prevention inline script in index.html - Add 43 comprehensive unit/integration tests for theme system
…LETE and FLUSH Operations"
…dcls-cd93f73' into feature/product-homepage-design-dcls-cd93f73
…LETE and FLUSH Operations"
added 8 commits
May 25, 2026 04:41
…dcls-cd93f73' into feature/product-homepage-design-dcls-cd93f73
Add Playwright E2E tests covering: - Interactive demo section rendering and accessibility - Set/get/delete command execution with mocked API - Command history preservation - Invalid command handling with error hints - Ctrl+L keyboard shortcut for clearing output - Connection error handling when server is unavailable Covers REQ-3 and REQ-14.
- Add Layout, Header, Container components with mobile hamburger menu - Add comprehensive responsive CSS with breakpoints for mobile/tablet/desktop - Add 19 Playwright e2e tests covering desktop, tablet, mobile viewports - Add 16 Vitest unit tests for layout components - Ensure minimum 44x44px touch targets for mobile accessibility - Update App.tsx to use Layout wrapper with sticky header and footer - Fix theme integration tests for new layout structure
- Add http_adapter.rs with synchronous HTTP server - Add http_handlers.rs for config and health endpoint logic - Add http_routes.rs for request routing and CORS handling - Add integration tests for all HTTP API endpoints - Create lib.rs to support integration test imports - Update dependencies: serde_json, rand 0.8 - Fix skip-list and parser macro compilation on Rust 1.95
…etry logic Implements NFR-4 (graceful degradation) with: - ErrorBoundary component for catching React render errors - ErrorMessage and RetryButton components for user-friendly error UI - Structured API error classes (NetworkError, TimeoutError, ServerError, etc.) - Fetch timeout via AbortController and retry logic for network failures - Backward-compatible error messages preserving existing test expectations - Comprehensive unit and integration tests
- Add POST /api/operation handler supporting set, get, delete, flush_all - Integrate with existing HttpServer from Scenario 14 by adding Store support - Add FlushAll request variant and store-level flush_all implementation - Add data_manager, WAL, sstable_reader, and manifest clear methods - Add 9 integration tests covering all operations and error cases - Update Scenario 14 tests to use new HttpServer constructor with Store
- Add E2E performance tests (page load, animation timing) - Add E2E keyboard navigation and accessibility audit tests - Add E2E theme transition timing tests - Add unit tests for ARIA attributes and reduced motion - Add focus-visible styles for keyboard users - Add skip link for keyboard navigation bypass - Add prefers-reduced-motion CSS media query - Add Escape key handler to close mobile navigation - Pass id prop through Container component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements the requirements for Product Homepage Design.
Generated by Something