feat(Templates): add search functionality for user templates #901
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdds a templates search input to the templates tab UI, a debounced input handler wired from Changes
Sequence DiagramsequenceDiagram
participant User
participant Input as Search Input
participant Debounce as Debounce Logic
participant Templates as `#templates-user`
participant Listener as Filter Handler
User->>Input: types query
Input->>Debounce: oninput events
Note over Debounce: 150ms debounce window
Debounce->>Templates: trigger filter (calls setup handler / emits event)
Templates->>Listener: dispatch/filter templates list
Listener->>Templates: show/hide matched items
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/livecodes/html/templates.html(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: Redirect rules - livecodes
- GitHub Check: Header rules - livecodes
- GitHub Check: Pages changed - livecodes
🔇 Additional comments (1)
src/livecodes/html/templates.html (1)
36-55: Script logic is sound; confirm filtering implementation is planned.The inline script correctly debounces input (150ms), emits a
templates:filtercustom event with the query value, and uses defensive null checks. The implementation is event-driven as intended, allowing other scripts to listen and filter templates accordingly.Since this is described as a demo PR pending actual filtering logic, verify that:
- Event listeners consuming the
templates:filterevent will be implemented separately.- The event dispatch to
#templates-containeraligns with where filter listeners will be attached.
hatemhosny
left a comment
hatemhosny
left a comment
There was a problem hiding this comment.
Thank you @a0m0rajab
I have added some comments.
src/livecodes/html/templates.html
Outdated
| </div> | ||
|
|
||
| <!-- Inline: emit a "templates:filter" event with the current query so other scripts can perform filtering --> | ||
| <script> |
There was a problem hiding this comment.
You can move the logic to src/livecodes/UI/templates.ts.
Think of the html here as the "view" while the logic in templates.ts as the "controller" in MVC pattern.
Also if you do that, you can directly manipulate DOM elements e.g. add display: none; without having to emit events.
src/livecodes/html/templates.html
Outdated
| var val = e.target.value || ''; | ||
| // debounce to avoid excessive events while typing | ||
| clearTimeout(timeout); | ||
| timeout = setTimeout(function () { emit(val.trim()); }, 150); |
There was a problem hiding this comment.
There is a debounce function here that you can re-use.
src/livecodes/html/templates.html
Outdated
| </li> | ||
| <li class="templates-search"> | ||
| <label for="templates-search-input" class="visually-hidden" data-i18n="templates.search.label">Search templates</label> | ||
| <input id="templates-search-input" type="search" placeholder="Filter languages..." aria-label="Filter templates by language" /> |
There was a problem hiding this comment.
Let's change "Filter languages..." to "Search templates...". And then we can search by title, languages and others (e.g. tags).
Also, after you finish your edits, please run npm run i18n-export to regenerate the i18n json and fix this build error.
|
Thank you @DevAbdelrahmanSayed |
|
Hi, thanks for mentioning me in the comments! I’d love to work on and finish this, but I might not be able to get to it before the weekend. Just a general note, it’s usually nice to check in with the PR contributor first before escalating to the maintainers. It tends to come across as more polite and professional. If the contributor doesn’t respond for a while and the PR becomes stale, then escalating to the maintainers would make sense. |
|
Salam @a0m0rajab 👋 If you do not have enough time to finish this, do you mind other contributors to continue the work you have started? Much appreciated. |
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/livecodes/UI/templates.ts`:
- Around line 66-87: Call setupTemplatesSearch() after the templates UI is
mounted so the '#templates-search-input' listener is attached and can filter
'#templates-user' items; specifically, add a call to setupTemplatesSearch() at
the end of handleNew() when the modal opens (or immediately after
loadUserTemplates() finishes rendering items) to ensure the search input is
wired up to the filtering logic in setupTemplatesSearch.
| export const setupTemplatesSearch = () => { | ||
| const input = document.getElementById('templates-search-input') as HTMLInputElement | null; | ||
| if (!input) return; | ||
|
|
||
| const filterTemplates = (query: string) => { | ||
| const items = document.querySelectorAll('#templates-user li'); | ||
| items.forEach((item) => { | ||
| const text = item.textContent?.toLowerCase() || ''; | ||
| const matches = text.includes(query.toLowerCase()); | ||
| (item as HTMLElement).style.display = matches ? '' : 'none'; | ||
| }); | ||
| }; | ||
|
|
||
| const debouncedFilter = debounce((val: string) => { | ||
| filterTemplates(val.trim()); | ||
| }, 150); | ||
|
|
||
| input.addEventListener('input', (e: Event) => { | ||
| const val = (e.target as HTMLInputElement).value || ''; | ||
| debouncedFilter(val); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n "setupTemplatesSearch"
rg -n "loadUserTemplates"
rg -n "templates-user"Repository: live-codes/livecodes
Length of output: 1051
🏁 Script executed:
#!/bin/bash
# Search for where setupTemplatesSearch might be called
rg -n "setupTemplates" --type ts --type js
# Check if it's exported from templates.ts and used elsewhere
rg -n "from.*templates"
# Look for dynamic function calls
rg -n "setupTemplates\|setupTemplatesSearch" -A 2 -B 2Repository: live-codes/livecodes
Length of output: 1026
🏁 Script executed:
#!/bin/bash
wc -l src/livecodes/UI/templates.ts
head -100 src/livecodes/UI/templates.tsRepository: live-codes/livecodes
Length of output: 2899
🏁 Script executed:
#!/bin/bash
# Get context around createTemplatesContainer usage in core.ts
rg -n "createTemplatesContainer" -A 10 -B 5 src/livecodes/core.ts
# Search for any initialization that might call setupTemplatesSearch
rg -n "templatesContainer\|setupTemplatesSearch" src/livecodes/core.ts -A 2 -B 2Repository: live-codes/livecodes
Length of output: 1184
🏁 Script executed:
#!/bin/bash
# Get more context around loadUserTemplates in core.ts
sed -n '3153,3200p' src/livecodes/core.ts
# Also check if setupTemplatesSearch is imported anywhere
rg -n "import.*setupTemplatesSearch\|setupTemplatesSearch" src/livecodes/Repository: live-codes/livecodes
Length of output: 1483
🏁 Script executed:
#!/bin/bash
# Get more lines from loadUserTemplates
sed -n '3153,3230p' src/livecodes/core.ts
# Check if there's anything about search-input setup
rg -n "templates-search-input" src/livecodes/Repository: live-codes/livecodes
Length of output: 2972
🏁 Script executed:
#!/bin/bash
# Check if there are any tests or examples
rg -n "setupTemplatesSearch" -r . --type ts --type js --type json
# Look for similar setup patterns that ARE called
rg -n "export const setup" src/livecodes/UI/ -A 1
# Check if there's a pattern of calling exported setup functions
rg -n "setup.*\(\)" src/livecodes/core.ts | head -20Repository: live-codes/livecodes
Length of output: 516
🏁 Script executed:
#!/bin/bash
# Check if setupTemplatesSearch was perhaps supposed to be called in handleNew or nearby
sed -n '3149,3160p' src/livecodes/core.ts
# See if there's any initialization after templates container is created
rg -n "templatesContainer\|setupTemplates" src/livecodes/core.ts -A 5
# Check if the function is perhaps exported but unused (dead code)
git -C /repo log --oneline -20 --all -- src/livecodes/UI/templates.ts 2>/dev/null || echo "Git history not available"Repository: live-codes/livecodes
Length of output: 651
setupTemplatesSearch() is exported but never called—search functionality is not integrated.
The setupTemplatesSearch() function exists in templates.ts but is not invoked anywhere in the codebase. The search input element (#templates-search-input) is rendered in the template, but the event listener that filters #templates-user list items is never attached. Add a call to setupTemplatesSearch() after the templates container and search input are mounted (likely within or after handleNew() when the modal opens, or after loadUserTemplates() completes rendering items).
🤖 Prompt for AI Agents
In `@src/livecodes/UI/templates.ts` around lines 66 - 87, Call
setupTemplatesSearch() after the templates UI is mounted so the
'#templates-search-input' listener is attached and can filter '#templates-user'
items; specifically, add a call to setupTemplatesSearch() at the end of
handleNew() when the modal opens (or immediately after loadUserTemplates()
finishes rendering items) to ensure the search input is wired up to the
filtering logic in setupTemplatesSearch.
2 participants
(This is a demo PR, will check the functionality later today)
This pull request enhances the templates UI by adding a search input for filtering templates by language and introduces an event-driven mechanism for template filtering. The main changes are grouped below:
UI Enhancements:
<input id="templates-search-input" ...>) to the templates navigation, allowing users to filter templates by language.Event-Driven Filtering:
templates:filtercustom event with the current query. This enables other scripts to react and perform the actual filtering logic.What type of PR is this? (check all applicable)
Description
Related Tickets & Documents
Fixes #900
This pull request adds a search/filter feature to the templates section in the
templates.htmlfile, allowing users to filter templates by language. It introduces a search input UI and emits a custom event to enable template filtering functionality.User interface improvements:
<input id="templates-search-input" ...>) to the templates navigation for filtering templates by language.Interactivity and event handling:
templates:filtercustom event with the current query to enable live filtering of templates.Mobile & Desktop Screenshots/Recordings
Added tests?
Added to documentations?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.