feat(search): add global titlebar search filters

webui/src/styles/search.css

@@ -2,8 +2,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: min(360px, 28vw);
-  min-width: 190px;
+  width: 100%;
+  min-width: 0;
   height: 34px;
   box-sizing: border-box;
   border: 1px solid var(--control-border);
@@ -57,8 +57,9 @@
   position: absolute;
   z-index: 300;
   top: calc(100% + 7px);
-  right: 0;
+  left: 50%;
   width: min(460px, 80vw);
+  transform: translateX(-50%);
   overflow: hidden;
   border: var(--border-line);
   border-radius: 6px;
@@ -121,6 +122,7 @@
 .search-page-toolbar {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
   flex: 0 0 auto;
   border-bottom: var(--border-line);
@@ -131,8 +133,10 @@
 .search-page-form {
   display: flex;
   align-items: center;
-  width: min(760px, 100%);
+  min-width: min(280px, 100%);
+  max-width: 760px;
   height: 38px;
+  flex: 1 1 520px;
   border: 1px solid var(--control-border);
   border-radius: 4px;
   background: var(--control-bg);
@@ -173,6 +177,157 @@
   background: linear-gradient(var(--control-gradient-start), var(--control-gradient-end-hover));
 }
 
+.search-filter-menu {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.search-filter-trigger {
+  min-height: 38px;
+}
+
+.search-filter-trigger.is-active {
+  border-color: var(--input-border-focus);
+  color: var(--text-strong);
+}
+
+.search-filter-count {
+  min-width: 19px;
+  height: 19px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--on-accent);
+  padding: 0 5px;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.search-filter-popover {
+  position: absolute;
+  z-index: 400;
+  top: calc(100% + 7px);
+  right: 0;
+  display: flex;
+  width: min(340px, calc(100vw - 40px));
+  max-height: min(520px, calc(100vh - 150px));
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--border-line);
+  border-radius: 6px;
+  background: var(--surface);
+  box-shadow: var(--shadow-menu);
+}
+
+.search-filter-popover-header,
+.search-filter-popover-footer {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 9px 12px;
+}
+
+.search-filter-popover-header {
+  justify-content: space-between;
+  border-bottom: var(--border-line);
+}
+
+.search-filter-popover-header .icon-button {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.search-filter-popover-footer {
+  justify-content: flex-end;
+  border-top: var(--border-line);
+}
+
+.search-filter-group {
+  min-height: 0;
+  margin: 0;
+  border: 0;
+  border-bottom: var(--border-line);
+  padding: 11px 12px 12px;
+}
+
+.search-filter-group:last-of-type {
+  border-bottom: 0;
+}
+
+.search-filter-group legend {
+  color: var(--muted);
+  padding: 0;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.search-filter-options {
+  display: grid;
+  max-height: 150px;
+  gap: 2px;
+  overflow: auto;
+  margin-top: 7px;
+}
+
+.search-filter-options label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 31px;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 4px 7px;
+  color: var(--text);
+}
+
+.search-filter-options label:hover {
+  background: var(--sidebar-hover-bg);
+  color: var(--text-strong);
+}
+
+.search-filter-options input {
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.search-filter-empty {
+  color: var(--muted);
+  padding: 5px 7px;
+  font-size: 12px;
+}
+
+.search-active-filters {
+  display: flex;
+  flex: 1 0 100%;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.search-active-filters button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 27px;
+  border: 1px solid var(--control-border);
+  border-radius: 4px;
+  background: var(--control-bg);
+  color: var(--text);
+  cursor: pointer;
+  padding: 3px 8px;
+  font: inherit;
+  font-size: 12px;
+}
+
+.search-active-filters button:hover {
+  border-color: var(--input-border-focus);
+  background: var(--sidebar-hover-bg);
+}
+
 .search-results-viewport {
   min-height: 0;
   flex: 1;
@@ -261,8 +416,11 @@
 
   .global-search:focus-within {
     position: absolute;
-    right: 170px;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
     width: min(360px, calc(100vw - 190px));
+    transform: translate(-50%, -50%);
   }
 
   .global-search:not(:focus-within) input,