Add archive mailbox selector

frontend-js/dist/style.css

@@ -41,12 +41,41 @@ body.ol2013 {
 .ribbon-tabs { display: flex; gap: 2px; height: 100%; }
 .tab {
   display: flex; align-items: center;
+  gap: 8px;
   padding: 0 16px; height: 100%;
   color: #eaf3fb; text-decoration: none;
   border-bottom: 3px solid transparent;
 }
 .tab:hover { background: var(--ol-blue-dark); color: #fff; }
 .tab.active { background: #fff; color: var(--ol-blue); border-bottom-color: #fff; }
+.mail-logo {
+  position: relative;
+  width: 17px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-radius: 2px;
+  display: inline-block;
+  flex: 0 0 auto;
+}
+.mail-logo::before,
+.mail-logo::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  width: 10px;
+  height: 2px;
+  background: currentColor;
+}
+.mail-logo::before {
+  left: -1px;
+  transform: rotate(32deg);
+  transform-origin: left center;
+}
+.mail-logo::after {
+  right: -1px;
+  transform: rotate(-32deg);
+  transform-origin: right center;
+}
 
 /* Viewer */
 .three-pane,
@@ -107,6 +136,23 @@ body.resizing { cursor: col-resize; user-select: none; }
   color: var(--ol-text);
   background: #fff;
 }
+.archive-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+.archive-select-form {
+  margin: 0;
+  min-width: 0;
+}
+.archive-select {
+  width: 100%;
+  height: 24px;
+  padding: 2px 6px;
+  color: var(--ol-text);
+  background: #fff;
+}
 
 .searchbar {
   position: sticky; top: 30px; z-index: 2;