claudeck 1.0.0

package/public/css/ui/sessions.css

@@ -0,0 +1,689 @@
+/* ── Sidebar ──────────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  min-width: var(--sidebar-w);
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* Ambient glow at bottom of sidebar */
+.sidebar::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--bg-secondary), transparent);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sidebar-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-header h1 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent);
+  font-family: var(--font-display);
+  letter-spacing: 0.06em;
+  text-shadow: var(--glow);
+  text-transform: uppercase;
+}
+
+/* ── Logo split: Co·de·ck diagonal ─────────────────── */
+
+.theme-toggle-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.theme-toggle-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+  box-shadow: var(--glow);
+}
+
+/* Folder picker */
+.folder-picker {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.folder-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.folder-picker label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  font-family: var(--font-display);
+}
+
+.system-prompt-badge {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--purple);
+  background: var(--purple-dim);
+  padding: 2px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.3px;
+  border: 1px solid rgba(198,159,245,0.15);
+}
+
+.folder-picker-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.add-project-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  line-height: 1;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.add-project-btn:hover {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.system-prompt-edit-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.system-prompt-edit-btn:hover {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+/* ── Sidebar Tooltips ─────────────────────────────────── */
+.sidebar-tooltip {
+  position: relative;
+}
+
+.sidebar-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.9);
+  padding: 4px 10px;
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--text);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.15s var(--ease-out-expo);
+  z-index: 100;
+  box-shadow: var(--shadow-sm);
+}
+
+.sidebar-tooltip:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* ── Add Project Modal ──────────────────────────────── */
+.add-project-modal {
+  width: 480px;
+  max-width: 90vw;
+}
+
+.add-project-body {
+  padding: 0 20px 20px;
+}
+
+.folder-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 8px 0;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+  min-height: 32px;
+}
+
+.folder-breadcrumb-seg {
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+
+.folder-breadcrumb-seg:hover {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.folder-breadcrumb-sep {
+  color: var(--text-dim);
+  font-size: 10px;
+}
+
+.folder-list {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg);
+  max-height: 300px;
+  min-height: 150px;
+  overflow-y: auto;
+  margin-bottom: 12px;
+}
+
+.folder-list-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text);
+  cursor: pointer;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: all 0.15s;
+}
+
+.folder-list-item:last-child {
+  border-bottom: none;
+}
+
+.folder-list-item:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.folder-list-item .folder-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.folder-list-empty {
+  padding: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.folder-list-loading {
+  padding: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.folder-select-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.folder-select-row input {
+  flex: 1;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.folder-select-row .modal-btn-save {
+  flex-shrink: 0;
+}
+
+.folder-picker select {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+/* Sessions */
+.sessions-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-top: 14px;
+  overflow: hidden;
+}
+
+.sessions-section h2 {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+  padding: 0 16px;
+  margin-bottom: 8px;
+  font-family: var(--font-display);
+}
+
+/* Session search */
+.session-search-wrapper {
+  padding: 0 16px;
+  margin-bottom: 8px;
+}
+
+.session-search-wrapper input {
+  width: 100%;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.session-title {
+  display: inline-block;
+  max-width: 170px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  font-family: var(--font-sans);
+}
+
+.btn-secondary {
+  display: block;
+  width: calc(100% - 32px);
+  margin: 0 16px 10px;
+  padding: 7px;
+  background: transparent;
+  color: var(--accent);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.btn-secondary:hover {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+  text-shadow: var(--glow);
+  border-style: solid;
+}
+
+.session-list {
+  list-style: none;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.session-list li {
+  position: relative;
+  padding: 10px 14px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  border-left: 2px solid transparent;
+  transition: all 0.15s var(--ease-smooth);
+}
+
+.session-list li:hover {
+  background: var(--bg-tertiary);
+  color: var(--text);
+}
+
+.session-list li.active {
+  border-left-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+/* Accent bar animation on active */
+.session-list li.active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent-glow);
+}
+
+/* Card header — title + badges + actions in one row */
+.session-card-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 22px;
+}
+
+.session-card-header .session-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.session-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.session-list li:hover .session-card-actions {
+  opacity: 1;
+}
+
+/* Always show pin icon when pinned */
+.session-card-actions:has(.session-pin.pinned) {
+  opacity: 1;
+}
+
+.session-pin {
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: all 0.15s;
+}
+
+.session-pin.pinned {
+  color: var(--warning);
+}
+
+.session-pin:hover { background: var(--accent-dim); color: var(--accent); }
+.session-pin.pinned:hover { background: var(--accent-dim); color: var(--accent); }
+
+.session-delete {
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: all 0.15s;
+}
+
+.session-delete:hover { background: var(--error); color: #fff; }
+
+.session-list li .session-preview {
+  display: block;
+  font-size: 11px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 3px;
+  font-family: var(--font-sans);
+}
+
+/* Summary tooltip on hover */
+.session-list li[data-summary] {
+  position: relative;
+}
+
+.session-list li[data-summary]::after {
+  content: attr(data-summary);
+  position: absolute;
+  left: 16px;
+  top: 100%;
+  z-index: 1000;
+  max-width: 280px;
+  padding: 8px 12px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text);
+  white-space: normal;
+  word-wrap: break-word;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.2s, transform 0.2s var(--ease-out-expo);
+  font-family: var(--font-sans);
+}
+
+.session-list li[data-summary]:hover::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.session-mode {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 4px;
+  vertical-align: middle;
+  margin-left: 4px;
+  font-family: var(--font-display);
+}
+
+.session-mode.single {
+  color: var(--text-dim);
+  background: var(--bg-tertiary);
+}
+
+.session-mode.parallel {
+  color: var(--accent);
+  background: var(--accent-dim);
+  border: 1px solid var(--border-accent);
+}
+
+.session-mode.both {
+  color: var(--purple);
+  background: var(--purple-dim);
+  border: 1px solid rgba(198,159,245,0.12);
+}
+
+/* ── Mode Toggle Switch ──────────────────────────────── */
+.mode-toggle {
+  padding: 0 16px;
+  margin-bottom: 10px;
+}
+
+.toggle-switch {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  padding: 7px 0;
+}
+
+.toggle-switch input {
+  display: none;
+}
+
+.toggle-slider {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background: var(--border);
+  border-radius: 10px;
+  flex-shrink: 0;
+  transition: background 0.3s var(--ease-smooth);
+}
+
+.toggle-slider::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  background: var(--text-dim);
+  border-radius: 50%;
+  transition: transform 0.3s var(--ease-spring), background 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background: var(--accent-solid);
+  box-shadow: var(--glow);
+}
+
+.toggle-switch input:checked + .toggle-slider::after {
+  transform: translateX(16px);
+  background: #fff;
+}
+
+.toggle-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-family: var(--font-sans);
+  transition: color 0.2s;
+}
+
+.toggle-switch input:checked ~ .toggle-label {
+  color: var(--accent);
+}
+
+/* ── Session Title Inline Edit ──────────────────────── */
+.session-title-edit {
+  background: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  width: 160px;
+}
+
+/* ── Session Context Menu ──────────────────────────────── */
+.session-ctx-menu {
+  position: fixed;
+  z-index: 1000;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 4px;
+  box-shadow: var(--shadow-lg);
+  min-width: 220px;
+  max-width: 360px;
+  animation: fadeInUp 0.12s var(--ease-out-expo);
+}
+
+.session-ctx-menu button {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: none;
+  border: none;
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-sans);
+  padding: 8px 12px;
+  text-align: left;
+  cursor: pointer;
+  gap: 2px;
+  transition: all 0.15s;
+}
+
+.session-ctx-menu button:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.session-ctx-menu .ctx-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.session-ctx-menu .ctx-value {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Session Empty State ──────────────────────────────── */
+.session-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 16px;
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: center;
+  gap: 10px;
+  font-family: var(--font-sans);
+}
+
+.session-empty svg {
+  opacity: 0.3;
+}
+
+.session-empty-hint {
+  font-size: 11px;
+  opacity: 0.5;
+  line-height: 1.5;
+}