feature: new changes!

2026-03-25 20:09:32 -03:00
parent 26f61077b8
commit f9f3d95406
25 changed files with 964 additions and 696 deletions
--- a/packages/frontend/src/components/Sidebar.css
+++ b/packages/frontend/src/components/Sidebar.css
@@ -0,0 +1,124 @@
+/* ── Sidebar ────────────────────────────────────────────── */
+
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 20px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+}
+
+.sidebar-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.3px;
+  text-decoration: none;
+  display: inline-block;
+  transition: color 0.15s ease;
+  padding-bottom: 10px;
+}
+
+.sidebar-title:hover {
+  color: var(--accent);
+}
+
+.btn-new {
+  margin: 12px;
+  padding: 10px 14px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+  text-align: left;
+}
+
+.btn-new:hover {
+  background: var(--accent-hover);
+}
+
+.sidebar-section-label {
+  padding: 8px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
+.sidebar-list {
+  list-style: none;
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 8px 8px;
+}
+
+.sidebar-empty {
+  padding: 8px;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 13px;
+  transition: background 0.1s, color 0.1s;
+  user-select: none;
+}
+
+.sidebar-item:hover {
+  background: var(--bg-surface-2);
+  color: var(--text);
+}
+
+.sidebar-item.selected {
+  background: var(--accent-dim);
+  color: var(--text);
+}
+
+.sidebar-icon {
+  font-size: 12px;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.status-done {
+  color: var(--green);
+}
+
+.status-error {
+  color: var(--red);
+}
+
+.status-running {
+  color: var(--accent);
+}
+
+.status-pending {
+  color: var(--text-dim);
+}
+
+.sidebar-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}