mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
feat: Add collapsible sections and enhance layout for discussion and summary tabs
This commit is contained in:
catlog22
@@ -302,9 +302,14 @@
|
||||
|
||||
.collapsible-content {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.collapsible-content.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Legacy .open class support */
|
||||
.collapsible-content.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -406,6 +406,7 @@
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
@@ -3440,6 +3441,309 @@
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Discussion Round using collapsible-section pattern */
|
||||
.discussion-round.collapsible-section {
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: hsl(var(--card));
|
||||
}
|
||||
|
||||
.discussion-round.collapsible-section .collapsible-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.discussion-round.collapsible-section .collapsible-header:hover {
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
}
|
||||
|
||||
.discussion-round.collapsible-section .collapsible-content {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid hsl(var(--border) / 0.5);
|
||||
background: hsl(var(--card));
|
||||
}
|
||||
|
||||
.discussion-round.collapsible-section .collapsible-content.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ========== Summary Tab Content ========== */
|
||||
.summary-tab-content .summary-section {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
background: hsl(var(--card));
|
||||
}
|
||||
|
||||
.summary-section-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.convergence-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.convergence-level {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
text-transform: capitalize;
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.convergence-level.full { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
|
||||
.convergence-level.partial { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
|
||||
.convergence-level.low { background: hsl(var(--error) / 0.15); color: hsl(var(--error)); }
|
||||
|
||||
.convergence-rec {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
text-transform: capitalize;
|
||||
background: hsl(var(--info) / 0.15);
|
||||
color: hsl(var(--info));
|
||||
}
|
||||
|
||||
.convergence-rec.converged { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
|
||||
.convergence-rec.continue { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); }
|
||||
|
||||
/* Summary collapsible Solutions section */
|
||||
.summary-section.collapsible-section {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.summary-section.collapsible-section .collapsible-header {
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--card));
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.summary-section.collapsible-section .collapsible-header:hover {
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
}
|
||||
|
||||
.summary-section.collapsible-section .collapsible-content {
|
||||
padding: 1rem;
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
border-top: 1px solid hsl(var(--border) / 0.5);
|
||||
}
|
||||
|
||||
.solution-summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
||||
}
|
||||
|
||||
.solution-summary-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.solution-num {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--primary));
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.solution-name {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.feasibility-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
background: hsl(var(--success) / 0.15);
|
||||
color: hsl(var(--success));
|
||||
}
|
||||
|
||||
/* ========== Context Tab Content (Multi-CLI) ========== */
|
||||
.context-tab-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.context-tab-content .context-section {
|
||||
padding: 1rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
background: hsl(var(--card));
|
||||
}
|
||||
|
||||
.context-tab-content .context-section-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.context-tab-content .context-description {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.context-tab-content .constraints-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.context-tab-content .constraints-list li {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.context-tab-content .path-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.context-tab-content .path-tag {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 4px;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.context-tab-content .session-id-code {
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Context tab collapsible sections */
|
||||
.context-tab-content .context-section.collapsible-section {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-tab-content .context-section.collapsible-section .collapsible-header {
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--card));
|
||||
}
|
||||
|
||||
.context-tab-content .context-section.collapsible-section .collapsible-header:hover {
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
}
|
||||
|
||||
.context-tab-content .context-section.collapsible-section .collapsible-content {
|
||||
padding: 1rem;
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
border-top: 1px solid hsl(var(--border) / 0.5);
|
||||
}
|
||||
|
||||
.context-tab-content .files-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.context-tab-content .file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0;
|
||||
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.context-tab-content .file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.context-tab-content .file-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.context-tab-content .file-item code {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
background: hsl(var(--muted));
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.context-tab-content .file-reason {
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-size: 0.75rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.context-tab-content .deps-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
font-size: 0.8rem;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.context-tab-content .deps-list li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.context-tab-content .risks-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.context-tab-content .risk-item {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--warning));
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.context-tab-content .json-content {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
background: hsl(var(--background));
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ========== Association Section Styles ========== */
|
||||
.association-section {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
Reference in New Issue
Block a user