feat(05-03): Exercise research frontend integration

- Add ExerciseResearchPanel component with Get Research button, loading state, summary display, and source links
- Add ExerciseEncyclopediaPage with exercise list and integrated research panel
- Wire encyclopedia view into App.jsx navigation
- Add encyclopedia nav button to Dashboard
- Add CSS for research panel and encyclopedia search

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-02 19:20:40 +01:00
parent 53f026aee2
commit 83ccd6c601
5 changed files with 408 additions and 0 deletions
+166
View File
@@ -484,3 +484,169 @@
justify-content: space-between;
}
}
/* Encyclopedia search input */
.encyclopedia-search {
width: 100%;
padding: 0.625rem 0.75rem;
border: 1px solid #ddd;
border-radius: 0.25rem;
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-height: 44px;
box-sizing: border-box;
}
.encyclopedia-search:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
/* Selected exercise highlight */
.edit-exercise-card.exercise-selected {
border: 2px solid #007bff;
}
/* Expanded exercise detail */
.exercise-detail-expanded {
border-top: 1px solid #eee;
padding-top: 1rem;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.exercise-instructions h4 {
margin: 0 0 0.5rem;
font-size: 0.9rem;
color: #555;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.exercise-instructions p {
margin: 0;
font-size: 0.9rem;
color: #444;
line-height: 1.6;
}
/* Research panel */
.research-panel {
background: #f8f9fa;
border-radius: 0.375rem;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.research-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.research-panel-title {
margin: 0;
font-size: 0.9rem;
color: #555;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.research-btn {
padding: 0.4rem 0.9rem;
font-size: 0.875rem;
min-height: 36px;
}
.research-loading {
display: flex;
align-items: center;
gap: 0.75rem;
color: #666;
font-size: 0.9rem;
padding: 0.5rem 0;
}
.research-spinner {
width: 18px;
height: 18px;
border: 2px solid #ddd;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
}
.research-error {
display: flex;
align-items: center;
justify-content: space-between;
background: #f8d7da;
color: #721c24;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.research-results {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.research-summary h4,
.research-sources h4 {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: #555;
font-weight: 600;
}
.research-summary p {
margin: 0;
font-size: 0.9rem;
color: #333;
line-height: 1.6;
}
.research-sources-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.research-source-item {
background: white;
border: 1px solid #e0e0e0;
border-radius: 0.25rem;
padding: 0.625rem 0.75rem;
}
.research-source-link {
color: #007bff;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
display: block;
margin-bottom: 0.25rem;
word-break: break-word;
}
.research-source-link:hover {
text-decoration: underline;
}
.research-source-snippet {
margin: 0;
font-size: 0.825rem;
color: #555;
line-height: 1.5;
}