feat(ui): scaffold initial layout and styles

.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+TODO

src/app/app.config.ts

@@ -1,12 +1,24 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+import { provideRouter, Routes } from '@angular/router';
+import { NoTaskComponent } from './tasks/noTask/noTask.component';
+import { TasksComponent } from './tasks/tasks.component';
 
-import { routes } from './app.routes';
+const routes: Routes = [
+  { path: '', component: NoTaskComponent },
+  {
+    path: 'users/:userId',
+    component: TasksComponent,
+  },
+];
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
-    provideRouter(routes)
-  ]
+    provideRouter(routes),
+  ],
 };

src/app/app.ts

@@ -1,12 +1,15 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { DUMMY_USERS } from '../dummy-users';
+import { HeaderComponent } from './header/header.component';
+import { UsersComponent } from './users/users.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
   templateUrl: './app.html',
-  styleUrl: './app.css'
+  imports: [HeaderComponent, UsersComponent, RouterOutlet],
 })
 export class App {
   protected readonly title = signal('easytask-routing-angular');
+  users = DUMMY_USERS;
 }

src/app/header/header.component.html

@@ -0,0 +1,5 @@
+<header class="bg-primary pt-6 pb-6 text-on-primary">
+  <div class="logo mx-auto mb-5"></div>
+  <h1 class="heading-3 text-center">EasyTask</h1> 
+  <p class="heading-6 text-center">Enterprise-level task management without friction</p>
+</header>

src/app/header/header.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+})
+export class HeaderComponent {}

src/app/tasks/noTask/noTask.component.html

@@ -0,0 +1,3 @@
+<div class="d-flex align-items-center justify-content-center h-100">
+  <p class="heading-6 opacity-70">Select a user to see their tasks!</p>
+</div>

src/app/tasks/noTask/noTask.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-noTask',
+  templateUrl: './noTask.component.html',
+})
+export class NoTaskComponent {}

src/app/tasks/tasks.component.html

@@ -0,0 +1,8 @@
+<header class="d-flex justify-content-sb mb-6">
+  <h2 class="heading-5">User's Tasks</h2>
+  <a routerLink="new-task" class="button button--info shadow-2">Add task</a>
+</header>
+<button class="button button--warning mb-4 shadow-2">
+  Sort in ascending order
+</button>
+<router-outlet />

src/app/tasks/tasks.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-tasks',
+  templateUrl: 'tasks.component.html',
+  imports: [RouterOutlet, RouterLink],
+})
+export class TasksComponent {}

src/app/users/user-tasks/userTasks.component.html

@@ -0,0 +1,3 @@
+<ul class="d-flex flex-column gap">
+  ...TODO
+</ul>

src/app/users/user-tasks/userTasks.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user/tasks',
+  templateUrl: './userTasks.component.html',
+})
+export class UserTasksComponent {}

src/app/users/user/user.component.css

@@ -0,0 +1,23 @@
+.avatar {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.wrapper {
+  background-color: var(--c-primary-700);
+  color: var(--text-on-primary);
+  min-width: 17rem;
+}
+.wrapper:hover {
+  background-color: var(--c-primary-500);
+}
+.wrapper:focus {
+  outline: var(--glow) solid var(--c-primary-300);
+  background-color: var(--c-primary-500);
+}
+.wrapper:active {
+  background-color: var(--c-primary-700);
+}
+.wrapper.active {
+  background-color: var(--c-primary-500);
+}

src/app/users/user/user.component.html

@@ -0,0 +1,8 @@
+<a
+  [routerLink]="['users', id, 'tasks']"
+  routerLinkActive="active shadow-1"
+  class="wrapper d-inline-flex align-items-center pl-5 pr-5 pt-3 pb-3 rounded-2 w-100"
+>
+  <img class="avatar rounded-circle mr-5 shadow-1" [src]="avatar" alt="" />
+  {{ name }}
+</a>

src/app/users/user/user.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { UserType } from './user.model';
+
+@Component({
+  selector: 'app-user',
+  templateUrl: './user.component.html',
+  styleUrl: './user.component.css',
+  imports: [RouterLink, RouterLinkActive],
+})
+export class UserComponent {
+  @Input({ required: true }) id!: UserType['id'];
+  @Input({ required: true }) name!: UserType['name'];
+  @Input({ required: true }) avatar!: UserType['avatar'];
+  @Output() userSelected = new EventEmitter<UserType['id']>();
+
+  emitUserSelected() {
+    this.userSelected.emit(this.id);
+  }
+}

src/app/users/user/user.model.ts

@@ -0,0 +1,5 @@
+export type UserType = {
+  id: string;
+  name: string;
+  avatar: string;
+};

src/app/users/users.component.html

@@ -0,0 +1,7 @@
+<ul class="d-flex flex-column gap-sm">
+  @for (user of users; track user.id) {
+  <li>
+    <app-user [id]="user.id" [name]="user.name" [avatar]="user.avatar" />
+  </li>
+  }
+</ul>

src/app/users/users.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { UserComponent } from './user/user.component';
+import { UserType } from './user/user.model';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  imports: [UserComponent],
+})
+export class UsersComponent {
+  @Input({ required: true }) users: UserType[] = [];
+}

src/dummy-tasks.ts

@@ -0,0 +1,83 @@
+export const DUMMY_TASKS = [
+  {
+    id: 't1',
+    title: 'Revisar propuesta de diseño',
+    dueDate: '2025-07-27T10:15:00Z',
+    summary:
+      'Validar las secciones visuales antes de la revisión final del cliente.',
+    complete: false,
+    userId: 'u1',
+  },
+  {
+    id: 't2',
+    title: 'Actualizar documentación técnica',
+    dueDate: '2025-07-26T14:45:00Z',
+    summary: 'Agregar nuevos endpoints REST al documento compartido.',
+    complete: true,
+    userId: 'u2',
+  },
+  {
+    id: 't3',
+    title: 'Configurar servidor de staging',
+    dueDate: '2025-07-28T09:00:00Z',
+    summary: 'Preparar el entorno de pruebas para el release semanal.',
+    complete: false,
+    userId: 'u3',
+  },
+  {
+    id: 't4',
+    title: 'Crear mockups del dashboard',
+    dueDate: '2025-07-25T16:30:00Z',
+    summary: 'Generar prototipos responsivos con base en el nuevo layout.',
+    complete: true,
+    userId: 'u4',
+  },
+  {
+    id: 't5',
+    title: 'Escribir pruebas unitarias',
+    dueDate: '2025-07-24T11:20:00Z',
+    summary: 'Cubrir los nuevos reducers y efectos del store.',
+    complete: false,
+    userId: 'u5',
+  },
+  {
+    id: 't6',
+    title: 'Coordinar reunión de equipo',
+    dueDate: '2025-07-29T08:00:00Z',
+    summary: 'Definir agenda para el cierre de sprint y retrospectiva.',
+    complete: false,
+    userId: 'u6',
+  },
+  {
+    id: 't7',
+    title: 'Optimizar queries en la base de datos',
+    dueDate: '2025-07-23T13:15:00Z',
+    summary: 'Reducir latencia en los endpoints críticos.',
+    complete: true,
+    userId: 'u3',
+  },
+  {
+    id: 't8',
+    title: 'Diseñar estructura de componente modular',
+    dueDate: '2025-07-28T18:00:00Z',
+    summary: 'Separar lógica visual y funcional del panel de métricas.',
+    complete: false,
+    userId: 'u2',
+  },
+  {
+    id: 't9',
+    title: 'Integrar señales reactivas en el feature de notificaciones',
+    dueDate: '2025-07-27T20:10:00Z',
+    summary: 'Actualizar lógica para usar Signals en lugar de Subjects.',
+    complete: true,
+    userId: 'u5',
+  },
+  {
+    id: 't10',
+    title: 'Rediseñar mixins para utilidades CSS',
+    dueDate: '2025-07-22T17:00:00Z',
+    summary: 'Mejorar la reusabilidad de los mixins de espaciado y bordes.',
+    complete: true,
+    userId: 'u1',
+  },
+];

src/dummy-users.ts

@@ -0,0 +1,32 @@
+export const DUMMY_USERS = [
+  {
+    id: 'u1',
+    name: 'Jasmine Washington',
+    avatar: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 'u2',
+    name: 'Emily Thompson',
+    avatar: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 'u3',
+    name: 'Marcus Johnson',
+    avatar: 'https://i.pravatar.cc/150?img=5',
+  },
+  {
+    id: 'u4',
+    name: 'David Miller',
+    avatar: 'https://i.pravatar.cc/150?img=6',
+  },
+  {
+    id: 'u5',
+    name: 'Priya Patel',
+    avatar: 'https://i.pravatar.cc/150?img=7',
+  },
+  {
+    id: 'u6',
+    name: 'Arjun Singh',
+    avatar: 'https://i.pravatar.cc/150?img=8',
+  },
+];

src/main.ts

@@ -1,6 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
 import { App } from './app/app';
+import { appConfig } from './app/app.config';
 
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));