feat: Improve UI layout and navigation

- Increase logo size (48x48 desktop, 56x56 mobile) for better visibility
- Add logo as favicon
- Add logo to mobile header
- Move user menu to navigation bars (sidebar on desktop, bottom bar on mobile)
- Fix desktop chat layout - container structure prevents voice controls cutoff
- Fix mobile bottom bar - use icon-only ActionIcons instead of truncated text buttons
- Hide Create Node/New Conversation buttons on mobile to save header space
- Make fixed header and voice controls work properly with containers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-09 14:43:11 +00:00
parent 47b35b9caf
commit 0ed2d6c0b3
57 changed files with 6996 additions and 629 deletions

77
tests/helpers/README.md Normal file
View File

@@ -0,0 +1,77 @@
# Playwright Test Helpers
This directory contains reusable helper functions for both Magnitude tests and Playwright MCP testing.
## Usage
### In Magnitude Tests
```typescript
import { test } from 'magnitude-test';
import {
navigateToApp,
loginWithBluesky,
startConversation,
createNodeDraft,
publishNode,
completeNodePublishFlow,
} from '../helpers/playwright-helpers';
test('User can publish a node', async (agent) => {
const page = agent.page; // Get Playwright page from Magnitude agent
await completeNodePublishFlow(page, 'My test conversation');
await agent.check('Node published successfully');
});
```
### In Playwright MCP
Use the helper functions directly with the Playwright MCP page instance:
```typescript
import { loginWithBluesky, startConversation } from './tests/helpers/playwright-helpers';
// In your MCP session
await loginWithBluesky(page);
await startConversation(page, 'Hello AI');
```
## Available Helpers
### Authentication
- `loginWithBluesky(page, credentials?)` - Complete OAuth login flow
- `logout(page)` - Logout from application
- `isLoggedIn(page)` - Check if user is authenticated
### Navigation
- `navigateToApp(page, baseUrl?)` - Go to app home page
### Conversation
- `startConversation(page, message)` - Send first message in chat
- `waitForAIResponse(page, timeout?)` - Wait for AI to finish responding
### Node Publishing
- `createNodeDraft(page)` - Click "Create Node" button
- `editNodeDraft(page, title?, content?)` - Modify draft before publishing
- `publishNode(page)` - Click "Publish" and wait for success
- `completeNodePublishFlow(page, message?, credentials?)` - Full end-to-end flow
## Environment Variables
Set these in your `.env.test` file:
```env
TEST_BLUESKY_USERNAME=your-test-user.bsky.social
TEST_BLUESKY_PASSWORD=your-test-password
```
If not set, helpers will use default values (which will fail for real OAuth).
## Design Principles
1. **Reusability** - Each helper is atomic and can be composed
2. **Reliability** - Helpers wait for network and UI state before proceeding
3. **Flexibility** - Optional parameters allow customization
4. **Error Handling** - Helpers throw clear errors when expectations aren't met