refactor: split CSS and JS into modular files (SRP)

tests/unit/test_static_files.py

@@ -41,8 +41,9 @@ class TestCSSFileServing:
 
     @pytest.mark.asyncio
     async def test_css_contains_expected_variables(self, client):
-        """Test that styles.css contains expected CSS variables."""
-        response = await client.get("/static/css/styles.css")
+        """Test that CSS variables are defined in base/variables.css."""
+        # Variables are now in a separate module file
+        response = await client.get("/static/css/base/variables.css")
         
         assert response.status_code == 200
         content = response.text
@@ -56,22 +57,21 @@ class TestCSSFileServing:
 
     @pytest.mark.asyncio
     async def test_css_contains_dark_theme_support(self, client):
-        """Test that styles.css contains dark theme support."""
-        response = await client.get("/static/css/styles.css")
+        """Test that dark theme support is in base/variables.css."""
+        # Dark theme variables are now in a separate module file
+        response = await client.get("/static/css/base/variables.css")
         
         assert response.status_code == 200
         content = response.text
         
         # Check for dark theme variables
         assert '[data-theme="dark"]' in content
-        assert "--color-bg-primary-dark:" in content
-        assert "--color-text-primary-dark:" in content
 
     @pytest.mark.asyncio
     async def test_css_contains_responsive_design(self, client):
         """Test that CSS files contain responsive design media queries."""
-        # Test styles.css
-        response = await client.get("/static/css/styles.css")
+        # Responsive styles are now in utilities/responsive.css
+        response = await client.get("/static/css/utilities/responsive.css")
         assert response.status_code == 200
         assert "@media" in response.text
 
@@ -195,18 +195,29 @@ class TestCSSContentIntegrity:
 
     @pytest.mark.asyncio
     async def test_styles_css_structure(self, client):
-        """Test that styles.css has proper structure."""
+        """Test that styles.css is a modular entry point with @import statements."""
         response = await client.get("/static/css/styles.css")
         assert response.status_code == 200
         
         content = response.text
         
+        # styles.css is now an entry point with @import statements
+        assert "@import" in content
+        
+        # Check for imports of base, components, pages, and utilities
+        assert 'base/' in content or "base" in content.lower()
+
+    @pytest.mark.asyncio
+    async def test_css_variables_file_structure(self, client):
+        """Test that base/variables.css has proper structure."""
+        response = await client.get("/static/css/base/variables.css")
+        assert response.status_code == 200
+        
+        content = response.text
+        
         # Should have CSS variable definitions
         assert ":root" in content
         
-        # Should have base element styles
-        assert "body" in content or "html" in content
-        
         # Should not have syntax errors (basic check)
         # Count braces - should be balanced
         open_braces = content.count("{")
@@ -229,12 +240,17 @@ class TestCSSContentIntegrity:
     @pytest.mark.asyncio
     async def test_css_file_sizes_reasonable(self, client):
         """Test that CSS files are not empty and have reasonable sizes."""
-        # Test styles.css
+        # Test styles.css (now just @imports, so smaller)
         response = await client.get("/static/css/styles.css")
         assert response.status_code == 200
-        assert len(response.text) > 1000, "styles.css seems too small"
+        assert len(response.text) > 100, "styles.css seems too small"
         assert len(response.text) < 500000, "styles.css seems unusually large"
 
+        # Test variables.css (has actual content)
+        response = await client.get("/static/css/base/variables.css")
+        assert response.status_code == 200
+        assert len(response.text) > 500, "variables.css seems too small"
+
         # Test ux_features.css
         response = await client.get("/static/css/ux_features.css")
         assert response.status_code == 200

tests/unit/test_template_integration.py

@@ -110,13 +110,18 @@ class TestTemplateIntegration:
             assert b"</html>" in content
 
     async def test_templates_load_required_javascript(self, client):
-        """Test that index template loads all required JavaScript files."""
+        """Test that index template loads all required JavaScript modules."""
         response = await client.get("/")
         assert response.status_code == 200
         content = response.content
         
-        # Check for main app.js
-        assert b"/static/js/app.js" in content
+        # Check for modular JS structure (shared modules)
+        assert b"/static/js/shared/constants.js" in content
+        assert b"/static/js/shared/auth.js" in content
+        assert b"/static/js/shared/api-client.js" in content
+        
+        # Check for index-specific modules
+        assert b"/static/js/index/app-init.js" in content
         
         # Check for localization.js
         assert b"/static/js/localization.js" in content
@@ -131,8 +136,8 @@ class TestTemplateIntegration:
         """Test that queue template includes WebSocket support."""
         response = await client.get("/queue")
         assert response.status_code == 200
-        # Check for websocket_client.js implementation
-        assert b"websocket_client.js" in response.content
+        # Check for modular websocket client
+        assert b"/static/js/shared/websocket-client.js" in response.content
 
     async def test_index_includes_search_functionality(self, client):
         """Test that index page includes search functionality."""