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

39
web/css/base/variables.base.css
View File

@@ -57,18 +57,18 @@
--app-blockquote-background-color: var(
--app-form-element-active-background-color
);
--list-tabs-border: var(--app-border);
--list-tabs-active: var(--app-primary);
--list-tabs-muted: var(--app-muted-color);
--tabs-border: var(--app-border);
--tabs-active: var(--app-primary);
--tabs-muted: var(--app-muted-color);
--tooltip-bg: var(--app-card-background-color);
--tooltip-color: var(--app-color);
--tooltip-border: var(--app-border);
--tooltip-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
--tooltip-radius: 8px;
--tooltip-offset: 8px;
--app-list-tabs-border: var(--app-border);
--app-list-tabs-active: var(--app-primary);
--app-list-tabs-muted: var(--app-muted-color);
--app-tabs-border: var(--app-border);
--app-tabs-active: var(--app-primary);
--app-tabs-muted: var(--app-muted-color);
--app-tooltip-bg: var(--app-card-background-color);
--app-tooltip-color: var(--app-color);
--app-tooltip-border: var(--app-border);
--app-tooltip-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
--app-tooltip-radius: 8px;
--app-tooltip-offset: 8px;
--app-badge-background-color: coral;
--app-empty-border-color: var(--app-muted-border-color);
--app-empty-bg: var(--app-card-background-color);
@@ -239,6 +239,7 @@
--app-form-element-active-border-color: var(--app-primary-border);
--app-form-element-focus-color: var(--app-primary-border);
--app-form-element-disabled-opacity: 0.5;
--app-form-element-disabled-background-color: #f0f2f5;
--app-form-element-readonly-background-color: #f4f7fb;
--app-form-element-readonly-border-color: #d6deea;
--app-form-element-readonly-color: #2f3440;
@@ -248,6 +249,8 @@
--app-form-element-invalid-focus-color: var(
--app-form-element-invalid-active-border-color
);
--app-form-element-invalid-active-shadow: 0 0 0 var(--app-outline-width)
var(--app-form-element-invalid-focus-color);
--app-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--app-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--app-form-element-valid-focus-color: var(
@@ -306,8 +309,6 @@
--app-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--app-progress-background-color: #dfe3eb;
--app-progress-color: var(--app-primary-background);
--app-tooltip-background-color: var(--app-contrast-background);
--app-tooltip-color: var(--app-contrast-inverse);
--app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
@@ -499,6 +500,7 @@
--app-form-element-active-border-color: var(--app-primary-border);
--app-form-element-focus-color: var(--app-primary-border);
--app-form-element-disabled-opacity: 0.5;
--app-form-element-disabled-background-color: #1e2430;
--app-form-element-readonly-background-color: #242c3a;
--app-form-element-readonly-border-color: #3a4458;
--app-form-element-readonly-color: #d7dde8;
@@ -508,6 +510,8 @@
--app-form-element-invalid-focus-color: var(
--app-form-element-invalid-active-border-color
);
--app-form-element-invalid-active-shadow: 0 0 0 var(--app-outline-width)
var(--app-form-element-invalid-focus-color);
--app-form-element-valid-border-color: #2a7b6f;
--app-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--app-form-element-valid-focus-color: var(
@@ -554,8 +558,6 @@
--app-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--app-progress-background-color: #202632;
--app-progress-color: var(--app-primary-background);
--app-tooltip-background-color: var(--app-contrast-background);
--app-tooltip-color: var(--app-contrast-inverse);
--app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
@@ -736,6 +738,7 @@
--app-form-element-active-border-color: var(--app-primary-border);
--app-form-element-focus-color: var(--app-primary-border);
--app-form-element-disabled-opacity: 0.5;
--app-form-element-disabled-background-color: #1e2430;
--app-form-element-readonly-background-color: #242c3a;
--app-form-element-readonly-border-color: #3a4458;
--app-form-element-readonly-color: #d7dde8;
@@ -745,6 +748,8 @@
--app-form-element-invalid-focus-color: var(
--app-form-element-invalid-active-border-color
);
--app-form-element-invalid-active-shadow: 0 0 0 var(--app-outline-width)
var(--app-form-element-invalid-focus-color);
--app-form-element-valid-border-color: #2a7b6f;
--app-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--app-form-element-valid-focus-color: var(
@@ -803,8 +808,6 @@
--app-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--app-progress-background-color: #202632;
--app-progress-color: var(--app-primary-background);
--app-tooltip-background-color: var(--app-contrast-background);
--app-tooltip-color: var(--app-contrast-inverse);
--app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

4
web/css/base/variables.contrast.css
View File

@@ -19,7 +19,7 @@ html[data-contrast="high"][data-theme="light"],
--app-accordion-border-color: white;
--app-card-background-color: #ffffff;
--app-blockquote-border-color: var(--app-muted-border-color);
--app-tooltip-background-color: #000;
--app-tooltip-bg: #000;
--app-tooltip-color: #fff;
--app-action-success-background: #0f5f00;
--app-action-success-border: #0f5f00;
@@ -54,7 +54,7 @@ html[data-contrast="high"][data-theme^="dark"],
--app-accordion-border-color: black;
--app-card-background-color: #000000;
--app-blockquote-border-color: var(--app-muted-border-color);
--app-tooltip-background-color: #fff;
--app-tooltip-bg: #fff;
--app-tooltip-color: #0b0f14;
--app-action-success-background: #0f5f00;
--app-action-success-border: #0f5f00;

30
web/css/components/app-dialog.css
View File

@@ -50,20 +50,28 @@
/* ── Close icon ──────────────────────────────────────────────────────── */
dialog > article .close,
dialog > article :is(a, button)[rel="prev"] {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--app-spacing) * -1);
display: flex;
align-items: center;
justify-content: center;
min-width: 2rem;
min-height: 2rem;
width: 2rem;
height: 2rem;
margin-top: calc(var(--app-spacing) * -0.5);
margin-bottom: var(--app-spacing);
margin-left: auto;
border: none;
border-radius: var(--app-border-radius);
background-image: var(--app-icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
background-color: transparent;
opacity: 0.5;
transition: opacity var(--app-transition);
cursor: pointer;
transition:
opacity var(--app-transition),
background var(--app-transition);
}
dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
@@ -71,6 +79,18 @@
opacity: 1;
}
dialog > article .close:hover,
dialog > article :is(a, button)[rel="prev"]:hover {
background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
}
dialog > article .close:focus-visible,
dialog > article :is(a, button)[rel="prev"]:focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
opacity: 1;
}
/* ── Mobile: stack buttons vertically ────────────────────────────────── */
@media (max-width: 576px) {
dialog > article > footer,

6
web/css/components/app-list-tabs.css
View File

@@ -4,7 +4,7 @@
display: flex;
flex-wrap: wrap;
margin-bottom: var(--app-spacing);
border-bottom: 1px solid var(--list-tabs-border);
border-bottom: 1px solid var(--app-list-tabs-border);
}
.app-list-tabs button,
@@ -12,7 +12,7 @@
background: transparent;
border: 0;
padding: 5px 10px 5px 10px;
color: var(--list-tabs-muted);
color: var(--app-list-tabs-muted);
cursor: pointer;
font-weight: var(--font-medium);
border-bottom: 2px solid transparent;
@@ -29,6 +29,6 @@
.app-list-tabs button.is-active,
.app-list-tabs a.is-active {
color: var(--app-color);
border-color: var(--list-tabs-active);
border-color: var(--app-list-tabs-active);
}
}

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) {

12
web/css/components/app-tabs.css
View File

@@ -27,7 +27,7 @@
position: relative;
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--tabs-border);
border-bottom: 1px solid var(--app-tabs-border);
}
/* Chevron scroll buttons — ghost icons, visible only on overflow.
@@ -36,7 +36,7 @@
.app-tabs-nav-wrap > .app-tabs-chevron {
--app-background-color: transparent;
--app-border-color: transparent;
--app-color: var(--tabs-muted);
--app-color: var(--app-tabs-muted);
--app-box-shadow: none;
flex: 0 0 auto;
display: none;
@@ -45,7 +45,7 @@
border: none;
border-radius: 50%;
background: transparent;
color: var(--tabs-muted);
color: var(--app-tabs-muted);
font-size: var(--text-xs);
line-height: var(--leading-none);
width: 24px;
@@ -119,7 +119,7 @@
/* ------------------------------------------------------------------ */
.app-tabs-nav {
display: flex;
border-bottom: 1px solid var(--tabs-border); /* No-JS fallback border */
border-bottom: 1px solid var(--app-tabs-border); /* No-JS fallback border */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-block-start: 2px;
@@ -148,7 +148,7 @@
background: transparent;
border: 0;
padding: 5px 10px 5px 10px;
color: var(--tabs-muted) !important;
color: var(--app-tabs-muted) !important;
cursor: pointer;
border-bottom: 2px solid transparent;
text-decoration: none;
@@ -169,7 +169,7 @@
.app-tabs-nav a.is-active {
--app-color: inherit;
color: var(--app-color) !important;
border-color: var(--tabs-active);
border-color: var(--app-tabs-active);
}
.app-tabs-nav button.has-invalid,

32
web/css/components/app-tooltips.css
View File

@@ -17,11 +17,11 @@
[data-tooltip]::after {
content: attr(data-tooltip);
background: var(--tooltip-bg);
color: var(--tooltip-color);
border: 1px solid var(--tooltip-border);
border-radius: var(--tooltip-radius);
box-shadow: var(--tooltip-shadow);
background: var(--app-tooltip-bg);
color: var(--app-tooltip-color);
border: 1px solid var(--app-tooltip-border);
border-radius: var(--app-tooltip-radius);
box-shadow: var(--app-tooltip-shadow);
font-size: var(--text-xs);
padding: 0.35rem 0.6rem;
white-space: nowrap;
@@ -31,9 +31,9 @@
content: '';
width: 8px;
height: 8px;
background: var(--tooltip-bg);
border-left: 1px solid var(--tooltip-border);
border-top: 1px solid var(--tooltip-border);
background: var(--app-tooltip-bg);
border-left: 1px solid var(--app-tooltip-border);
border-top: 1px solid var(--app-tooltip-border);
transform: rotate(45deg);
}
@@ -51,11 +51,11 @@
}
[data-tooltip]::after {
transform: translate(var(--tooltip-offset), -50%);
transform: translate(var(--app-tooltip-offset), -50%);
}
[data-tooltip]::before {
transform: translate(calc(var(--tooltip-offset) - 4px), -50%) rotate(45deg);
transform: translate(calc(var(--app-tooltip-offset) - 4px), -50%) rotate(45deg);
}
[data-tooltip][data-tooltip-pos="top"]::after,
@@ -63,7 +63,7 @@
bottom: 100%;
left: 50%;
top: auto;
transform: translate(-50%, calc(-1 * var(--tooltip-offset)));
transform: translate(-50%, calc(-1 * var(--app-tooltip-offset)));
}
[data-tooltip][data-tooltip-pos="top"]::before,
@@ -71,33 +71,33 @@
bottom: 100%;
left: 50%;
top: auto;
transform: translate(-50%, calc(-1 * (var(--tooltip-offset) - 2px))) rotate(45deg);
transform: translate(-50%, calc(-1 * (var(--app-tooltip-offset) - 2px))) rotate(45deg);
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
top: 100%;
left: 50%;
transform: translate(-50%, var(--tooltip-offset));
transform: translate(-50%, var(--app-tooltip-offset));
}
[data-tooltip][data-tooltip-pos="bottom"]::before {
top: 100%;
left: 50%;
transform: translate(-50%, calc(var(--tooltip-offset) - 2px)) rotate(45deg);
transform: translate(-50%, calc(var(--app-tooltip-offset) - 2px)) rotate(45deg);
}
[data-tooltip][data-tooltip-pos="left"]::after {
top: 50%;
right: 100%;
left: auto;
transform: translate(calc(-1 * var(--tooltip-offset)), -50%);
transform: translate(calc(-1 * var(--app-tooltip-offset)), -50%);
}
[data-tooltip][data-tooltip-pos="left"]::before {
top: 50%;
right: 100%;
left: auto;
transform: translate(calc(-1 * (var(--tooltip-offset) - 2px)), -50%) rotate(45deg);
transform: translate(calc(-1 * (var(--app-tooltip-offset) - 2px)), -50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {

2
web/css/layout/app-shell.css
View File

@@ -88,7 +88,7 @@
}
kbd {
--app-font-weight: bolder;
--app-font-weight: var(--font-bold);
}
:where(select, textarea),

5
web/css/layout/app-sidebar.css
View File

@@ -210,11 +210,12 @@
.app-sidebar a {
color: inherit;
display: block;
padding: 3px var(--app-spacing);
padding: 0.375rem var(--app-spacing);
border-radius: 0;
margin: 0;
border-left: var(--app-sidebar-border-width) solid transparent;
width: 100%;
font-size: var(--text-base);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -286,7 +287,7 @@
overflow: hidden;
white-space: nowrap;
font-size: var(--text-base);
font-weight: var(--font-normal);
font-weight: var(--font-regular);
position: relative;
top: 2px;
}

108
web/css/layout/app-topbar.css
View File

@@ -26,9 +26,8 @@
--app-topbar-margin-bottom: calc(var(--app-spacing) * 2);
--app-topbar-muted: var(--app-form-element-placeholder-color);
--app-topbar-bg: var(--app-background-color);
padding-block-start: 0;
padding-left: var(--app-spacing);
padding-right: var(--app-spacing);
padding-block: 0.375rem;
padding-inline: var(--app-spacing);
margin-bottom: var(--app-topbar-margin-bottom);
color: var(--app-contrast);
border-bottom: var(--app-topbar-divider);
@@ -71,7 +70,7 @@
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: min(24rem, 50vw);
max-width: min(20rem, 50vw);
width: 100%;
padding: 0.3rem 0.65rem;
border: var(--app-border-width) solid var(--app-border);
@@ -93,6 +92,11 @@
border-color: var(--app-primary);
}
.app-topbar-search-trigger:focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
}
.app-topbar-search-trigger .bi {
font-size: var(--text-sm);
flex-shrink: 0;
@@ -139,35 +143,70 @@
}
.app-header details.dropdown > summary:not([role]) {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
min-height: 2.25rem;
border: none;
height: auto;
padding: var(--app-topbar-item-padding);
border-radius: 0;
border-radius: var(--app-border-radius);
background: transparent;
color: var(--app-topbar-muted);
cursor: pointer;
transition:
background var(--app-transition),
color var(--app-transition);
}
/* .app-header details.dropdown > summary:not([role]):after {
display: none;
} */
.app-topbar-left > li > a,
.app-topbar-right > li > a {
padding: var(--app-topbar-item-padding);
color: var(--app-topbar-muted);
display: block;
margin: 0;
}
.app-topbar-right > li > a,
.app-topbar-left button,
.app-topbar-right button {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
min-height: 2.25rem;
padding: var(--app-topbar-item-padding);
color: var(--app-topbar-muted);
display: block;
margin: 0;
background: transparent;
border: none;
border-radius: 0;
border-radius: var(--app-border-radius);
background: transparent;
color: var(--app-topbar-muted);
cursor: pointer;
transition:
background var(--app-transition),
color var(--app-transition);
}
.app-topbar-left > li > a:hover,
.app-topbar-right > li > a:hover,
.app-topbar-left button:hover,
.app-topbar-right button:hover,
.app-header details.dropdown > summary:not([role]):hover {
background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
color: var(--app-color);
}
.app-topbar-left > li > a:active,
.app-topbar-right > li > a:active,
.app-topbar-left button:active,
.app-topbar-right button:active,
.app-header details.dropdown > summary:not([role]):active {
background: color-mix(in srgb, var(--app-contrast) 12%, transparent);
}
.app-topbar-left > li > a:focus-visible,
.app-topbar-right > li > a:focus-visible,
.app-topbar-left button:focus-visible,
.app-topbar-right button:focus-visible,
.app-header details.dropdown > summary:not([role]):focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
}
.app-header #global-back.is-disabled,
.app-header #global-forward.is-disabled {
opacity: 0.4;
@@ -189,6 +228,21 @@
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip {
cursor: pointer;
transition:
border-color var(--app-transition),
color var(--app-transition);
}
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip:hover {
border-color: var(--app-primary);
color: var(--app-color);
}
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip:focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
border-color: var(--app-primary);
color: var(--app-color);
}
.app-topbar-tenant-name {
@@ -201,8 +255,8 @@
white-space: nowrap;
}
.app-topbar-user-menu > summary {
color: var(--app-topbar-muted);
.app-topbar-user-menu > summary:hover {
color: var(--app-color);
}
.app-topbar-menu-list {
@@ -257,7 +311,7 @@
padding: 0.375rem 0.5rem;
overflow: hidden;
border: 0;
border-radius: 3px;
border-radius: var(--app-border-radius);
background: transparent;
color: var(--app-dropdown-color);
font: inherit;
@@ -274,12 +328,18 @@
display: block;
}
.app-topbar-menu-list li > a:hover,
.app-topbar-menu-list li > a:focus-visible,
.app-topbar-menu-list li > button:hover,
.app-topbar-menu-list li > button:focus,
.app-topbar-menu-list li > button:focus-visible {
background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
}
.app-topbar-menu-list li > a.active {
color: var(--app-primary);
font-weight: var(--font-medium);
}
.app-topbar-menu-list li > button.app-topbar-menu-with-hotkey {
display: grid;
grid-template-columns: 1fr auto;

12
web/css/pages/app-error.css
View File

@@ -12,13 +12,13 @@
font-size: var(--text-5xl);
font-weight: var(--font-bold);
line-height: var(--leading-none);
color: var(--color-text-muted);
color: var(--app-muted-color);
}
.error-page__message {
margin-top: 1rem;
font-size: var(--text-lg);
color: var(--color-text);
color: var(--app-color);
}
.error-page__back {
@@ -27,10 +27,10 @@
padding: 0.5rem 1.25rem;
font-size: var(--text-sm);
text-decoration: none;
border: 1px solid var(--color-border);
border-radius: 0.375rem;
color: var(--color-text);
background: var(--color-bg-surface);
border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-border-radius);
color: var(--app-color);
background: var(--app-card-background-color);
}
.error-page__back:hover {

2
web/css/pages/app-login.css
View File

@@ -807,7 +807,7 @@
justify-content: flex-start;
text-align: left;
font-weight: var(--font-bold);
color: var(--app-text);
color: var(--app-color);
}
.login-tenant-context-text {

2
web/css/vendor-overrides/editorjs.css
View File

@@ -54,7 +54,7 @@ table.tc-table {
}
.tc-cell {
border-left: 1px solid var(--color-border);
border-left: 1px solid var(--app-muted-border-color);
}
.ce-toolbar__actions {

117
web/js/components/app-global-search.js
View File

@@ -42,8 +42,6 @@ export function initGlobalSearch(root = document, options = {}) {
const footerEl = dialog.querySelector('[data-search-dialog-footer]');
const viewAllLink = dialog.querySelector('[data-search-dialog-view-all]');
const closeButton = dialog.querySelector('[data-app-search-dialog-close]');
const shortcutEl = dialog.querySelector('[data-search-shortcut]');
const emptyHintEl = dialog.querySelector('[data-search-empty-hint-template]');
const triggerButton = document.querySelector('[data-app-search-trigger]');
const triggerShortcutEl = document.querySelector('[data-search-trigger-shortcut]');
@@ -57,17 +55,13 @@ export function initGlobalSearch(root = document, options = {}) {
let pending = null;
let activeIndex = -1;
let flatItems = [];
let abortController = null;
const shortcutLabel = /(Mac|iPhone|iPad|iPod)/i.test(navigator.platform || navigator.userAgent)
? '⌘K'
: 'Ctrl+K';
if (shortcutEl) {shortcutEl.textContent = shortcutLabel;}
if (triggerShortcutEl) {triggerShortcutEl.textContent = shortcutLabel;}
if (emptyHintEl) {
const template = emptyHintEl.getAttribute('data-search-empty-hint-template') || '';
emptyHintEl.textContent = template.replace('{shortcut}', shortcutLabel);
}
// --- State management ---
@@ -119,14 +113,14 @@ export function initGlobalSearch(root = document, options = {}) {
const heading = document.createElement('div');
heading.classList.add('app-search-dialog-category-heading');
heading.innerHTML = `<i class="bi ${iconForKey(category.key)}" aria-hidden="true"></i> <span>${escapeHtml(category.label || category.key)}</span> <span class="app-search-dialog-category-count">${category.count}</span>`;
heading.textContent = category.label || category.key;
group.appendChild(heading);
if (Array.isArray(category.items) && category.items.length > 0) {
const list = document.createElement('ul');
list.classList.add('app-search-dialog-category-items');
list.setAttribute('role', 'group');
const list = document.createElement('ul');
list.classList.add('app-search-dialog-category-items');
list.setAttribute('role', 'group');
if (Array.isArray(category.items) && category.items.length > 0) {
category.items.forEach((item) => {
if (!item || !item.url) {return;}
const li = document.createElement('li');
@@ -137,26 +131,62 @@ export function initGlobalSearch(root = document, options = {}) {
const link = document.createElement('a');
link.href = item.url;
link.textContent = item.label || '';
link.tabIndex = -1;
const itemIcon = item.icon || iconForKey(category.key);
const icon = document.createElement('i');
icon.className = `bi ${safeCssClass(itemIcon)} app-search-dialog-item-icon`;
icon.setAttribute('aria-hidden', 'true');
link.appendChild(icon);
const textWrap = document.createElement('span');
textWrap.classList.add('app-search-dialog-item-text');
const titleEl = document.createElement('span');
titleEl.classList.add('app-search-dialog-item-title');
highlightText(titleEl, item.label || '', query);
textWrap.appendChild(titleEl);
if (item.subtitle) {
const subtitleEl = document.createElement('span');
subtitleEl.classList.add('app-search-dialog-item-subtitle');
highlightText(subtitleEl, item.subtitle, query);
textWrap.appendChild(subtitleEl);
}
link.appendChild(textWrap);
li.appendChild(link);
list.appendChild(li);
flatItems.push(li);
itemIndex++;
});
group.appendChild(list);
}
if (category.url && category.count > 0) {
const viewCategoryLink = document.createElement('a');
viewCategoryLink.classList.add('app-search-dialog-category-view-all');
viewCategoryLink.href = category.url;
viewCategoryLink.innerHTML = `${escapeHtml(category.label || category.key)} <i class="bi bi-arrow-right" aria-hidden="true"></i>`;
group.appendChild(viewCategoryLink);
if (category.url && category.count > (category.items?.length || 0)) {
const viewLi = document.createElement('li');
viewLi.classList.add('app-search-dialog-item', 'app-search-dialog-item-view-all');
const viewLink = document.createElement('a');
viewLink.href = category.url;
viewLink.tabIndex = -1;
const viewIcon = document.createElement('i');
viewIcon.className = 'bi bi-arrow-right app-search-dialog-item-icon';
viewIcon.setAttribute('aria-hidden', 'true');
viewLink.appendChild(viewIcon);
const viewText = document.createElement('span');
viewText.classList.add('app-search-dialog-item-text');
const viewTitle = document.createElement('span');
viewTitle.classList.add('app-search-dialog-item-title');
viewTitle.textContent = `${category.label || category.key} — ${category.count}`;
viewText.appendChild(viewTitle);
viewLink.appendChild(viewText);
viewLi.appendChild(viewLink);
list.appendChild(viewLi);
}
group.appendChild(list);
resultsEl.appendChild(group);
});
@@ -182,12 +212,16 @@ export function initGlobalSearch(root = document, options = {}) {
// --- Fetch ---
const fetchResults = async (value) => {
if (abortController) {abortController.abort();}
abortController = new AbortController();
const { signal } = abortController;
setState('loading');
const url = new URL(endpoint.toString());
url.searchParams.set('q', value);
try {
const response = await fetch(url.toString(), { headers: { 'Accept': 'application/json' } });
const response = await fetch(url.toString(), { headers: { 'Accept': 'application/json' }, signal });
if (!response.ok) {
warnOnce('FETCH_FAILED', `Global search failed: ${response.status} ${response.statusText}`, { module: 'global-search' });
setState('error');
@@ -201,6 +235,7 @@ export function initGlobalSearch(root = document, options = {}) {
setState('error');
}
} catch (err) {
if (err.name === 'AbortError') {return;}
warnOnce('FETCH_ERROR', 'Global search fetch error', { module: 'global-search', err });
setState('error');
}
@@ -212,14 +247,6 @@ export function initGlobalSearch(root = document, options = {}) {
if (dialog.open) {return;}
dialog.showModal();
setState('empty');
if (emptyStateEl) {
const p = emptyStateEl.querySelector('p');
if (p) {
p.textContent = emptyHintEl
? ''
: (dialog.dataset.emptyText || '');
}
}
resetEmptyState();
window.requestAnimationFrame(() => {
if (input) {
@@ -280,6 +307,8 @@ export function initGlobalSearch(root = document, options = {}) {
const onInput = () => {
const value = input.value.trim();
if (value.length < minLength) {
if (pending) {window.clearTimeout(pending); pending = null;}
if (abortController) {abortController.abort(); abortController = null;}
setState('empty');
resetEmptyState();
resultsEl.innerHTML = '';
@@ -386,6 +415,7 @@ export function initGlobalSearch(root = document, options = {}) {
const destroy = () => {
if (pending) {window.clearTimeout(pending);}
if (abortController) {abortController.abort();}
if (input) {
input.removeEventListener('input', onInput);
input.removeEventListener('keydown', onInputKeydown);
@@ -410,3 +440,30 @@ function escapeHtml(text) {
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
function safeCssClass(value) {
return String(value).replace(/[^a-z0-9_-]/gi, '');
}
function highlightText(el, text, query) {
if (!query || query.length < 2) {
el.textContent = text;
return;
}
const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const parts = text.split(new RegExp(`(${escaped})`, 'gi'));
if (parts.length === 1) {
el.textContent = text;
return;
}
const queryLower = query.toLowerCase();
parts.forEach((part) => {
if (part.toLowerCase() === queryLower) {
const mark = document.createElement('mark');
mark.textContent = part;
el.appendChild(mark);
} else if (part !== '') {
el.appendChild(document.createTextNode(part));
}
});
}