root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f1bef9e4221f39a6718bcab20032c41795122658
fusion/packages/dashboard/app/components/TodoView.css
gsxdsm 8a88e23b9c feat(dashboard): UI polish pass — resizable modals, themed scrollbars, settings overhaul 
Modal resize + size persistence
- Extract `useModalResizePersist` hook (ResizeObserver + localStorage),
  apply to Files, Git Manager, GitHub Import, Workflow Steps, Automations
  (ScheduledTasks), and Settings modals. Each gets `resize: both`, sane
  min/max constraints, and a unique storage key.
- Bump default heights so the modals feel less cramped (Git: 92vh,
  Workflow/Automation: 80vh, Settings: 80vh / 1100px).

Scrollbar theme
- Add a global `*::-webkit-scrollbar*` + `scrollbar-color` rule in
  styles.css so chat, document, system stats, file browser, usage
  indicator, etc. inherit the theme. Existing per-component overrides
  (.board, .column-body, .settings-sidebar, planning modal) still win.

Document view
- Collapse "Show hidden" toggle and search input onto the same row as
  the Project Files / Task Documents segmented control. Stack again
  below 768px.

Mailbox / Todos
- Match Todos header treatment to the Mailbox header (typography,
  padding, border).
- Add top spacing above Mailbox Inbox/Outbox/Agents tab bar so the
  vertical gaps balance.

Settings
- Wider, resizable, persisted Settings modal.
- Project Models description and Authentication panel get proper
  horizontal padding.
- Reorder project sidebar so "General" is first.
- Plugins page: clean margins, integrate refresh button, exclude
  bundled runtimes from the "Installed Plugins" list (they were
  appearing twice — once erroring, once in their own section).
- New "Updates" panel with auto-check toggle + "Check now" button
  (frequency control noted as needing a backend schema field).

Background sessions
- Fix stale "AI N" / planning-icon badge: `handleDeleted` in
  `useBackgroundSessions` now writes a tombstone, advances the
  timestamp guard, and broadcasts completion so the cross-tab
  sync store stops resurrecting the deleted session on the next
  merge tick. Added regression test.
- Re-fetch list on SSE reconnect so terminal events fired during a
  network blip don't get permanently lost.

System stats
- Refresh button uses correct single class (was getting both `btn`
  and `btn-icon`, which conflicted on padding/border).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-27 17:26:07 -07:00

456 lines
9.2 KiB
CSS
Raw Blame History

