andrewadmin/graph-requirements-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
andrew
2026-03-18 06:40:53 -05:00
commit dd227be9b0
53 changed files with 18575 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

668
frontend/src/app/features/detail/detail-panel.component.scss Normal file
View File

@@ -0,0 +1,668 @@
.detail-panel {
position: fixed;
right: 0;
top: 48px;
bottom: 0;
width: 420px;
background: var(--bg-secondary);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
z-index: 20;
overflow: hidden;
}
.panel-header {
padding: 16px;
border-bottom: 1px solid var(--border);
}
.header-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.node-id {
font-weight: 600;
font-size: 13px;
color: var(--accent);
}
.node-type {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.close-btn {
margin-left: auto;
background: none;
border: none;
color: var(--text-secondary);
font-size: 18px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
&:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
}
.node-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
line-height: 1.3;
}
.badges-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
color: #fff;
font-weight: 500;
text-transform: capitalize;
}
.phase-badge {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.issue-badge {
background: #1f6feb;
color: #fff;
text-decoration: none;
cursor: pointer;
&:hover {
background: #388bfd;
}
}
.panel-body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.section {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.child-count {
color: var(--text-secondary);
font-weight: 400;
}
.quality-badges {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.quality-badge {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
font-weight: 700;
font-size: 13px;
&.pass {
background: rgba(63, 185, 80, 0.15);
color: var(--green);
border: 1px solid rgba(63, 185, 80, 0.3);
}
&.fail {
background: rgba(218, 54, 51, 0.15);
color: var(--red);
border: 1px solid rgba(218, 54, 51, 0.3);
}
&.toggle {
cursor: pointer;
transition: all 0.15s ease;
&:hover {
transform: scale(1.15);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}
}
&.auto {
opacity: 0.7;
cursor: default;
}
}
.validation-list {
margin: 6px 0;
}
.validation-item {
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
margin-bottom: 4px;
}
.error-item {
background: rgba(218, 54, 51, 0.1);
color: var(--red);
}
.warning-item {
background: rgba(210, 153, 34, 0.1);
color: var(--yellow);
}
.validation-pass {
font-size: 12px;
color: var(--green);
margin: 6px 0;
}
.validation-warn {
font-size: 12px;
color: var(--yellow);
margin: 6px 0;
}
.create-error {
font-size: 12px;
color: var(--red);
background: rgba(218, 54, 51, 0.1);
padding: 6px 10px;
border-radius: 4px;
}
.description {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
white-space: pre-wrap;
}
.code-block {
font-size: 12px;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
color: var(--text-secondary);
white-space: pre-wrap;
overflow-x: auto;
max-height: 300px;
overflow-y: auto;
&.mono {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}
}
.children-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.child-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
&.clickable {
cursor: pointer;
&:hover {
border-color: var(--accent);
background: rgba(88, 166, 255, 0.05);
}
}
}
.child-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.child-id {
font-size: 11px;
color: var(--accent);
font-weight: 600;
}
.child-priority {
font-size: 10px;
padding: 1px 6px;
border-radius: 8px;
color: #fff;
text-transform: capitalize;
}
.child-quality {
margin-left: auto;
display: flex;
gap: 3px;
font-size: 10px;
font-weight: 700;
span.pass { color: var(--green); }
span.fail { color: var(--red); opacity: 0.5; }
}
.child-title {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
margin-bottom: 2px;
}
.child-desc {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.child-status {
font-size: 11px;
text-transform: capitalize;
}
.no-children {
font-size: 13px;
color: var(--text-muted);
padding: 8px 0;
}
.meta-section {
border-bottom: none;
}
.meta-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
}
.meta-label {
font-size: 12px;
color: var(--text-muted);
}
.meta-value {
font-size: 12px;
color: var(--text-secondary);
}
// Edit styles
.edit-input,
.edit-textarea,
.edit-select {
width: 100%;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
padding: 8px 10px;
font-size: 13px;
font-family: inherit;
outline: none;
margin-bottom: 8px;
&:focus {
border-color: var(--accent);
}
}
.title-input {
font-size: 16px;
font-weight: 600;
}
.edit-textarea {
resize: vertical;
min-height: 60px;
&.mono {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 12px;
}
}
.edit-select {
cursor: pointer;
}
.edit-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
label {
font-size: 12px;
color: var(--text-muted);
min-width: 60px;
}
.edit-select, .edit-input {
flex: 1;
margin-bottom: 0;
}
}
.form-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
// Actions bar
.panel-actions {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--bg-secondary);
}
.action-btn {
padding: 6px 14px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
transition: all 0.15s ease;
&:hover {
color: var(--text-primary);
border-color: var(--border-light);
}
&.primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
&:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
}
&.danger {
color: var(--red);
&:hover {
background: rgba(218, 54, 51, 0.15);
border-color: var(--red);
}
}
&.small {
padding: 4px 10px;
font-size: 12px;
}
}
.add-child-form {
background: var(--bg-card);
}
// Link management styles
.links-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.link-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 6px;
border-left: 3px solid #bc8cff;
&.clickable {
cursor: pointer;
&:hover {
border-color: #bc8cff;
background: rgba(188, 140, 255, 0.08);
}
}
}
.link-id {
color: #bc8cff;
font-weight: 500;
font-size: 13px;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
.link-remove {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
padding: 2px 6px;
border-radius: 4px;
&:hover {
color: var(--red);
background: rgba(218, 54, 51, 0.15);
}
}
.add-link-form {
margin-top: 8px;
}
// Typeahead dropdown
.typeahead-container {
position: relative;
}
.typeahead-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 6px 6px;
max-height: 200px;
overflow-y: auto;
z-index: 20;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.typeahead-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
cursor: pointer;
border-bottom: 1px solid var(--border);
&:last-child {
border-bottom: none;
}
&:hover, &.highlighted {
background: rgba(188, 140, 255, 0.1);
}
}
.typeahead-id {
color: #bc8cff;
font-weight: 600;
font-size: 12px;
white-space: nowrap;
}
.typeahead-title {
color: var(--text-secondary);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// History styles
.clickable-title {
cursor: pointer;
user-select: none;
&:hover {
color: var(--text-primary);
}
}
.toggle-arrow {
margin-left: auto;
font-size: 10px;
color: var(--text-secondary);
}
.history-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
.history-item {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
&:hover {
border-color: var(--accent);
background: rgba(88, 166, 255, 0.05);
}
&.active {
border-color: var(--accent);
background: rgba(88, 166, 255, 0.1);
}
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.history-version {
font-weight: 600;
font-size: 12px;
color: var(--accent);
}
.history-time {
font-size: 11px;
color: var(--text-muted);
}
.history-summary {
font-size: 12px;
color: var(--text-secondary);
}
.history-detail {
margin-top: 8px;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
}
.history-detail-title {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.history-fields {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.history-field {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
&.changed {
background: rgba(210, 153, 34, 0.1);
border-left: 3px solid var(--yellow);
}
}
.history-field-label {
color: var(--text-muted);
font-size: 11px;
display: block;
margin-bottom: 2px;
}
.history-field-value {
color: var(--text-primary);
}
.history-field-pre {
color: var(--text-primary);
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 11px;
white-space: pre-wrap;
margin: 4px 0 0;
max-height: 150px;
overflow-y: auto;
}