update dash

templates/dashboard.html

@@ -26,8 +26,10 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            position: sticky;
+            position: fixed;
             top: 0;
+            left: 0;
+            right: 0;
             background: #0a0a0a;
             z-index: 100;
         }
@@ -59,13 +61,90 @@
         .logout-btn:hover {
             color: #e5e5e5;
         }
-        .main {
-            max-width: 700px;
-            margin: 0 auto;
-            padding: 2rem 1.5rem 4rem;
+        .layout {
+            display: flex;
+            padding-top: 57px;
+            min-height: 100vh;
+        }
+        .sidebar {
+            width: 280px;
+            border-right: 1px solid #1a1a1a;
+            padding: 1.5rem;
+            position: fixed;
+            top: 57px;
+            bottom: 0;
+            overflow-y: auto;
+        }
+        .sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid #1a1a1a;
+        }
+        .sidebar-title {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: #666;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .sidebar-count {
+            font-size: 0.75rem;
+            color: #444;
+        }
+        .spaces-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
         }
-        .section {
-            margin-bottom: 3rem;
+        .space-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.5rem 0.75rem;
+            border-radius: 6px;
+            transition: background 0.15s;
+        }
+        .space-item:hover {
+            background: #141414;
+        }
+        .space-name {
+            font-size: 0.8125rem;
+            color: #999;
+        }
+        .space-item:hover .space-name {
+            color: #e5e5e5;
+        }
+        .space-status {
+            font-size: 0.625rem;
+            padding: 0.125rem 0.375rem;
+            border-radius: 3px;
+            text-transform: uppercase;
+            letter-spacing: 0.03em;
+        }
+        .space-status.running {
+            background: #0a2a0a;
+            color: #22c55e;
+        }
+        .space-status.building {
+            background: #2a2a0a;
+            color: #eab308;
+        }
+        .space-status.stopped, .space-status.paused {
+            background: #1a1a1a;
+            color: #666;
+        }
+        .space-status.error, .space-status.runtime_error, .space-status.build_error {
+            background: #2a0a0a;
+            color: #ef4444;
+        }
+        .main {
+            flex: 1;
+            margin-left: 280px;
+            max-width: 800px;
+            padding: 1.5rem 2rem 4rem;
         }
         .section-header {
             display: flex;
@@ -86,21 +165,42 @@
             font-size: 0.75rem;
             color: #444;
         }
