Refactor controls UI, styles; bump deps

Consolidate and refactor component styling and markup: remove component-specific SCSS for Conway's Game of Life and Pathfinding and drop their styleUrls, rename per-component .controls blocks to .controls-panel in pathfinding and sorting templates, and move the outer container class onto the mat-card. Add global styles in src/styles.scss for .controls-panel, grid/form sizing, container max-width, and sorting visualization (bar states and transitions). Also update package-lock.json with minor/patch dependency bumps for Angular CLI/devkit/schematics/@schematics/angular, @modelcontextprotocol/sdk and several transitive packages.

src/app/pages/algorithms/conway-gol/conway-gol.ts

@@ -30,7 +30,6 @@ interface GridPos { row: number; col: number }
     FormsModule
   ],
   templateUrl: './conway-gol.html',
-  styleUrl: './conway-gol.scss',
 })
 export class ConwayGol implements AfterViewInit {
 

src/app/pages/algorithms/information/information.ts

@@ -1,6 +1,5 @@
 import {Component, Input} from '@angular/core';
 import {TranslatePipe} from "@ngx-translate/core";
-import {UrlConstants} from "../../../constants/UrlConstants";
 import {AlgorithmInformation} from './information.models';
 
 @Component({

src/app/pages/algorithms/pathfinding/pathfinding.component.html

@@ -6,18 +6,18 @@
     <app-information [algorithmInformation]="algoInformation"/>
 
     <div class="controls-container">
-      <div class="controls">
+      <div class="controls-panel">
         <button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
         <button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
       </div>
-      <div class="controls">
+      <div class="controls-panel">
         <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'normal'})">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
         <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'random'})">{{ 'PATHFINDING.RANDOM_CASE' | translate }}</button>
         <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'edge'})">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
         <button matButton="filled" (click)="createCase({withWalls: false, scenario: 'normal'})">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
       </div>
 
-      <div class="controls">
+      <div class="controls-panel">
         <mat-button-toggle-group [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
           <mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
           <mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
@@ -25,8 +25,7 @@
           <mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle>
         </mat-button-toggle-group>
       </div>
-
-      <div class="controls">
+      <div class="controls-panel">
         <div class="grid-size">
           <mat-form-field appearance="outline" class="grid-field">
             <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
@@ -63,11 +62,10 @@
         <span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
         <span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
       </div>
-    </div>
-
-    <div class="results-container">
-      <p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
-      <p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
+      <div class="controls-panel">
+        <p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
+        <p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
+      </div>
     </div>
 
     <canvas #gridCanvas></canvas>

src/app/pages/algorithms/pathfinding/pathfinding.component.scss

@@ -1,16 +0,0 @@
-.controls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  align-items: center;
-
-  mat-button-toggle-group {
-    border-radius: 4px;
-    overflow: hidden;
-  }
-}
-
-.grid-field {
-  width: 150px;
-}

src/app/pages/algorithms/pathfinding/pathfinding.component.ts

@@ -43,7 +43,6 @@ interface GridPos { row: number; col: number }
     Information
   ],
   templateUrl: './pathfinding.component.html',
-  styleUrls: ['./pathfinding.component.scss']
 })
 export class PathfindingComponent implements AfterViewInit {
   private readonly pathfindingService = inject(PathfindingService);

src/app/pages/algorithms/sorting/sorting.component.html

@@ -1,5 +1,4 @@
-<div class="container">
-  <mat-card class="sorting-card">
+<mat-card class="container sorting-card">
     <mat-card-header>
       <mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
     </mat-card-header>
@@ -40,7 +39,7 @@
         </button>
       </div>
 
-      <div class="info-panel">
+      <div class="controls-panel">
         <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
       </div>
       <div class="visualization-area">
@@ -56,4 +55,3 @@
       </div>
     </mat-card-content>
   </mat-card>
-</div>

src/styles.scss

@@ -110,6 +110,12 @@ a {
   transition:
     box-shadow 200ms ease,
     transform 200ms ease;
+
+  &.container {
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px;
+  }
 }
 
 .mat-mdc-card::before {
@@ -239,10 +245,21 @@ a {
 
 .controls-panel {
   display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
+  gap: 1rem;
+  margin-bottom: 1rem;
   align-items: center;
   flex-wrap: wrap;
+  margin-top: 10px;
+  font-size: 0.9em;
+
+  mat-button-toggle-group {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  mat-form-field {
+    width: 200px;
+  }
 }
 
 .grid-size {
@@ -250,6 +267,10 @@ a {
   gap: 0.75rem;
   align-items: center;
   flex-wrap: wrap;
+
+  .grid-field {
+    width: 150px;
+  }
 }
 
 canvas {
@@ -288,3 +309,34 @@ canvas {
   flex-direction: column;
   margin-bottom: 1rem;
 }
+
+/* Sorting Visualization */
+.sorting-visualization-area {
+  display: flex;
+  align-items: flex-end;
+  height: 300px; /* Max height for bars */
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 20px;
+  gap: 1px;
+  background-color: #f0f0f0;
+
+  .sorting-bar {
+    flex-grow: 1;
+    background-color: #424242; /* Default unsorted color */
+    transition: height 0.05s ease-in-out, background-color 0.05s ease-in-out;
+    width: 10px; /* Default width, flex-grow will adjust */
+    min-width: 1px; /* Ensure bars are always visible */
+
+    &.unsorted {
+      background-color: #424242;
+    }
+
+    &.comparing {
+      background-color: #ffeb3b; /* Yellow for comparing */
+    }
+
+    &.sorted {
+      background-color: #4caf50; /* Green for sorted */
+    }
+  }
+}