feat: adds fuzzy search in the automation list page#71
Conversation
✅ Deploy Preview for agentscan ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe PR introduces a new minimal layout component, implements search and fuzzy-filter functionality for automations, increases the default layout width constraint, updates the automation list display limit to a configurable constant, and applies the minimal layout to relevant pages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
app/pages/automations.vue (1)
62-67: Give the search field an explicit accessible name and visible focus state.The placeholder should not be the only label for this control, and
focus:outline-noneleaves only a subtle border-color change for keyboard users.Proposed refinement
<input v-model="search" type="text" + aria-label="Search verified automations by username" placeholder="Search by username..." - class="mt-12 w-full px-3 py-2 bg-gh-bg border border-gh-border rounded text-sm text-gh-text placeholder:text-gh-muted focus:outline-none focus:border-gh-border/80" + class="mt-12 w-full px-3 py-2 bg-gh-bg border border-gh-border rounded text-sm text-gh-text placeholder:text-gh-muted focus:outline-none focus:border-gh-border/80 focus-visible:ring-2 focus-visible:ring-gh-border/60" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/pages/automations.vue` around lines 62 - 67, The search input currently uses placeholder text and removes visible focus with focus:outline-none; update the input in automations.vue (the element with v-model="search") to include an explicit accessible name (add an aria-label like aria-label="Search by username" or associate a visible <label> for the input) and restore a clear keyboard focus indicator by removing focus:outline-none and adding a visible focus class (e.g. focus:ring or focus-visible:ring or a stronger focus:border class) so keyboard users can both identify and see focus on the control.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/composables/useVerifiedAutomations.ts`:
- Around line 4-6: The current useVerifiedAutomations composable calls
useAsyncData eagerly, which blocks SSR while /api/verified-automations resolves;
change it to lazy loading by passing { lazy: true } to useAsyncData (or make it
accept an options param to toggle eager vs lazy) so consumers can fetch on
client hydration instead of during SSR, and update any components that assume
data is immediately present (e.g., CardError.vue and Analysis/Card.vue) to
handle undefined data or check pending.value before dereferencing; locate
useVerifiedAutomations and the useAsyncData call to implement the change and add
the options flag if route-specific eager fetching is needed.
In `@app/layouts/minimal.vue`:
- Around line 5-11: Replace the direct call to $router.back() in the back button
with a small handler (e.g., handleGoBack or goBack) that checks
window.history.length > 1 and calls $router.back() only when true, otherwise
falls back to a safe navigation like $router.push('/') or $router.push({ name:
'home' }); update the button to call that handler instead of $router.back() so
direct visits or external referrers don't navigate unpredictably.
In `@app/pages/automations.vue`:
- Around line 22-25: The computed filteredItems uses search.value.trim() to
decide early-return but still calls fuzzySearch with the untrimmed search.value;
change filteredItems to capture the trimmed query (e.g., const q =
search.value.trim()) and use that trimmed q in the items.value.filter call
(fuzzySearch(q, item.username)) so queries with surrounding whitespace like "
octocat " will match correctly.
---
Nitpick comments:
In `@app/pages/automations.vue`:
- Around line 62-67: The search input currently uses placeholder text and
removes visible focus with focus:outline-none; update the input in
automations.vue (the element with v-model="search") to include an explicit
accessible name (add an aria-label like aria-label="Search by username" or
associate a visible <label> for the input) and restore a clear keyboard focus
indicator by removing focus:outline-none and adding a visible focus class (e.g.
focus:ring or focus-visible:ring or a stronger focus:border class) so keyboard
users can both identify and see focus on the control.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d1a16ff1-9854-492a-8e18-d0c859800811
📒 Files selected for processing (6)
app/components/Verified/AutomationList.vueapp/composables/useVerifiedAutomations.tsapp/layouts/default.vueapp/layouts/minimal.vueapp/pages/automations.vueapp/pages/privacy-policy.vue
| <button | ||
| @click="$router.back()" | ||
| class="text-gh-muted hover:text-gh-text transition-colors flex items-center gap-2" | ||
| > | ||
| <span class="text-lg i-carbon:arrow-left"></span> | ||
| Go back | ||
| </button> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check if the file exists and review its content
cat -n app/layouts/minimal.vueRepository: MatteoGabriele/agentscan
Length of output: 575
🏁 Script executed:
# Check the framework and dependencies
head -30 package.jsonRepository: MatteoGabriele/agentscan
Length of output: 846
🏁 Script executed:
# Look for nuxt.config or other framework configuration
ls -la | grep -E "(nuxt|vue|tsconfig)" | head -20Repository: MatteoGabriele/agentscan
Length of output: 200
🏁 Script executed:
# Search for router.back() usage patterns
rg "router\.back\(\)" --type vue --type ts --type jsRepository: MatteoGabriele/agentscan
Length of output: 95
🏁 Script executed:
# Search for navigateTo usage (Nuxt pattern)
rg "navigateTo" --type vue --type ts --type jsRepository: MatteoGabriele/agentscan
Length of output: 95
🏁 Script executed:
# Search for useRouter usage
rg "useRouter" --type vue --type ts --type jsRepository: MatteoGabriele/agentscan
Length of output: 95
🏁 Script executed:
# Search for history.state checks
rg "history\.state" --type vue --type ts --type jsRepository: MatteoGabriele/agentscan
Length of output: 95
🏁 Script executed:
# Search for any router or navigation related middleware/composables
fd -e ts -e js -e vue | xargs grep -l "navigation\|router" | head -20Repository: MatteoGabriele/agentscan
Length of output: 137
🏁 Script executed:
# Search for router.back() usage
rg "router\.back\(\)" -g "*.vue" -g "*.ts" -g "*.js"Repository: MatteoGabriele/agentscan
Length of output: 121
🏁 Script executed:
# Search for navigateTo usage (Nuxt pattern)
rg "navigateTo" -g "*.vue" -g "*.ts" -g "*.js"Repository: MatteoGabriele/agentscan
Length of output: 50
🏁 Script executed:
# Search for useRouter usage
rg "useRouter" -g "*.vue" -g "*.ts" -g "*.js"Repository: MatteoGabriele/agentscan
Length of output: 169
🏁 Script executed:
# Search for history.state or back entry checks
rg "history\.state|history\.back" -g "*.vue" -g "*.ts" -g "*.js"Repository: MatteoGabriele/agentscan
Length of output: 50
🏁 Script executed:
# Check app structure
tree -L 3 app/ 2>/dev/null || find app -maxdepth 3 -type f | head -40Repository: MatteoGabriele/agentscan
Length of output: 728
🏁 Script executed:
# Search for layout references
rg "definePageMeta.*minimal|layout.*minimal" -g "*.vue"Repository: MatteoGabriele/agentscan
Length of output: 164
🏁 Script executed:
# Check the pages that likely use minimal layout
cat -n app/pages/automations.vueRepository: MatteoGabriele/agentscan
Length of output: 5109
🏁 Script executed:
# Check privacy-policy page
cat -n app/pages/privacy-policy.vueRepository: MatteoGabriele/agentscan
Length of output: 4444
🏁 Script executed:
# Check default layout to compare
cat -n app/layouts/default.vueRepository: MatteoGabriele/agentscan
Length of output: 1948
🏁 Script executed:
# Check for any middleware or app-level navigation patterns
find app -name "*.ts" -o -name "*.js" | xargs grep -l "router\|navigate" 2>/dev/null | head -20Repository: MatteoGabriele/agentscan
Length of output: 50
🏁 Script executed:
# Check if there are any plugins related to router
ls -la app/plugins 2>/dev/null || echo "No plugins directory found"Repository: MatteoGabriele/agentscan
Length of output: 94
🏁 Script executed:
# Check nuxt.config to see router setup
cat -n nuxt.config.tsRepository: MatteoGabriele/agentscan
Length of output: 2103
🏁 Script executed:
# Verify if composables use useRouter in specific ways
cat -n app/pages/index.vue | head -50Repository: MatteoGabriele/agentscan
Length of output: 477
🏁 Script executed:
# Search for any window.history usage
rg "window\.history|history\.length|history\.back" -g "*.vue" -g "*.ts" -g "*.js"Repository: MatteoGabriele/agentscan
Length of output: 50
🏁 Script executed:
# Check if router.push is used as fallback pattern elsewhere
rg "router\.push" -g "*.vue" -g "*.ts" -g "*.js" -A 2Repository: MatteoGabriele/agentscan
Length of output: 341
🏁 Script executed:
# Check index.vue to understand the home page route
cat -n app/pages/index.vueRepository: MatteoGabriele/agentscan
Length of output: 477
Use a more reliable check for back navigation fallback.
Direct visits to /automations or /privacy-policy have no back history. When router.back() is called on a direct visit, it either does nothing or navigates to an external site (if the user came from external search). Add a fallback to navigate to home when there is no back entry available.
For the history check, use window.history.length > 1 instead of window.history.state?.back, which is more reliable and standard across browsers.
Proposed fix
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const router = useRouter();
+
+const goBack = () => {
+ if (window.history.length > 1) {
+ router.back();
+ return;
+ }
+
+ navigateTo("/");
+};
+</script>
<template>
<div class="mx-auto max-w-2xl p-6 pb-12 w-full">
<button
- `@click`="$router.back()"
+ type="button"
+ `@click`="goBack"
class="text-gh-muted hover:text-gh-text transition-colors flex items-center gap-2"
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/layouts/minimal.vue` around lines 5 - 11, Replace the direct call to
$router.back() in the back button with a small handler (e.g., handleGoBack or
goBack) that checks window.history.length > 1 and calls $router.back() only when
true, otherwise falls back to a safe navigation like $router.push('/') or
$router.push({ name: 'home' }); update the button to call that handler instead
of $router.back() so direct visits or external referrers don't navigate
unpredictably.
1 participant
We are getting more and more clankers, so perhaps a small search box could help.
Summary by CodeRabbit
Release Notes
New Features
Style