feat(webui): add central selection list

webui/src/styles/components.css

@@ -2525,6 +2525,55 @@
   opacity: .55;
 }
 
+.selection-list {
+  display: grid;
+  min-width: 0;
+}
+
+:where(.selection-list-item) {
+  appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 8px 10px;
+  text-align: left;
+  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
+}
+
+:where(.selection-list-item):hover:not(:disabled) {
+  background: var(--hover-tint-soft);
+}
+
+:where(.selection-list-item).is-selected {
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+}
+
+:where(.selection-list-item):focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: -2px;
+}
+
+:where(.selection-list-item)[draggable="true"] {
+  cursor: grab;
+}
+
+:where(.selection-list-item)[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+:where(.selection-list-item):disabled,
+:where(.selection-list-item).is-disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
 .theme-preview-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));