lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-23 05:36:12 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Add search bar to My Apps tab

Browse Source
This commit is contained in:
jelveh
2026-03-26 16:31:08 -07:00
parent 5eddd0949f
commit 5c913fc359
2 changed files with 91 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Dashboard/TabApps.js
+45
View File
@@ -54,6 +54,11 @@ const TabApps = {
html () {
let h = '<div class="dashboard-tab-content myapps-tab">';
h += '<div class="myapps-search-wrap">';
h += '<svg class="myapps-search-icon myapps-icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>';
h += '<svg class="myapps-search-icon myapps-icon-clear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
h += '<input type="text" class="myapps-search" placeholder="Search apps..." autocomplete="off" spellcheck="false">';
h += '</div>';
h += '<div class="myapps-container">';
h += '<div class="myapps-loading">Loading apps...</div>';
h += '</div>';
@@ -64,6 +69,46 @@ const TabApps = {
init ($el_window) {
this.loadApps($el_window);
const self = this;
// Toggle search/clear icons and filter
function updateSearch ($input) {
const query = $input.val().toLowerCase().trim();
const hasText = query.length > 0;
$el_window.find('.myapps-icon-search').toggle(!hasText);
$el_window.find('.myapps-icon-clear').toggle(hasText);
if ( ! self._apps ) return;
if ( ! query ) {
$el_window.find('.myapps-container').html(buildAppsGrid(self._apps));
return;
}
const filtered = self._apps.filter(app => {
const title = (app.title || '').toLowerCase();
const name = (app.name || '').toLowerCase();
return title.includes(query) || name.includes(query);
});
$el_window.find('.myapps-container').html(
filtered.length > 0
? buildAppsGrid(filtered)
: '<div class="myapps-empty"><p>No apps match your search</p></div>',
);
}
$el_window.on('input', '.myapps-search', function () {
updateSearch($(this));
});
// Clear search on cross click
$el_window.on('click', '.myapps-icon-clear', function () {
const $input = $el_window.find('.myapps-search');
$input.val('').focus();
updateSearch($input);
});
// Handle app tile clicks
$el_window.on('click', '.myapps-tile', function (e) {
e.preventDefault();
src/gui/src/css/dashboard.css
+46 -5
View File
@@ -440,11 +440,52 @@ body {
padding: 32px 40px;
}
.myapps-tab h2 {
font-size: 26px;
font-weight: 700;
color: var(--dashboard-text-heading);
margin: 0 0 24px 0;
.myapps-search-wrap {
position: relative;
margin-bottom: 24px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.myapps-search-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--dashboard-text-tertiary);
pointer-events: none;
}
.myapps-icon-clear {
pointer-events: auto;
cursor: pointer;
}
.myapps-icon-clear:hover {
color: var(--dashboard-text-primary);
}
.myapps-search {
width: 100%;
padding: 8px 36px 8px 12px;
font-size: 14px;
border: 1px solid var(--dashboard-border);
border-radius: 8px;
background: var(--dashboard-input-background);
color: var(--dashboard-text-primary);
outline: none;
transition: border-color 0.15s;
}
.myapps-search:focus {
border-color: var(--select-color);
}
.myapps-search::placeholder {
color: var(--dashboard-text-muted);
}
.myapps-container {