/* === TodoView === */
.todo-view {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.todo-view-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--border);
background: var(--surface);
gap: var(--space-md);
flex-shrink: 0;
}
.todo-view-header h2 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.todo-view-description {
color: var(--text-muted);
font-size: 0.8125rem;
margin: 2px 0 0 0;
}
.todo-view-layout {
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
gap: var(--space-lg);
padding: var(--space-lg);
}
.todo-view-sidebar {
width: calc(var(--space-2xl) * 7 + var(--space-sm));
border-right: calc(var(--space-xs) / 4) solid var(--border);
padding-right: var(--space-lg);
overflow-y: auto;
flex-shrink: 0;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}
.todo-view-main {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
min-width: 0;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}
.todo-view-sidebar::-webkit-scrollbar,
.todo-view-main::-webkit-scrollbar {
width: var(--space-sm);
height: var(--space-sm);
}
.todo-view-sidebar::-webkit-scrollbar-thumb,
.todo-view-main::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text-muted) 45%, transparent);
border-radius: var(--radius-pill);
}
.todo-view-sidebar::-webkit-scrollbar-track,
.todo-view-main::-webkit-scrollbar-track {
background: transparent;
}
.todo-sidebar-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
}
.todo-sidebar-title {
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: calc(var(--space-xs) / 8);
margin: 0;
}
.todo-add-list-btn {
min-height: calc(var(--space-2xl) + var(--space-xs));
min-width: calc(var(--space-2xl) + var(--space-xs));
}
.todo-list-items {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.todo-list-item {
display: flex;
flex-direction: row;
align-items: center;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
gap: var(--space-sm);
color: var(--text-muted);
transition: background var(--transition-fast), color var(--transition-fast);
}
.todo-list-item:hover {
background: var(--card-hover);
color: var(--text);
}
.todo-list-select-btn {
flex: 1;
min-width: 0;
border: 0;
background: none;
color: inherit;
text-align: left;
cursor: pointer;
padding: 0;
}
.todo-list-select-btn:focus-visible {
outline: none;
border-radius: var(--radius-sm);
box-shadow: var(--focus-ring);
}
.todo-list-item--active {
background: var(--surface);
color: var(--text);
font-weight: 500;
}
.todo-list-item-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
}
.todo-list-item-actions {
display: flex;
flex-direction: row;
gap: var(--space-xs);
opacity: 0;
transition: opacity var(--transition-fast);
}
.todo-list-item:hover .todo-list-item-actions,
.todo-list-item:focus-within .todo-list-item-actions,
.todo-list-item--active .todo-list-item-actions {
opacity: 1;
}
.todo-icon-btn {
min-height: calc(var(--space-lg) + var(--space-sm));
min-width: calc(var(--space-lg) + var(--space-sm));
}
.todo-inline-edit-input {
flex: 1;
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
}
.todo-items-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
gap: var(--space-sm);
}
.todo-items-header h3 {
margin: 0;
font-size: calc(var(--space-md) + (var(--space-xs) / 2));
font-weight: 500;
color: var(--text);
}
.todo-add-item-row {
display: flex;
flex-direction: row;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.todo-add-item-row .input {
flex: 1;
}
.todo-items-list {
display: flex;
flex-direction: column;
}
.todo-item {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
gap: var(--space-sm);
border-bottom: calc(var(--space-xs) / 4) solid var(--border);
transition: background var(--transition-fast);
}
.todo-item:hover {
background: var(--card-hover);
}
.todo-item-checkbox {
margin: 0;
width: var(--space-lg);
height: var(--space-lg);
accent-color: var(--todo);
cursor: pointer;
}
.todo-item-text {
flex: 1;
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
color: var(--text);
cursor: pointer;
word-break: break-word;
background: none;
border: 0;
padding: 0;
text-align: left;
}
.todo-item-text:focus-visible {
outline: none;
border-radius: var(--radius-sm);
box-shadow: var(--focus-ring-strong);
}
.todo-item-text--completed {
text-decoration: line-through;
color: var(--text-muted);
}
.todo-item-actions {
display: flex;
flex-direction: row;
gap: var(--space-xs);
opacity: 0;
transition: opacity var(--transition-fast);
}
.todo-item:hover .todo-item-actions,
.todo-item:focus-within .todo-item-actions {
opacity: 1;
}
.todo-item-reorder-btns {
display: flex;
flex-direction: row;
gap: 0;
}
.todo-item-reorder-btn {
min-height: var(--space-xl);
min-width: var(--space-xl);
}
.todo-agent-picker-trigger {
position: relative;
}
.todo-agent-picker-dropdown {
position: absolute;
right: 0;
top: 100%;
z-index: 50;
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-top: var(--space-xs);
min-width: calc(var(--space-2xl) * 6 + var(--space-md));
max-height: calc(var(--space-2xl) * 7 + var(--space-md));
overflow-y: auto;
padding: var(--space-xs);
border: calc(var(--space-xs) / 4) solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.todo-agent-picker-item {
width: 100%;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
padding: var(--space-sm);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-sm);
text-align: left;
cursor: pointer;
transition: background var(--transition-fast);
}
.todo-agent-picker-item:hover {
background: var(--card-hover);
}
.todo-agent-picker-item:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
.todo-agent-picker-role {
color: var(--text-muted);
font-size: calc(var(--space-md) - (var(--space-xs) / 4));
text-transform: uppercase;
letter-spacing: calc(var(--space-xs) / 8);
}
.todo-agent-picker-loading,
.todo-agent-picker-empty {
color: var(--text-muted);
padding: var(--space-sm);
font-size: calc(var(--space-md) + (var(--space-xs) / 8));
}
.todo-error-banner {
border: calc(var(--space-xs) / 4) solid color-mix(in srgb, var(--color-error) 35%, transparent);
background: color-mix(in srgb, var(--color-error) 10%, transparent);
color: var(--color-error);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.todo-error-message {
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
}
.todo-empty-state,
.todo-loading {
color: var(--text-muted);
padding: var(--space-2xl);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
flex: 1;
}
.todo-loading-icon {
animation: spin calc(var(--transition-slow) * 4) linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.todo-view {
padding: var(--space-md);
}
.todo-view-layout {
flex-direction: column;
}
.todo-view-sidebar {
width: 100%;
border-right: none;
border-bottom: calc(var(--space-xs) / 4) solid var(--border);
padding-right: 0;
padding-bottom: var(--space-md);
max-height: calc(var(--space-2xl) * 6 + var(--space-sm));
}
.todo-view-main {
width: 100%;
}
.todo-list-item,
.todo-list-select-btn,
.todo-add-list-btn,
.todo-icon-btn,
.todo-item,
.todo-item-reorder-btn,
.todo-add-item-row .btn {
min-height: calc(var(--space-2xl) + var(--space-xs));
}
.todo-add-item-row {
flex-wrap: wrap;
}
.todo-add-item-row .btn {
width: 100%;
}
.todo-list-item-actions,
.todo-item-actions {
opacity: 1;
}
.todo-item-checkbox {
width: calc(var(--space-2xl) + var(--space-xs));
height: calc(var(--space-2xl) + var(--space-xs));
}
.todo-agent-picker-trigger {
position: static;
}
.todo-agent-picker-dropdown {
left: 0;
right: 0;
min-width: 100%;
max-height: calc(var(--space-2xl) * 8);
}
.todo-agent-picker-item {
min-height: calc(var(--space-2xl) + var(--space-xs));
}
}
Reference in New Issue View Git Blame Copy Permalink