Merge pull request #1627 from PR0M3TH3AN/ai/onboarding-20241025-6817543098205599361

docs(ai): improve onboarding steps and fix lint

CONTRIBUTING.md

@@ -132,6 +132,10 @@ For a full guide, see the [Local Setup section in README.md](./README.md#local-s
   npx update-browserslist-db@latest
   ```
 
+- **Unit Test Hangs**: `npm run test:unit` may occasionally hang after completion due to open handles. If this happens, use `Ctrl+C` to exit. For CI or faster local runs, consider running specific shards (e.g., `npm run test:unit:shard1`).
+
+- **Linting Failures**: `npm run lint` includes checks for inline styles (e.g., `style="..."` or `.style.prop = ...`). Move these styles to CSS classes or design tokens to pass linting.
+
 ## Dev Container
 
 This project includes a `.devcontainer` configuration for VS Code. It provides a pre-configured environment with Node.js 22 and necessary extensions.

css/tailwind.source.css

@@ -492,7 +492,7 @@
 
   @media (min-width: theme("screens.md")) {
     .search-filters-panel.is-advanced-open {
-      width: 40rem;
+      width: var(--size-40rem);
     }
   }
 

css/tokens.css

@@ -321,6 +321,7 @@
   --size-20rem: 20rem;
   --size-28rem: 28rem;
   --size-34rem: 34rem;
+  --size-40rem: 40rem;
   --size-45rem: 45rem;
   --size-70rem: 70rem;
 

js/ui/components/SearchFilterModal.js

@@ -168,10 +168,10 @@ function toggleAdvanced(forceState = null) {
 
   if (newState) {
     advancedPanel.classList.remove("hidden");
-    advancedChevron.style.transform = "rotate(180deg)";
+    advancedChevron.classList.add("rotate-180");
   } else {
     advancedPanel.classList.add("hidden");
-    advancedChevron.style.transform = "rotate(0deg)";
+    advancedChevron.classList.remove("rotate-180");
   }
 }