feat: add Add Sessions panel HTML and CSS

2026-04-15 21:13:25 -07:00
parent e18f08a320
commit 1167c8df7a
4 changed files with 197 additions and 1 deletions
@@ -1876,6 +1876,149 @@ body {
   overflows from bottom:0 upward, and tile-body clips excess at the top — showing
   the bottom-most content (the prompt area) just like a real terminal. */

+/* —— Add Sessions Panel —————————————————————————————————————————————————————————————————————————— */
+
+.add-sessions-panel {
+  position: fixed;
+  inset: 0;
+  z-index: 250;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-sessions-panel__backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-overlay);
+}
+
+.add-sessions-panel__content {
+  position: relative;
+  width: 90%;
+  max-width: 440px;
+  max-height: 70vh;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.add-sessions-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.add-sessions-panel__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.add-sessions-panel__close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.add-sessions-panel__close:hover {
+  background: var(--bg-surface);
+  color: var(--text);
+}
+
+.add-sessions-panel__list {
+  overflow-y: auto;
+  padding: 8px 0;
+  flex: 1;
+}
+
+.add-sessions-panel__empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.add-sessions-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.add-sessions-item:hover {
+  background: var(--bg-surface);
+}
+
+.add-sessions-item--hidden {
+  opacity: 0.5;
+}
+
+.add-sessions-item__checkbox {
+  flex-shrink: 0;
+  accent-color: var(--accent);
+}
+
+.add-sessions-item__name {
+  font-size: 13px;
+  color: var(--text);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.add-sessions-item__device {
+  font-size: 11px;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.add-sessions-item__badge {
+  font-size: 10px;
+  color: var(--text-dim);
+  background: var(--bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+.add-sessions-item__disclosure {
+  width: 100%;
+  padding: 2px 16px 6px 42px;
+  font-size: 11px;
+  color: var(--text-dim);
+  font-style: italic;
+  display: none;
+}
+
+/* Mobile: full-screen sheet for Add Sessions */
+@media (max-width: 599px) {
+  .add-sessions-panel__content {
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
+}
+
 /* ============================================================
   Responsive overlay sidebar at <960px
   ============================================================ */