claudeck 1.0.0

package/plugins/repos/client.css

@@ -0,0 +1,549 @@
+/* ── Repos Tab ──────────────────────────────────────── */
+
+/* Toolbar */
+.repos-toolbar {
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.repos-search-wrap {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.repos-search-wrap svg {
+  position: absolute;
+  left: 8px;
+  color: var(--text-dim);
+  pointer-events: none;
+}
+
+.repos-search {
+  width: 100%;
+  padding: 5px 8px 5px 26px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.repos-search:focus {
+  border-color: var(--accent);
+}
+
+.repos-toolbar-actions {
+  display: flex;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.repos-toolbar-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.repos-toolbar-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.repos-toolbar-btn.spinning svg {
+  animation: reposSpin 0.6s linear infinite;
+}
+
+@keyframes reposSpin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* ── Tree list ───────────────────────────────────────── */
+.repos-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.repos-list::-webkit-scrollbar { width: 4px; }
+.repos-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+/* Group children container with indent guide */
+.repos-group-children {
+  display: none;
+  position: relative;
+}
+
+.repos-group-children.expanded {
+  display: block;
+}
+
+.repos-group-children::before {
+  content: "";
+  position: absolute;
+  left: 20px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--border-subtle);
+}
+
+/* ── Tree item (shared base) ─────────────────────────── */
+.repos-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: var(--text);
+  transition: background 0.1s;
+  white-space: nowrap;
+  user-select: none;
+  cursor: default;
+  position: relative;
+}
+
+.repos-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.repos-item.dragging {
+  opacity: 0.35;
+}
+
+.repos-item.drop-target {
+  background: var(--accent-dim);
+  outline: 1px dashed var(--accent);
+  outline-offset: -1px;
+}
+
+/* Chevron */
+.repos-chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+  color: var(--text-dim);
+}
+
+.repos-chevron.expanded {
+  transform: rotate(90deg);
+}
+
+.repos-chevron-spacer {
+  width: 12px;
+  flex-shrink: 0;
+}
+
+/* Tree icons */
+.repos-tree-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--text-dim);
+}
+
+.repos-tree-icon.folder {
+  color: var(--accent);
+}
+
+/* ── Group item ──────────────────────────────────────── */
+.repos-group-item {
+  cursor: pointer;
+}
+
+.repos-group-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.repos-group-badge {
+  margin-left: auto;
+  font-size: 9px;
+  color: var(--text-dim);
+  background: var(--bg-tertiary);
+  border-radius: 8px;
+  padding: 1px 6px;
+  min-width: 18px;
+  text-align: center;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+/* ── Repo item ───────────────────────────────────────── */
+.repos-repo-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 2px;
+  flex-grow: 1;
+}
+
+.repos-repo-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+
+.repos-repo-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  color: var(--text-dim);
+  overflow: hidden;
+}
+
+.repos-repo-meta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repos-meta-icon {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+/* ── Hover actions ───────────────────────────────────── */
+.repos-item-actions {
+  display: none;
+  gap: 2px;
+  flex-shrink: 0;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--bg-tertiary);
+  padding: 0 2px;
+  border-radius: var(--radius);
+}
+
+.repos-item:hover .repos-item-actions {
+  display: flex;
+}
+
+.repos-item:hover .repos-group-badge {
+  visibility: hidden;
+}
+
+.repos-item-btn {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: background 0.1s, color 0.1s;
+  padding: 0;
+}
+
+.repos-item-btn svg {
+  width: 12px;
+  height: 12px;
+}
+
+.repos-item-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text);
+}
+
+.repos-delete-btn:hover {
+  color: var(--error) !important;
+}
+
+/* ── Inline editing ──────────────────────────────────── */
+.repos-inline-input {
+  flex: 1;
+  min-width: 0;
+  padding: 2px 6px;
+  background: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  outline: none;
+}
+
+/* ── Empty state ─────────────────────────────────────── */
+.repos-empty {
+  padding: 32px 16px;
+  font-size: 12px;
+  color: var(--text-dim);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.repos-empty-icon {
+  opacity: 0.2;
+}
+
+.repos-empty-icon svg {
+  width: 32px;
+  height: 32px;
+}
+
+.repos-empty-hint {
+  font-size: 10px;
+  opacity: 0.6;
+}
+
+/* ── Footer ──────────────────────────────────────────── */
+.repos-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  font-size: 10px;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+/* ── Dialog ──────────────────────────────────────────── */
+.repos-dialog-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  backdrop-filter: blur(2px);
+}
+
+.repos-dialog {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.repos-dialog-title {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.repos-dialog-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-dim);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.repos-dialog-input {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 5px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.repos-dialog-input:focus {
+  border-color: var(--accent);
+}
+
+.repos-dialog-input option {
+  background: var(--bg-secondary);
+  color: var(--text);
+}
+
+.repos-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.repos-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 5px 12px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.repos-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+
+.repos-dialog-save {
+  background: var(--accent) !important;
+  color: var(--bg) !important;
+  border-color: var(--accent) !important;
+  font-weight: 600;
+}
+
+.repos-dialog-save:hover {
+  opacity: 0.9;
+}
+
+.repos-dialog-error {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--error);
+  padding: 4px 0;
+}
+
+/* ── Context Menu ────────────────────────────────────── */
+.repos-ctx-menu {
+  position: fixed;
+  z-index: 1000;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  min-width: 170px;
+}
+
+.repos-ctx-menu button {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  padding: 6px 12px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s;
+}
+
+.repos-ctx-menu button:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.repos-ctx-danger {
+  color: var(--error) !important;
+}
+
+.repos-ctx-danger:hover {
+  background: rgba(237, 51, 59, 0.08) !important;
+  color: var(--error) !important;
+}
+
+/* Submenu */
+.repos-ctx-submenu-wrapper {
+  position: relative;
+}
+
+.repos-ctx-has-submenu {
+  display: flex !important;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  padding: 6px 12px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s;
+}
+
+.repos-ctx-has-submenu:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.repos-ctx-arrow {
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.repos-ctx-submenu {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  min-width: 140px;
+  z-index: 1001;
+}
+
+.repos-ctx-submenu-wrapper:hover .repos-ctx-submenu {
+  display: block;
+}
+
+.repos-ctx-submenu button {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  padding: 6px 12px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s;
+}
+
+.repos-ctx-submenu button:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}