fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(search): refresh global search UI and align qa/docs updates

Browse Source
This commit is contained in:
Felix Schneider
2026-04-02 10:49:35 +02:00
parent 5699bc6c5b
commit 5d07236758
35 changed files with 504 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
web/css/components/app-search.css
View File

@@ -30,10 +30,6 @@
gap: 0.5rem;
}
.app-search-dialog-header h2 {
margin: 0;
}
.app-search-dialog-form {
display: flex;
align-items: center;
@@ -66,18 +62,6 @@
border-color: transparent;
}
.app-search-dialog-shortcut {
border: 1px solid var(--app-border);
border-radius: 4px;
background: var(--app-card-background-color);
color: var(--app-muted-color);
font-size: var(--text-xs);
line-height: var(--leading-none);
padding: 0.15rem 0.35rem;
pointer-events: none;
flex-shrink: 0;
}
.app-search-dialog-header .close {
flex-shrink: 0;
}
@@ -107,10 +91,6 @@
margin: 0 0 0.25rem;
}
.app-search-dialog-empty-state small {
display: block;
}
/* ── Results list ────────────────────────────────────────────────────── */
.app-search-dialog-results {
@@ -129,31 +109,20 @@
.app-search-dialog-category-heading {
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--app-muted-color);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: 5px;
padding: 0.25rem 0.75rem;
}
.app-search-dialog-category-heading .bi {
font-size: var(--text-sm);
}
.app-search-dialog-category-count {
margin-left: auto;
font-size: 10px; /* icon-font metric — intentional px */
padding: 1px 4px;
min-width: 18px;
text-align: center;
border-radius: 999px;
background: var(--app-accordion-border-color);
display: inline-flex;
justify-content: center;
align-items: center;
height: 18px;
.app-search-dialog-category-heading::after {
content: '';
flex: 1;
height: 1px;
background: var(--app-border);
}
/* ── Individual result items ─────────────────────────────────────────── */
@@ -162,8 +131,9 @@
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
gap: 2px;
}
.app-search-dialog-item {
@@ -174,14 +144,45 @@
}
.app-search-dialog-item a {
display: block;
display: flex;
align-items: center;
gap: 0.625rem;
color: var(--app-color);
text-decoration: none;
font-size: var(--text-sm);
font-size: var(--text-base);
padding: 0.5rem 0.75rem;
border-radius: var(--app-border-radius);
}
.app-search-dialog-item-icon {
color: var(--app-muted-color);
font-size: var(--text-base);
flex-shrink: 0;
}
.app-search-dialog-item-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.app-search-dialog-item-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: var(--app-border-radius);
}
.app-search-dialog-item-subtitle {
font-size: var(--text-sm);
color: var(--app-muted-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-search-dialog-item mark {
padding: 0;
border-radius: 2px;
}
.app-search-dialog-item:hover,
@@ -193,16 +194,19 @@
color: var(--app-primary);
}
/* ── Category "view all" link ────────────────────────────────────────── */
/* ── "View all" item (last item in category) ─────────────────────────── */
.app-search-dialog-category-view-all {
font-size: var(--text-xs);
color: var(--app-primary);
text-decoration: none;
.app-search-dialog-item-view-all a {
color: var(--app-muted-color);
}
.app-search-dialog-category-view-all:hover {
text-decoration: underline;
.app-search-dialog-item-view-all .app-search-dialog-item-title {
font-size: var(--text-sm);
}
.app-search-dialog-item-view-all:hover a,
.app-search-dialog-item-view-all.app-search-dialog-item-active a {
color: var(--app-primary);
}
/* ── Footer ──────────────────────────────────────────────────────────── */
@@ -223,6 +227,14 @@
text-decoration: underline;
}
.app-search-dialog-footer-hint kbd {
margin-right: 0.15rem;
}
.app-search-dialog-footer-hint kbd:not(:first-child) {
margin-left: 0.5rem;
}
/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {