feat: unify workspace navigation into a tab bar

src/app/app.routes.ts

@@ -36,16 +36,6 @@ export const routes: Routes = [
     loadComponent: () => import('./components/workspace/edit-workspace').then(m => m.EditWorkspaceComponent),
     canActivate: [authGuard]
   },
-  {
-    path: 'workspaces/:id/settings/members',
-    component: WorkspaceMembersComponent,
-    canActivate: [authGuard]
-  },
-  {
-    path: 'workspaces/:id/settings/integrations',
-    component: WorkspaceIntegrationsComponent,
-    canActivate: [authGuard]
-  },
   {
     path: 'workspaces/:id',
     loadComponent: () => import('./components/workspace/workspace-details/workspace-details').then(m => m.WorkspaceDetailsComponent),
@@ -55,6 +45,16 @@ export const routes: Routes = [
         path: 'decisions',
         loadComponent: () => import('./components/decision-list/decision-list.component').then(m => m.DecisionListComponent)
       },
+      {
+        path: 'settings/members',
+        component: WorkspaceMembersComponent,
+        canActivate: [authGuard]
+      },
+      {
+        path: 'settings/integrations',
+        component: WorkspaceIntegrationsComponent,
+        canActivate: [authGuard]
+      },
       {
         path: 'decisions/new',
         loadComponent: () => import('./components/decision-form/decision-form.component').then(m => m.DecisionFormComponent)

src/app/components/decision-list/decision-list.component.css

@@ -129,3 +129,45 @@
     padding: 2px 6px;
     border-radius: 4px;
 }
+
+.error-banner {
+    background-color: #fee2e2;
+    color: #b91c1c;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border: 1px solid #fecaca;
+    font-size: 14px;
+}
+
+.empty-state {
+    padding: 48px;
+    text-align: center;
+    background: #f9f9f9;
+    border-radius: 12px;
+    border: 2px dashed #e5e5e5;
+    color: #666;
+}
+
+.loading-state {
+    padding: 40px;
+    text-align: center;
+    color: #666;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid #e5e5e5;
+    border-top-color: #0a0a0a;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}

src/app/components/decision-list/decision-list.component.html

@@ -7,6 +7,14 @@ <h2>Decisions</h2>
         </div>
     </div>
 
+    <div *ngIf="error" class="error-banner">
+        {{ error }}
+    </div>
+
+    <div *ngIf="!(decisions$ | async) && !error" class="loading-state">
+        <span class="spinner"></span> Loading decisions...
+    </div>
+
     <div class="decision-list" *ngIf="decisions$ | async as decisions">
         <div *ngIf="decisions.length === 0" class="empty-state">
             No decisions found. Create one to get started!

src/app/components/decision-list/decision-list.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Decision } from '../../models/decision.model';
 import { DecisionService } from '../../services/decision.service';
-import { Observable } from 'rxjs';
+import { Observable, Subject, takeUntil, startWith, switchMap, catchError, of } from 'rxjs';
 
 @Component({
     selector: 'app-decision-list',
@@ -12,8 +12,11 @@ import { Observable } from 'rxjs';
     templateUrl: './decision-list.component.html',
     styleUrls: ['./decision-list.component.css']
 })
-export class DecisionListComponent implements OnInit {
+export class DecisionListComponent implements OnInit, OnDestroy {
     decisions$: Observable<Decision[]> | undefined;
+    error: string | null = null;
+    private refresh$ = new Subject<void>();
+    private destroy$ = new Subject<void>();
     private workspaceId: string | null = null;
 
     constructor(
@@ -24,15 +27,37 @@ export class DecisionListComponent implements OnInit {
     ngOnInit(): void {
         this.workspaceId = this.getWorkspaceIdFromRoute();
         if (this.workspaceId) {
-            this.decisions$ = this.decisionService.getDecisions(this.workspaceId);
+            this.decisions$ = this.refresh$.pipe(
+                startWith(undefined),
+                switchMap(() => this.decisionService.getDecisions(this.workspaceId!).pipe(
+                    catchError(err => {
+                        this.error = 'Failed to load decisions. Please try again.';
+                        return of([]);
+                    })
+                ))
+            );
         }
     }
 
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
     deleteDecision(id: string): void {
         if (confirm('Are you sure you want to delete this decision?') && this.workspaceId) {
-            this.decisionService.deleteDecision(this.workspaceId, id).subscribe(() => {
-                this.decisions$ = this.decisionService.getDecisions(this.workspaceId!);
-            });
+            this.error = null;
+            this.decisionService.deleteDecision(this.workspaceId, id)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe({
+                    next: () => {
+                        this.refresh$.next();
+                    },
+                    error: (err) => {
+                        console.error('Delete failed', err);
+                        this.error = 'Failed to delete decision. Please try again.';
+                    }
+                });
         }
     }
 

src/app/components/workspace/create-workspace.css

@@ -450,3 +450,16 @@ label {
     transform: translateY(0);
   }
 }
+
+.spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #ffffff;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

src/app/components/workspace/create-workspace.html

@@ -96,8 +96,9 @@ <h1>Create Workspace</h1>
 
         <div class="form-actions">
           <button type="submit" [disabled]="isSubmitting || !workspaceForm.form.valid" class="premium-btn">
+            <span *ngIf="isSubmitting" class="spinner" aria-hidden="true"></span>
             <span>{{ isSubmitting ? 'Creating...' : 'Create Workspace' }}</span>
-            <span aria-hidden="true">→</span>
+            <span *ngIf="!isSubmitting" aria-hidden="true">→</span>
           </button>
         </div>
       </form>

src/app/components/workspace/create-workspace.ts

@@ -88,8 +88,8 @@ export class CreateWorkspace {
           this.error = 'An error occurred while loading the dashboard.';
         });
       },
-      error: () => {
-        this.error = 'Unable to create workspace. Please try again.';
+      error: (err) => {
+        this.error = err.message || 'Unable to create workspace. Please try again.';
         this.isSubmitting = false;
       }
     });

src/app/components/workspace/workspace-details/workspace-details.css

@@ -178,41 +178,46 @@ h1 {
 
 .workspace-nav {
   max-width: 1160px;
-  margin: 0 auto 20px;
+  margin: 0 auto 12px;
   display: flex;
-  gap: 8px;
-  padding: 6px;
-  border-radius: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  background: rgba(255, 255, 255, 0.86);
-  backdrop-filter: blur(5px);
+  gap: 24px;
+  padding: 0 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background: transparent;
 }
 
 .workspace-nav a {
   flex: 0 0 auto;
-  min-height: 36px;
-  padding: 0 14px;
+  min-height: 44px;
+  padding: 0 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  border-radius: 10px;
-  color: #2a2a2a;
+  color: #666666;
   font-size: 14px;
   font-weight: 600;
-  border: 1px solid transparent;
-  transition: border-color 0.2s ease, background 0.2s ease;
+  position: relative;
+  transition: color 0.2s ease;
 }
 
 .workspace-nav a:hover {
-  border-color: rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.7);
+  color: #000000;
 }
 
 .workspace-nav a.active {
-  color: #ffffff;
-  background: #050505;
-  border-color: #050505;
+  color: #000000;
+}
+
+.workspace-nav a.active::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #000000;
+  border-radius: 2px 2px 0 0;
 }
 
 .content-shell {

src/app/components/workspace/workspace-details/workspace-details.html

@@ -37,8 +37,8 @@ <h1>{{ workspace.name }}</h1>
 
   <nav class="workspace-nav">
     <a routerLink="decisions" routerLinkActive="active">Decisions</a>
-    <a [routerLink]="['/workspaces', workspace.id, 'settings', 'members']">Members</a>
-    <a [routerLink]="['/workspaces', workspace.id, 'settings', 'integrations']">Integrations</a>
+    <a routerLink="settings/members" routerLinkActive="active">Members</a>
+    <a routerLink="settings/integrations" routerLinkActive="active">Integrations</a>
   </nav>
 
   <section class="content-shell">