josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remember recent searches on-device and show them under the search box

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-29 22:08:16 +08:00
parent b6fdff2438
commit 6480b314d5
3 changed files with 137 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/styles.css
View File

@@ -273,7 +273,70 @@ body::after {
background: linear-gradient(180deg, rgba(16,16,19,0.7), transparent);
backdrop-filter: blur(8px);
}
.search-form { flex: 1; display: flex; gap: 10px; max-width: 760px; }
.search-form { flex: 1; display: flex; gap: 10px; max-width: 760px; position: relative; }
/* Recent-searches dropdown — device-local, kept in localStorage (RecentSearches in app.js) */
.search-recent {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 60;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5);
padding: 6px;
max-height: 320px;
overflow-y: auto;
}
.search-recent.hidden { display: none; }
.search-recent-row {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
color: var(--text-2);
font-size: 13px;
font-family: var(--ui);
}
.search-recent-row:hover, .search-recent-row:focus-visible { background: var(--bg-3); color: var(--text); }
.search-recent-row .sr-icon { flex-shrink: 0; opacity: 0.55; font-size: 12px; }
.search-recent-row .sr-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-recent-row .sr-remove {
flex-shrink: 0;
background: none;
border: none;
color: var(--text-dim);
font-size: 15px;
line-height: 1;
cursor: pointer;
padding: 3px 6px;
border-radius: 6px;
}
.search-recent-row .sr-remove:hover { color: #fff; background: var(--accent); }
.search-recent-clear {
display: block;
width: 100%;
text-align: center;
background: none;
border: none;
border-top: 1px solid var(--line-soft);
color: var(--text-dim);
font-family: var(--ui);
font-size: 12px;
padding: 8px 6px 4px;
margin-top: 4px;
cursor: pointer;
}
.search-recent-clear:hover { color: var(--text); }
/* Hamburger toggle — hidden on desktop, revealed in the mobile breakpoint */
.sidebar-toggle {