Feature/us 01 workspace layout

src/app/app.html

@@ -1,4 +1 @@
-<h1>Hello, {{ title() }}</h1>
-<h2>{{ doubleTitle() }}</h2>
-
-<app-button label="Enviar" [disabled]="true" type="submit"></app-button>
+<router-outlet></router-outlet>

src/app/app.routes.ts

@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: '',
+        redirectTo: 'challenge-workspace',
+        pathMatch: 'full'
+    },
+    {
+        path: 'challenge-workspace',
+        loadChildren: () => 
+            import('./features/challenge-workspace/challenge-workspace').then(m => m.challengeWorkspaceRoutes)
+    }
+];

src/app/app.ts

@@ -2,11 +2,10 @@ import { Component, computed, signal, effect } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { ApplicationService } from './application';
-import { Button } from './components/button/button';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Button],
+  imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.css',
 })

src/app/application.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { Application } from './application';
+import { ApplicationService } from './application';
 
 describe('Application', () => {
-  let service: Application;
+  let service: ApplicationService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(Application);
+    service = TestBed.inject(ApplicationService);
   });
 
   it('should be created', () => {

src/app/features/challenge-workspace/challenge-workspace.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { ChallengeWorkspaceContainer } from './containers/challenge-workspace/challenge-workspace';
+
+export const challengeWorkspaceRoutes: Routes = [
+  { 
+    path: '',
+    component: ChallengeWorkspaceContainer
+    }
+];

src/app/features/challenge-workspace/challenge-workspace.ts

@@ -0,0 +1,2 @@
+export { ChallengeWorkspaceContainer } from './containers/challenge-workspace/challenge-workspace';
+export { challengeWorkspaceRoutes } from './challenge-workspace.routes';

src/app/features/challenge-workspace/containers/challenge-workspace/challenge-workspace.css

@@ -0,0 +1,166 @@
+:host {
+  display: block;
+  min-height: 100vh;
+  background: #0f0f10;
+  color: #f3f3f3;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.workspace-layout {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: 56px 48px 1fr 56px;
+  overflow: hidden;
+}
+
+.top-header,
+.workspace-toolbar,
+.workspace-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: #17171a;
+  border-color: #2a2a2a;
+}
+
+.top-header,
+.workspace-toolbar {
+  border-bottom: 1px solid #2a2a2a;
+}
+
+.logo {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.top-nav span {
+  color: #b6b6b8;
+  font-size: 14px;
+}
+
+.problem-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.tab {
+  border: 0;
+  background: transparent;
+  color: #b6b6b8;
+  padding: 8px 10px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+.tab.active {
+  color: #f3f3f3;
+  border-bottom-color: #facc15;
+}
+
+.language-tab span {
+  display: inline-block;
+  padding: 4px 10px;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  color: #d4d4d4;
+  font-size: 13px;
+}
+
+.workspace-main {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow: hidden;
+}
+
+.workspace-panel {
+  min-height: 0;
+  overflow: auto;
+  padding: 20px;
+  background: #141416;
+}
+
+.workspace-problem {
+  border-right: 1px solid #2a2a2a;
+}
+
+.workspace-editor {
+  background: #0d0d0f;
+}
+
+.problem-content h1 {
+  margin-bottom: 12px;
+  font-size: 1.8rem;
+}
+
+.problem-content p {
+  margin-bottom: 10px;
+  line-height: 1.5;
+  color: #d4d4d4;
+}
+
+.example-card {
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: #17171a;
+}
+
+.example-card pre,
+.editor-content pre {
+  margin-top: 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #d4d4d4;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.problem-content ul {
+  margin-top: 8px;
+  padding-left: 20px;
+}
+
+.problem-content li {
+  margin-bottom: 6px;
+  color: #d4d4d4;
+}
+
+.workspace-footer {
+  justify-content: flex-end;
+  gap: 10px;
+  border-top: 1px solid #2a2a2a;
+}
+
+.btn {
+  border: 1px solid #2a2a2a;
+  background: #141416;
+  color: #f3f3f3;
+  border-radius: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+
+.btn-primary {
+  border-color: #eab308;
+  background: #facc15;
+  color: #111111;
+  font-weight: 700;
+}
+
+@media (max-width: 900px) {
+  .workspace-main {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-problem {
+    border-right: 0;
+    border-bottom: 1px solid #2a2a2a;
+  }
+}

src/app/features/challenge-workspace/containers/challenge-workspace/challenge-workspace.html

@@ -0,0 +1,85 @@
+<div class="workspace-layout">
+    <header class="top-header">
+        <div class="logo">Backbone Judge</div>
+        <nav class="top-nav">
+            <span>Problems</span>
+        </nav>
+    </header>
+
+    <div class="workspace-toolbar">
+        <div class="problem-tabs">
+            <button class="tab active" type="button">Description</button>
+            <button class="tab" type="button">Submissions</button>
+            <button class="tab" type="button">Hints</button>
+        </div>
+
+        <div class="language-tab">
+            <span>JavaScript</span>
+        </div>
+    </div>
+
+    <main class="workspace-main">
+        <section class="workspace-panel workspace-problem">
+
+                <div class="problem-content">
+                    <h1>1. Two Sum</h1>
+                    <p>Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.</p>
+                    <p>You may assume that each input would have exactly one solution, and you may not use the same element twice.</p>
+                    <p>You can return the answer in any order.</p>
+
+                    <div class="example-card">
+                        <p><strong>Example 1:</strong></p>
+                        <pre><code>Input: nums = [2,7,11,15], target = 9
+Output: [0,1] 
+Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].</code></pre>
+                    </div>
+
+                    <div class="example-card">
+                        <p><strong>Example 2:</strong></p>
+                        <pre><code>Input: nums = [3,2,4], target = 6
+Output: [1,2]</code></pre>
+                    </div>
+
+                    <div class="example-card">
+                        <p><strong>Example 3:</strong></p>
+                        <pre><code>Input: nums = [3,3], target = 6
+Output: [0,1]</code></pre>
+                    </div>
+
+                    <p><strong>Constraints:</strong></p>
+                    <ul>
+                        <li>2 <= nums.length <= 10^4</li>
+                        <li>-10^9 <= nums[i] <= 10^9</li>
+                        <li>-10^9 <= target <= 10^9</li>
+                        <li>Only one valid answer exists.</li>
+                    </ul>
+                </div>
+        </section>
+
+        <section class="workspace-panel workspace-editor">
+            <div class="editor-content">
+                <pre><code>var twoSum = function(nums, target) &#123;
+    const map = new Map();
+
+    for (let i = 0; i < nums.length; i++) &#123;
+        const complement = target - nums[i];
+
+        if (map.has(complement)) &#123;
+            return [map.get(complement), i];
+        &#125;
+        map.set(nums[i], i);
+    &#125;
+
+    return [];
+&#125;;</code></pre>
+
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="workspace-footer">
+        <button class="btn" type="button">Run Code</button>
+        <button class="btn btn-primary" type="button">Submit</button>
+    </footer>
+</div>

src/app/features/challenge-workspace/containers/challenge-workspace/challenge-workspace.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-challenge-workspace',
+  standalone: true,
+  imports: [],
+  templateUrl: './challenge-workspace.html',
+  styleUrl: './challenge-workspace.css'
+})
+
+export class ChallengeWorkspaceContainer {
+
+}

tsconfig.app.json

@@ -4,6 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "rootDir": "./src",
     "types": []
   },
   "include": [

tsconfig.spec.json

@@ -4,6 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
+    "rootDir": "./src/app",
     "types": [
       "vitest/globals"
     ]