Add sliding transfers panel

server/public/styles.css

@@ -14,6 +14,8 @@
   font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   grid-template-rows: auto 1fr;
   min-height: calc(100vh - 170px);
+  overflow: hidden;
+  position: relative;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -88,6 +90,11 @@
   gap: 8px;
 }
 
+.u-nav .toolbar button.active {
+  background: var(--surface-2);
+  border-color: var(--accent);
+}
+
 .u-nav .workspace {
   min-height: 0;
   overflow: hidden;
@@ -472,6 +479,71 @@
   border-color: var(--line);
 }
 
+.u-nav .transfer-panel {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  max-height: min(520px, calc(100% - 78px));
+  min-height: 220px;
+  min-width: 320px;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: top right;
+  z-index: 10000;
+}
+
+.u-nav .transfer-panel.open {
+  animation: transfer-slide-down 180ms ease-out both;
+}
+
+.u-nav .transfer-panel.closing {
+  animation: transfer-slide-up 180ms ease-in both;
+  pointer-events: none;
+}
+
+.u-nav .transfer-panel-header {
+  align-items: center;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 5px 8px 5px 12px;
+}
+
+.u-nav .transfer-panel-body {
+  min-height: 0;
+  overflow: auto;
+  padding: 10px;
+}
+
+@keyframes transfer-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-18px) scaleY(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@keyframes transfer-slide-up {
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-18px) scaleY(0.96);
+  }
+}
+
 .u-nav .queue-list {
   display: grid;
   gap: 10px;
@@ -580,4 +652,12 @@
   .u-nav .resize-handle {
     display: none;
   }
+
+  .u-nav .transfer-panel {
+    left: 10px !important;
+    max-height: min(70vh, 520px);
+    min-width: 0;
+    right: 10px !important;
+    width: auto !important;
+  }
 }