Skip to content

feat(Templates): add search functionality for user templates #901

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(Templates): add search functionality for user templates #901

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/livecodes/html/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
<li>
<a href="#" data-target="templates-user" data-i18n="templates.user.heading">My Templates</a>
</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" />
Copy link
Collaborator

@hatemhosny hatemhosny Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

</li>
Comment on lines +13 to +16
Copy link

@coderabbitai coderabbitai bot Oct 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Move search input out of the tab list for proper semantic structure.

Placing the search input as an <li> inside the tab navigation list violates WAI-ARIA tab patterns. The tab list (<ul class="modal-tabs">) contains tab controls, not search fields. Screen readers will incorrectly announce this as a tab item rather than a search field, degrading accessibility.

Recommend restructuring to place the search input in a dedicated container outside the tab list (e.g., above or below the tabs, or in a separate section).

Consider restructuring like this:

    <ul id="templates-tabs" class="modal-tabs">
      <li class="active">
        <a href="#" data-target="templates-starter" data-i18n="templates.starter.heading">
          Starter Templates
        </a>
      </li>
      <li>
        <a href="#" data-target="templates-user" data-i18n="templates.user.heading">My Templates</a>
      </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" />
-     </li>
    </ul>
+   <div class="templates-search-container">
+     <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" />
+   </div>

Adjust CSS styling as needed to position the search container appropriately within the templates modal layout.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/livecodes/html/templates.html around lines 13 to 16, the search input is
currently an <li> inside the tab list which breaks WAI-ARIA tab semantics; move
the search input out of the <ul class="modal-tabs"> into its own container (for
example a <div class="templates-search">) placed immediately before or after the
tab list, keep the existing label, input id, placeholder and aria-label intact,
and remove the <li> wrapper; finally update/adjust CSS selectors to position the
new .templates-search container as needed within the templates modal layout so
visual placement remains unchanged.

Copy link
Collaborator

@hatemhosny hatemhosny Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the search input should not be added as a new tab, since it affects the other tabs. The suggestion by CodeRabbit AI is reasonable.

Copy link

@coderabbitai coderabbitai bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hatemhosny Thank you for confirming! Moving the search input outside the tab list will maintain proper semantic structure and ensure the tabs remain independent of the filtering functionality. The suggested refactoring will improve both accessibility and the overall architecture of the component.

</ul>

<div id="templates-starter" class="tab-content active">
Expand All @@ -28,3 +32,24 @@
</div>
</div>
</div>

<!-- Inline: emit a "templates:filter" event with the current query so other scripts can perform filtering -->
<script>
Copy link
Collaborator

@hatemhosny hatemhosny Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

(function () {
var input = document.getElementById('templates-search-input');
if (!input) return;

var emit = function (value) {
var ev = new CustomEvent('templates:filter', { detail: { query: value } });
document.getElementById('templates-container').dispatchEvent(ev);
};

var timeout = null;
input.addEventListener('input', function (e) {
var val = e.target.value || '';
// debounce to avoid excessive events while typing
clearTimeout(timeout);
timeout = setTimeout(function () { emit(val.trim()); }, 150);
Copy link
Collaborator

@hatemhosny hatemhosny Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a debounce function here that you can re-use.

});
})();
</script>
Loading