feat: review app and plan visual improvements

tests/e2e/test_auth.py

@@ -0,0 +1,103 @@
+"""E2E tests for authentication functionality."""
+
+import pytest
+from playwright.async_api import BrowserContext, Page, expect
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_login_success(context: BrowserContext, page: Page, server_lifecycle):
+    """Test successful login flow."""
+    await page.goto("/")
+
+    # Should redirect to login page
+    await expect(page).to_have_url("/login")
+    await expect(page).to_have_title("Login")
+
+    # Fill in credentials
+    await page.fill("input[name='email']", "[email protected]")
+    await page.fill("input[name='password']", "secure123")
+
+    # Submit login form
+    await page.click("button[type='submit']")
+
+    # Should redirect to yaks page after successful login
+    await expect(page).to_have_url("/yaks")
+    await expect(page.locator("h1")).to_contain_text("Yaks")
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_login_failure_wrong_password(context: BrowserContext, page: Page, server_lifecycle):
+    """Test login failure with wrong password."""
+    await page.goto("/login")
+
+    # Fill in credentials with wrong password
+    await page.fill("input[name='email']", "[email protected]")
+    await page.fill("input[name='password']", "wrongpassword")
+
+    # Submit login form
+    await page.click("button[type='submit']")
+
+    # Should stay on login page and show error
+    await expect(page).to_have_url("/login")
+    error_message = page.locator(".alert, .error, [role='alert']")
+    await expect(error_message).to_be_visible()
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_login_failure_nonexistent_user(context: BrowserContext, page: Page, server_lifecycle):
+    """Test login failure with nonexistent user."""
+    await page.goto("/login")
+
+    # Fill in credentials for nonexistent user
+    await page.fill("input[name='email']", "[email protected]")
+    await page.fill("input[name='password']", "anypassword")
+
+    # Submit login form
+    await page.click("button[type='submit']")
+
+    # Should stay on login page and show error
+    await expect(page).to_have_url("/login")
+    error_message = page.locator(".alert, .error, [role='alert']")
+    await expect(error_message).to_be_visible()
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_redirect_to_login_when_not_authenticated(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that unauthenticated users are redirected to login."""
+    # Try to access protected pages without logging in
+    protected_urls = ["/yaks", "/edit?yak=test.dj", "/search", "/new"]
+
+    for url in protected_urls:
+        await page.goto(url)
+        # Should redirect to login
+        await expect(page).to_have_url("/login", timeout=3000)
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_session_persistence(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that session persists across page loads."""
+    # Login
+    await page.goto("/login")
+    await page.fill("input[name='email']", "[email protected]")
+    await page.fill("input[name='password']", "secure123")
+    await page.click("button[type='submit']")
+    await expect(page).to_have_url("/yaks")
+
+    # Navigate to different pages
+    await page.goto("/search")
+    await expect(page).to_have_url("/search")
+
+    await page.goto("/yaks")
+    await expect(page).to_have_url("/yaks")
+
+    # Reload page
+    await page.reload()
+    await expect(page).to_have_url("/yaks")
+
+    # Should still be authenticated
+    await expect(page.locator("h1")).to_contain_text("Yaks")

tests/e2e/test_new.py

@@ -0,0 +1,110 @@
+"""E2E tests for new yak creation functionality."""
+
+import pytest
+from playwright.async_api import BrowserContext, Page, expect
+
+from tests.conftest import MOCK_YAK_DIR
+
+from ._helpers import login
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_new_yak_page_loads(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that the new yak page loads correctly."""
+    await login(context, page)
+
+    await page.goto("/new")
+
+    # Check page title
+    await expect(page).to_have_title("New Yak")
+
+    # Check form elements are present
+    await expect(page.locator("h1")).to_contain_text("Create New Yak")
+    await expect(page.locator("#category_select")).to_be_visible()
+    await expect(page.locator("#new_category")).to_be_visible()
+    await expect(page.locator("button[type='submit']")).to_be_visible()
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_create_new_yak_with_existing_category(context: BrowserContext, page: Page, server_lifecycle):
+    """Test creating a new yak with an existing category."""
+    await login(context, page)
+
+    await page.goto("/new")
+
+    # Select an existing category (if available)
+    category_options = await page.locator("#category_select option").all()
+    if len(category_options) > 1:  # More than just the placeholder
+        # Select the first real category
+        await page.select_option("#category_select", index=1)
+
+        # Submit form
+        await page.click("button[type='submit']")
+
+        # Should redirect to edit page
+        await expect(page).to_have_url(/\/edit\?yak=.*/)
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_create_new_yak_with_new_category(context: BrowserContext, page: Page, server_lifecycle):
+    """Test creating a new yak with a new category."""
+    await login(context, page)
+
+    await page.goto("/new")
+
+    # Enter a new category name
+    test_category = "test-e2e-category"
+    await page.fill("#new_category", test_category)
+
+    # Submit form
+    await page.click("button[type='submit']")
+
+    # Should redirect to edit page
+    await expect(page).to_have_url(/\/edit\?yak=.*/)
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_new_yak_cancel_navigation(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that cancel button navigates back to yaks page."""
+    await login(context, page)
+
+    await page.goto("/new")
+
+    # Click cancel
+    cancel_button = page.locator("a:has-text('Cancel')")
+    await cancel_button.click()
+
+    # Should navigate to yaks page
+    await expect(page).to_have_url("/yaks")
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_new_yak_from_navigation(context: BrowserContext, page: Page, server_lifecycle):
+    """Test navigating to new yak page from main navigation."""
+    await login(context, page)
+
+    await page.goto("/yaks")
+
+    # Click "New" in navigation
+    new_link = page.locator("a.nav__link:has-text('New')")
+    await new_link.click()
+
+    # Should navigate to new page
+    await expect(page).to_have_url("/new")
+    await expect(page).to_have_title("New Yak")
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_new_yak_requires_authentication(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that new yak page requires authentication."""
+    # Try to access without logging in
+    await page.goto("/new")
+
+    # Should redirect to login
+    await expect(page).to_have_url("/login")

tests/e2e/test_search.py

@@ -4,7 +4,6 @@
 from ._helpers import login
 
 
-@pytest.mark.skip
 @pytest.mark.playwright
 @pytest.mark.asyncio
 async def test_search_with_query(context: BrowserContext, page: Page, server_lifecycle, console_messages):
@@ -73,7 +72,6 @@ async def test_search_with_query(context: BrowserContext, page: Page, server_lif
     assert len(new_preview_text.strip()) > 0, "Preview should still contain content after second navigation"
 
 
-@pytest.mark.skip
 @pytest.mark.playwright
 @pytest.mark.asyncio
 async def test_search_modal_on_small_screen(context: BrowserContext, page: Page, server_lifecycle, console_messages):

tests/e2e/test_yaks.py

@@ -28,3 +28,108 @@ async def test_yaks_page_loads(context: BrowserContext, page: Page, server_lifec
 
     content = await page.content()
     assert "Yaks" in content
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_yaks_sorting_by_name(context: BrowserContext, page: Page, server_lifecycle):
+    """Test sorting yaks by name."""
+    await login(context, page)
+
+    await page.goto("/yaks")
+
+    # Click sort by name button
+    sort_by_name = page.locator("a:has-text('Name (Created At)')")
+    await sort_by_name.click()
+
+    # Check URL contains sort parameter
+    await page.wait_for_url("**/yaks?sort_by=name")
+
+    # Verify the button is marked as active
+    from playwright.async_api import expect
+
+    await expect(sort_by_name).to_have_class(/button--primary/)
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_yaks_sorting_by_modified_date(context: BrowserContext, page: Page, server_lifecycle):
+    """Test sorting yaks by modified date."""
+    await login(context, page)
+
+    await page.goto("/yaks")
+
+    # Click sort by modified date button
+    sort_by_modified = page.locator("a:has-text('Modified Date')")
+    await sort_by_modified.click()
+
+    # Check URL contains sort parameter
+    await page.wait_for_url("**/yaks?sort_by=modified_date")
+
+    # Verify the button is marked as active
+    from playwright.async_api import expect
+
+    await expect(sort_by_modified).to_have_class(/button--primary/)
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_yaks_card_navigation(context: BrowserContext, page: Page, server_lifecycle):
+    """Test clicking on a yak card navigates to edit page."""
+    await login(context, page)
+
+    await page.goto("/yaks")
+
+    # Click on first yak card
+    first_card = page.locator(".card").first
+    await first_card.click()
+
+    # Should navigate to edit page
+    from playwright.async_api import expect
+
+    await expect(page).to_have_url(/\/edit\?yak=.*/)
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_yaks_displays_cards(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that yak cards are displayed."""
+    await login(context, page)
+
+    await page.goto("/yaks")
+
+    # Check that cards are present
+    cards = page.locator(".card")
+    from playwright.async_api import expect
+
+    await expect(cards.first).to_be_visible()
+
+    # Check that cards have content
+    card_body = page.locator(".card__body").first
+    await expect(card_body).to_be_visible()
+
+
+@pytest.mark.playwright
+@pytest.mark.asyncio
+async def test_yaks_responsive_layout(context: BrowserContext, page: Page, server_lifecycle):
+    """Test that yaks page is responsive on different screen sizes."""
+    await login(context, page)
+
+    # Test on mobile
+    await page.set_viewport_size({"width": 375, "height": 667})
+    await page.goto("/yaks")
+
+    cards_container = page.locator(".cards")
+    from playwright.async_api import expect
+
+    await expect(cards_container).to_be_visible()
+
+    # Test on tablet
+    await page.set_viewport_size({"width": 768, "height": 1024})
+    await page.goto("/yaks")
+    await expect(cards_container).to_be_visible()
+
+    # Test on desktop
+    await page.set_viewport_size({"width": 1920, "height": 1080})
+    await page.goto("/yaks")
+    await expect(cards_container).to_be_visible()

yak_shears/_templates/__init__.py

@@ -49,7 +49,9 @@ class SearchResult:
 
 
 def get_category_color(category: str) -> str:
-    """Get a unique color for a category based on its name.
+    """Get a subtle, muted color for a category based on its name.
+
+    Returns a Scandinavian-style muted color with low saturation for minimal design.
 
     Returns:
         A CSS color string.
@@ -58,7 +60,8 @@ def get_category_color(category: str) -> str:
         return "#d9d4cc"  # default border color
     # Use sum of ords for stable hash-like value
     hue = sum(ord(c) for c in category) % 360
-    return f"hsl({hue}, 70%, 50%)"
+    # Use subtle, muted colors with low saturation for Scandinavian minimalism
+    return f"hsl({hue}, 20%, 75%)"
 
 
 def _render_template(template_name: str, *, status_code: HTTPStatus = HTTPStatus.OK, **context: Any) -> HTMLResponse:

yak_shears/_templates/auth/login.html.jinja

@@ -4,20 +4,20 @@
 
 {% block content %}
   <h1>Login</h1>
-  <form class="login-form" method="post" action="/auth/login">
+  <form class="login-form" method="post" action="/auth/login" aria-label="Login form">
     {% if redirect %}
       <input type="hidden" name="redirect" value="{{ redirect }}">
     {% endif %}
     <div class="login-form__group">
       <label class="login-form__label" for="email">Email</label>
-      <input class="login-form__control" type="email" id="email" name="email" required>
+      <input class="login-form__control" type="email" id="email" name="email" required autocomplete="email" aria-required="true">
     </div>
     <div class="login-form__group">
       <label class="login-form__label" for="password">Password</label>
-      <input class="login-form__control" type="password" id="password" name="password" required>
+      <input class="login-form__control" type="password" id="password" name="password" required autocomplete="current-password" aria-required="true">
     </div>
     {% if error %}
-      <div class="alert alert--warn">
+      <div class="alert alert--warn" role="alert" aria-live="polite">
         <strong>Error:</strong> {{ error }}
       </div>
     {% endif %}