-        .spaces-grid {
+        .controls {
             display: flex;
-            flex-wrap: wrap;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .control-group {
+            display: flex;
+            align-items: center;
             gap: 0.5rem;
         }
-        .space-chip {
-            font-size: 0.8125rem;
-            padding: 0.375rem 0.75rem;
-            background: #141414;
+        .control-label {
+            font-size: 0.6875rem;
+            color: #555;
+            text-transform: uppercase;
+            letter-spacing: 0.03em;
+        }
+        .control-options {
+            display: flex;
+            gap: 0.25rem;
+        }
+        .control-btn {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.5rem;
+            background: transparent;
             border: 1px solid #222;
             border-radius: 4px;
+            color: #666;
+            cursor: pointer;
+            transition: all 0.15s;
+        }
+        .control-btn:hover {
+            border-color: #333;
             color: #999;
-            transition: border-color 0.2s, color 0.2s;
         }
-        .space-chip:hover {
+        .control-btn.active {
+            background: #1a1a1a;
             border-color: #333;
             color: #e5e5e5;
         }
@@ -112,7 +212,7 @@
             padding: 1rem 0;
             border-bottom: 1px solid #141414;
             display: block;
-            transition: background 0.2s;
+            transition: background 0.15s;
         }
         .feed-item:first-child {
             padding-top: 0;
@@ -126,6 +226,29 @@
             padding-left: 1rem;
             padding-right: 1rem;
         }
+        .feed-item.status-open {
+            border-left: 2px solid #22c55e;
+            padding-left: 1rem;
+            margin-left: -1rem;
+        }
+        .feed-item.status-closed,
+        .feed-item.status-merged {
+            border-left: 2px solid #333;
+            padding-left: 1rem;
+            margin-left: -1rem;
+        }
+        .feed-item.is-report {
+            border-left-color: #ef4444;
+        }
+        .feed-item.is-report .feed-title {
+            color: #ef4444;
+        }
+        .feed-item.responded {
+            opacity: 0.5;
+        }
+        .feed-item.is-own {
+            opacity: 0.35;
+        }
         .feed-meta {
             display: flex;
             align-items: center;
@@ -191,74 +314,6 @@
             height: 16px;
             border-radius: 50%;
         }
-        .empty {
-            text-align: center;
-            padding: 3rem 1rem;
-            color: #444;
-            font-size: 0.875rem;
-        }
-        .controls {
-            display: flex;
-            gap: 1.5rem;
-            margin-bottom: 1rem;
-        }
-        .control-group {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .control-label {
-            font-size: 0.6875rem;
-            color: #555;
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-        }
-        .control-options {
-            display: flex;
-            gap: 0.25rem;
-        }
-        .control-btn {
-            font-size: 0.75rem;
-            padding: 0.25rem 0.5rem;
-            background: transparent;
-            border: 1px solid #222;
-            border-radius: 4px;
-            color: #666;
-            cursor: pointer;
-            transition: all 0.15s;
-        }
-        .control-btn:hover {
-            border-color: #333;
-            color: #999;
-        }
-        .control-btn.active {
-            background: #1a1a1a;
-            border-color: #333;
-            color: #e5e5e5;
-        }
-        .feed-item.status-open {
-            border-left: 2px solid #22c55e;
-            padding-left: 1rem;
-            margin-left: -1rem;
-        }
-        .feed-item.status-closed,
-        .feed-item.status-merged {
-            border-left: 2px solid #333;
-            padding-left: 1rem;
-            margin-left: -1rem;
-        }
-        .feed-item.is-report {
-            border-left-color: #ef4444;
-        }
-        .feed-item.is-report .feed-title {
-            color: #ef4444;
-        }
-        .feed-item.responded {
-            opacity: 0.5;
-        }
-        .feed-item.is-own {
-            opacity: 0.35;
-        }
         .responded-badge,
         .own-badge {
             font-size: 0.625rem;
@@ -270,6 +325,12 @@
             color: #444;
             margin-left: auto;
         }
+        .empty {
+            text-align: center;
+            padding: 3rem 1rem;
+            color: #444;
+            font-size: 0.875rem;
+        }
     </style>
 </head>
 <body>
@@ -284,28 +345,36 @@
         </div>
     </nav>
 
-    <main class="main">
-        <section class="section">
-            <div class="section-header">
-                <h2 class="section-title">Your Spaces</h2>
-                <span class="section-count">{{ spaces|length }}</span>
+    <div class="layout">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h2 class="sidebar-title">Spaces</h2>
+                <span class="sidebar-count">{{ spaces|length }}</span>
             </div>
             {% if spaces %}
-            <div class="spaces-grid">
+            <div class="spaces-list">
                 {% for space in spaces %}
-                <a href="https://huggingface.co/spaces/{{ space.id }}" target="_blank" class="space-chip">
-                    {{ space.id.split('/')[-1] }}
+                <a href="https://huggingface.co/spaces/{{ space.id }}" target="_blank" class="space-item">
+                    <span class="space-name">{{ space.id.split('/')[-1] }}</span>
+                    {% set status = space.runtime.stage|default('stopped')|lower if space.runtime else 'stopped' %}
+                    <span class="space-status {{ status }}">
+                        {% if status == 'running' %}running
+                        {% elif status == 'building' %}building
+                        {% elif status == 'runtime_error' or status == 'build_error' %}error
+                        {% elif status == 'paused' %}paused
+                        {% else %}stopped{% endif %}
+                    </span>
                 </a>
                 {% endfor %}
             </div>
             {% else %}
-            <div class="empty">No spaces found</div>
+            <div class="empty">No spaces</div>
             {% endif %}
-        </section>
+        </aside>
 
-        <section class="section">
+        <main class="main">
             <div class="section-header">
-                <h2 class="section-title">Discussions Feed</h2>
+                <h2 class="section-title">Discussions</h2>
                 <span class="section-count">{{ discussions|length }}</span>
             </div>
             <div class="controls">
@@ -363,9 +432,9 @@
                 {% endfor %}
             </div>
             {% else %}
-            <div class="empty">No discussions yet</div>
+            <div class="empty">No discussions</div>
             {% endif %}
-        </section>
-    </main>
+        </main>
+    </div>
 </body>
 </html>