feat: Search & Edit Workspace UI Redesign

src/app/app.routes.ts

@@ -22,6 +22,11 @@ export const routes: Routes = [
     component: CreateWorkspace,
     canActivate: [authGuard]
   },
+  {
+    path: 'workspaces/:id/edit',
+    loadComponent: () => import('./components/workspace/edit-workspace').then(m => m.EditWorkspaceComponent),
+    canActivate: [authGuard]
+  },
   {
     path: 'workspaces/:id/settings/members',
     component: WorkspaceMembersComponent,

src/app/components/dashboard/dashboard.html

@@ -37,7 +37,7 @@ <h3>{{ ws.name }}</h3>
         <small>Created: {{ ws.createdDate | date: 'mediumDate' }}</small>
         <div class="card-actions">
           <a [routerLink]="['/workspaces', ws.id, 'decisions']" class="action-btn open-btn">Open</a>
-          <button type="button" class="action-btn edit-btn" (click)="editWorkspace(ws)">Edit</button>
+          <a [routerLink]="['/workspaces', ws.id, 'edit']" class="action-btn edit-btn">Edit</a>
           <button type="button" class="action-btn delete-btn" (click)="deleteWorkspace(ws)">Delete</button>
         </div>
       </article>

src/app/components/dashboard/dashboard.ts

@@ -52,27 +52,6 @@ export class Dashboard implements OnInit {
     this.loadSignals();
   }
 
-  editWorkspace(workspace: Workspace) {
-    const updatedName = window.prompt('Edit workspace name', workspace.name)?.trim();
-    if (!updatedName) {
-      return;
-    }
-
-    const updatedDescriptionInput = window.prompt('Edit workspace description', workspace.description ?? '');
-    if (updatedDescriptionInput === null) {
-      return;
-    }
-
-    const updatedDescription = updatedDescriptionInput.trim();
-
-    this.workspaceService.updateWorkspace(workspace.id, updatedName, updatedDescription).subscribe(updatedWorkspace => {
-      if (!updatedWorkspace) {
-        return;
-      }
-      this.workspaces = this.workspaces.map(ws => ws.id === updatedWorkspace.id ? updatedWorkspace : ws);
-    });
-  }
-
   deleteWorkspace(workspace: Workspace) {
     const confirmed = window.confirm(`Delete workspace "${workspace.name}"?`);
     if (!confirmed) {

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

@@ -1,69 +1,208 @@
-.create-workspace-container {
-  max-width: 480px;
-  margin: 40px auto;
-  padding: 24px;
-  border: 1px solid #d8dee4;
+.page-container {
+  min-height: 100vh;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.top-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 32px;
+  background: #ffffff;
+  border-bottom: 1px solid #e5e5e5;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #000000;
+}
+
+.brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #000000;
+  color: #ffffff;
   border-radius: 8px;
-  background: #fff;
+}
+
+.brand-name {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+.back-nav-btn {
+  color: #000000;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  background: #ffffff;
+  border: 1px solid #e5e5e5;
+}
+
+.back-nav-btn:hover {
+  background: #f3f3f3;
+  border-color: #cccccc;
+}
+
+.form-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 64px 20px;
+}
+
+.form-card {
+  width: 100%;
+  max-width: 480px;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e5e5;
+  padding: 40px;
+}
+
+.form-header {
+  margin-bottom: 32px;
+  text-align: center;
 }
 
 h2 {
-  margin-top: 0;
-  margin-bottom: 8px;
+  margin: 0 0 8px 0;
+  color: #000000;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
 }
 
-p {
-  margin-top: 0;
-  margin-bottom: 20px;
-  color: #57606a;
+.form-header p {
+  margin: 0;
+  color: #666666;
+  font-size: 15px;
 }
 
 form {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 24px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 label {
+  font-size: 14px;
   font-weight: 600;
+  color: #000000;
 }
 
-input,
-textarea {
-  padding: 10px 12px;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  font: inherit;
+.premium-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  font-size: 15px;
+  color: #000000;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  background: #ffffff;
+  font-family: inherit;
+}
+
+.premium-input:hover {
+  border-color: #cccccc;
+}
+
+.premium-input:focus {
+  outline: none;
+  border-color: #000000;
+  border-width: 2px;
+  padding: 11px 15px;
+}
+
+.premium-input::placeholder {
+  color: #999999;
+}
+
+textarea.premium-input {
   resize: vertical;
+  min-height: 100px;
 }
 
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 10px;
+.form-actions {
+  margin-top: 8px;
 }
 
-button {
-  padding: 10px 14px;
+.premium-btn {
+  width: 100%;
+  background: #000000;
+  color: #ffffff;
   border: none;
-  border-radius: 6px;
-  background: #1f6feb;
-  color: #fff;
+  padding: 14px 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
   cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.premium-btn:hover:not(:disabled) {
+  background: #333333;
 }
 
-button:disabled {
+.premium-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-a {
-  color: #0969da;
-  text-decoration: none;
+.error-msg {
+  margin-top: 24px;
+  padding: 12px 16px;
+  background: #ffffff;
+  border-radius: 8px;
+  color: #cf222e;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  border: 1px solid #cf222e;
 }
 
-.error {
-  margin-top: 16px;
-  color: #cf222e;
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 0;
+  color: #000000;
+  font-weight: 500;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #e5e5e5;
+  border-top-color: #000000;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }

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

@@ -1,36 +1,60 @@
-<div class="create-workspace-container">
-  <h2>Create Workspace</h2>
-  <p>Set up a workspace to organize your decisions.</p>
+<div class="page-container">
+  <header class="top-nav">
+    <div class="brand">
+      <div class="brand-icon">
+        <svg width="22" height="22" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
+          <rect x="4" y="6" width="20" height="8" rx="1.5"></rect>
+          <rect x="8" y="18" width="20" height="8" rx="1.5"></rect>
+        </svg>
+      </div>
+      <span class="brand-name">Sentinent</span>
+    </div>
+    <a routerLink="/dashboard" class="back-nav-btn">Back to Dashboard</a>
+  </header>
 
-  <form (ngSubmit)="onSubmit()" #workspaceForm="ngForm" novalidate>
-    <label for="workspace-name">Workspace Name</label>
-    <input
-      id="workspace-name"
-      name="workspaceName"
-      type="text"
-      required
-      [(ngModel)]="name"
-      [disabled]="isSubmitting"
-      placeholder="e.g. Product Team"
-    />
+  <main class="form-wrapper">
+    <div class="form-card">
+      <div class="form-header">
+        <h2>Create Workspace</h2>
+        <p>Set up a workspace to organize your decisions and signals.</p>
+      </div>
 
-    <label for="workspace-description">Description</label>
-    <textarea
-      id="workspace-description"
-      name="workspaceDescription"
-      [(ngModel)]="description"
-      [disabled]="isSubmitting"
-      rows="4"
-      placeholder="Describe this workspace"
-    ></textarea>
+      <form (ngSubmit)="onSubmit()" #workspaceForm="ngForm" novalidate>
+        <div class="form-group">
+          <label for="workspace-name">Workspace Name</label>
+          <input
+            id="workspace-name"
+            name="workspaceName"
+            type="text"
+            required
+            [(ngModel)]="name"
+            [disabled]="isSubmitting"
+            placeholder="e.g. Product Team"
+            class="premium-input"
+          />
+        </div>
 
-    <div class="actions">
-      <button type="submit" [disabled]="isSubmitting || !workspaceForm.form.valid">
-        {{ isSubmitting ? 'Creating...' : 'Create Workspace' }}
-      </button>
-      <a routerLink="/dashboard">Cancel</a>
-    </div>
-  </form>
+        <div class="form-group">
+          <label for="workspace-description">Description</label>
+          <textarea
+            id="workspace-description"
+            name="workspaceDescription"
+            [(ngModel)]="description"
+            [disabled]="isSubmitting"
+            rows="4"
+            placeholder="Describe this workspace"
+            class="premium-input"
+          ></textarea>
+        </div>
 
-  <p *ngIf="error" class="error">{{ error }}</p>
+        <div class="form-actions">
+          <button type="submit" [disabled]="isSubmitting || !workspaceForm.form.valid" class="premium-btn">
+            {{ isSubmitting ? 'Creating...' : 'Create Workspace' }}
+          </button>
+        </div>
+      </form>
+
+      <p *ngIf="error" class="error-msg">{{ error }}</p>
+    </div>
+  </main>
 </div>