docs(docs-infra): improve playground layout

Improve the layout and optimize the empty space; Introduce some minor improvements to the code editor

adev/shared-docs/pipeline/tutorials/routes.mts

@@ -16,11 +16,13 @@ import {
 export async function generatePlaygroundRoutes(
   configs: Record<string, TutorialConfig>,
 ): Promise<PlaygroundRouteData> {
-  const templates = Object.entries(configs).map(([path, config]) => ({
-    path: `playground/${path}`,
-    label: config.title,
-    id: path,
-  }));
+  const templates = Object.entries(configs)
+    .map(([path, config]) => ({
+      path: `playground/${path}`,
+      label: config.title,
+      id: path,
+    }))
+    .sort((a, b) => a.id.localeCompare(b.id));
 
   return {
     templates,

adev/shared-docs/styles/_resets.scss

@@ -153,34 +153,38 @@
 
   // Material tab styling
   .mat-mdc-tab-header {
-    @include mat.tabs-overrides((
-      disabled-ripple-color: transparent,
-      pagination-icon-color: var(--secondary-contrast),
-      inactive-label-text-color: var(--secondary-contrast),
-      inactive-ripple-color: transparent,
-      inactive-hover-label-text-color: var(--tertiary-contrast),
-      inactive-focus-label-text-color: var(--secondary-contrast),
-      active-label-text-color: var(--primary-contrast),
-      active-ripple-color: transparent,
-      active-indicator-color: color-mix(in srgb, var(--bright-blue) 40%, white),
-      active-focus-label-text-color: var(--primary-contrast),
-      active-hover-label-text-color: var(--primary-contrast),
-      active-focus-indicator-color: var(--bright-blue),
-      active-hover-indicator-color: color-mix(in srgb, var(--bright-blue) 40%, white),
-      label-text-font: 'Inter, sans-serif',
-      label-text-tracking: -0.00875rem,
-      label-text-size: 0.875rem,
-      label-text-weight: 500,
-    ));
+    @include mat.tabs-overrides(
+      (
+        disabled-ripple-color: transparent,
+        pagination-icon-color: var(--secondary-contrast),
+        inactive-label-text-color: var(--secondary-contrast),
+        inactive-ripple-color: transparent,
+        inactive-hover-label-text-color: var(--tertiary-contrast),
+        inactive-focus-label-text-color: var(--secondary-contrast),
+        active-label-text-color: var(--primary-contrast),
+        active-ripple-color: transparent,
+        active-indicator-color: color-mix(in srgb, var(--bright-blue) 40%, white),
+        active-focus-label-text-color: var(--primary-contrast),
+        active-hover-label-text-color: var(--primary-contrast),
+        active-focus-indicator-color: var(--bright-blue),
+        active-hover-indicator-color: color-mix(in srgb, var(--bright-blue) 40%, white),
+        label-text-font: 'Inter, sans-serif',
+        label-text-tracking: -0.00875rem,
+        label-text-size: 0.875rem,
+        label-text-weight: 500,
+      )
+    );
 
     .mdc-tab__text-label {
       user-select: none;
     }
 
     .mdc-tab--active {
-      @include mat.tabs-overrides((
-        label-text-weight: 500,
-      ));
+      @include mat.tabs-overrides(
+        (
+          label-text-weight: 500,
+        )
+      );
     }
   }
 
@@ -203,14 +207,16 @@
   .docs-code-editor-tabs,
   .docs-editor-tabs {
     .mat-mdc-tab-header {
-      @include mat.tabs-overrides((
-        active-indicator-color: transparent,
-        active-focus-indicator-color: transparent,
-        active-hover-indicator-color: transparent,
-        label-text-font: 'InterTight, sans-serif',
-        label-text-tracking: -0.00875rem,
-        label-text-size: 0.8125rem,
-      ));
+      @include mat.tabs-overrides(
+        (
+          active-indicator-color: transparent,
+          active-focus-indicator-color: transparent,
+          active-hover-indicator-color: transparent,
+          label-text-font: 'InterTight, sans-serif',
+          label-text-tracking: -0.00875rem,
+          label-text-size: 0.8125rem,
+        )
+      );
 
       .mat-mdc-tab-labels {
         gap: 0;
@@ -233,8 +239,7 @@
         }
 
         &:has(.docs-delete-file) {
-          padding-inline-start: 18px !important;
-          padding-inline-end: 0.5px !important;
+          padding-inline: 14px !important;
         }
       }
     }
@@ -282,17 +287,19 @@
     }
 
     .mat-mdc-tab-header {
-      @include mat.tabs-overrides((
-        active-indicator-color: transparent,
-        active-focus-indicator-color: transparent,
-        active-hover-indicator-color: transparent,
-        active-focus-label-text-color: transparent,
-        active-hover-label-text-color: transparent,
-        active-label-text-color: transparent,
-        label-text-font: 'InterTight, sans-serif',
-        label-text-tracking: -0.00875rem,
-        label-text-size: 0.8125rem,
-      ));
+      @include mat.tabs-overrides(
+        (
+          active-indicator-color: transparent,
+          active-focus-indicator-color: transparent,
+          active-hover-indicator-color: transparent,
+          active-focus-label-text-color: transparent,
+          active-hover-label-text-color: transparent,
+          active-label-text-color: transparent,
+          label-text-font: 'InterTight, sans-serif',
+          label-text-tracking: -0.00875rem,
+          label-text-size: 0.8125rem,
+        )
+      );
 
       .mat-mdc-tab-labels {
         gap: 0;

adev/src/app/editor/code-editor/code-editor.component.scss

@@ -170,11 +170,17 @@
   }
 }
 
+.adev-add-file {
+  display: flex;
+  align-items: center;
+}
+
 .docs-delete-file,
 .docs-rename-file {
   padding-inline-start: 0.1rem;
   padding-inline-end: 0;
   margin-block-start: 0.2rem;
+  margin-inline-start: 0.2rem;
   docs-icon {
     font-size: 1rem;
   }

adev/src/app/editor/embedded-editor.component.html

@@ -6,9 +6,17 @@
         [type]="TerminalType.INTERACTIVE"
       />
     } @else {
-      <as-split class="docs-editor" [direction]="splitDirection()" restrictMove="true" gutterSize="5">
+      <as-split
+        class="docs-editor"
+        [direction]="splitDirection()"
+        restrictMove="true"
+        gutterSize="5"
+      >
         <as-split-area class="adev-left-side" size="50">
-          <docs-tutorial-code-editor class="adev-tutorial-code-editor" [restrictedMode]="restrictedMode()" />
+          <docs-tutorial-code-editor
+            class="adev-tutorial-code-editor"
+            [restrictedMode]="restrictedMode()"
+          />
         </as-split-area>
 
         <as-split-area size="50">
@@ -47,7 +55,7 @@
                   <ng-template mat-tab-label>
                     Console
                     @if (errorsCount()) {
-                      <docs-icon class="docs-icon_high-contrast">error</docs-icon>
+                      <docs-icon class="docs-icon_high-contrast docs-error-icon">error</docs-icon>
                       <span>
                         {{ errorsCount() }}
                       </span>

adev/src/app/editor/embedded-editor.component.scss

@@ -85,6 +85,11 @@ $width-breakpoint: 950px;
 .docs-editor-tabs {
   height: 100%;
   display: block;
+
+  .docs-error-icon {
+    margin-inline: 0.375rem 0.125rem;
+    font-size: 18px;
+  }
 }
 
 .adev-refresh-btn {

adev/src/app/features/playground/playground.component.html

@@ -3,7 +3,6 @@
     <h1 tabindex="-1">Angular Playground</h1>
   </header>
   <div class="adev-template-select">
-    <label for="playgroundTemplate">Select a template</label>
     <button type="button" [cdkMenuTriggerFor]="templatesMenu">
       <span>{{ selectedTemplate.label }}</span>
       <docs-icon>expand_more</docs-icon>
@@ -12,7 +11,9 @@
 </div>
 
 @if (embeddedEditorComponent) {
-  <ng-container *ngComponentOutlet="embeddedEditorComponent" />
+  <div class="adev-embedded-editor-wrapper">
+    <ng-container *ngComponentOutlet="embeddedEditorComponent" />
+  </div>
 }
 
 <ng-template #templatesMenu>

adev/src/app/features/playground/playground.component.scss

@@ -1,9 +1,10 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   padding: var(--layout-padding);
-  padding-block-end: 100px;
-  height: 100vh;
   width: 100%;
+  height: 100vh;
   box-sizing: border-box;
 
   header {
@@ -19,15 +20,15 @@
 .adev-playground-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
-  margin-block: 1rem;
+}
+
+.adev-embedded-editor-wrapper {
+  flex: 1;
 }
 
 .adev-template-select {
-  margin-block-end: 0.5rem;
-
   label {
     color: var(--quaternary-contrast);
     font-size: 0.875rem;
@@ -81,7 +82,9 @@
       text-align: left;
       padding-block: 0.5rem;
       color: var(--quaternary-contrast);
-      transition: color 0.3s ease, background 0.3s ease;
+      transition:
+        color 0.3s ease,
+        background 0.3s ease;
       font-weight: 400;
 
       &:hover {

adev/src/content/tutorials/playground/0-hello-world/config.json

@@ -1,5 +1,5 @@
 {
   "type": "editor-only",
-  "title": "Hello world",
+  "title": "\"Hello, World!\" template",
   "openFiles": ["src/main.ts"]
 }

adev/src/content/tutorials/playground/1-signals/config.json

@@ -1,5 +1,5 @@
 {
   "type": "editor-only",
-  "title": "Signals",
+  "title": "Signals template",
   "openFiles": ["src/main.ts"]
 }

adev/src/content/tutorials/playground/2-control-flow/config.json

@@ -1,5 +1,5 @@
 {
   "type": "editor-only",
-  "title": "Control flow",
+  "title": "Control flow template",
   "openFiles": ["src/main.ts"]
 }

adev/src/content/tutorials/playground/3-minigame/config.json

@@ -1,5 +1,5 @@
 {
   "type": "editor-only",
-  "title": "Minigame",
+  "title": "Minigame template",
   "openFiles": ["src/main.ts", "src/game.html", "src/game.css"]
 }