restructoring components

Author: danielraab

README.md

@@ -28,11 +28,6 @@ A modern Angular application that helps you build complex shell commands through
 - Stored in browser's localStorage
 - Timestamp tracking with relative time display
 
-🎨 **Modern UI**
-- Built with Tailwind CSS
-- Responsive design
-- Accessible interface (WCAG AA compliant)
-
 ## Project Structure
 
 ```
@@ -136,6 +131,10 @@ Build the project for production:
 npm run build
 ```
 
+### Docker Deployment
+
+For Docker deployment instructions, see the [Docker README](docker/README.md).
+
 ## Usage
 
 1. **Select a Command**: Click on a command in the navigation bar (e.g., `ls`, `grep`, `find`)

src/app/app.routes.ts

@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { HomeComponent } from './components/home/home.component';
+import { HomeComponent } from './components/home.component';
 import { CommandBuilderComponent } from './components/command-builder/command-builder.component';
 
 export const routes: Routes = [

src/app/app.ts

@@ -1,7 +1,7 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { NavbarComponent } from './components/navbar/navbar.component';
-import { FooterComponent } from './components/footer/footer.component';
+import { NavbarComponent } from './components/layout/navbar.component';
+import { FooterComponent } from './components/layout/footer.component';
 import { CommandService } from './services/command.service';
 
 @Component({

src/app/components/command-builder/command-builder.component.ts

@@ -4,13 +4,13 @@ import { Title } from '@angular/platform-browser';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { CommandService } from '../../services/command.service';
 import { Command } from '../../models/command.model';
-import { CommandHistoryComponent } from '../command-history/command-history.component';
-import { LoadingSpinnerComponent } from './loading-spinner.component';
-import { CommandHeaderComponent } from './command-header.component';
-import { GeneratedCommandDisplayComponent } from './generated-command-display.component';
-import { FlagItemComponent } from './flag-item.component';
-import { OptionItemComponent } from './option-item.component';
-import { ExampleCardComponent, CommandExample } from './example-card.component';
+import { CommandHistoryComponent } from '../command-history.component';
+import { LoadingSpinnerComponent } from '../shared/loading-spinner.component';
+import { CommandHeaderComponent } from './components/command-header.component';
+import { GeneratedCommandDisplayComponent } from './components/generated-command-display.component';
+import { FlagItemComponent } from './components/flag-item.component';
+import { OptionItemComponent } from './components/option-item.component';
+import { ExampleCardComponent, CommandExample } from './components/example-card.component';
 
 interface FlagState {
   id: string;

…mand-builder/command-header.component.ts …r/components/command-header.component.tssrc/app/components/command-builder/command-header.component.ts renamed to src/app/components/command-builder/components/command-header.component.ts src/app/components/command-builder/command-header.component.ts renamed to src/app/components/command-builder/components/command-header.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { Command } from '../../models/command.model';
+import { Command } from '../../../models/command.model';
 
 @Component({
   selector: 'app-command-header',

…ommand-builder/example-card.component.ts …der/components/example-card.component.tssrc/app/components/command-builder/example-card.component.ts renamed to src/app/components/command-builder/components/example-card.component.ts src/app/components/command-builder/example-card.component.ts renamed to src/app/components/command-builder/components/example-card.component.ts

@@ -1,5 +1,5 @@
 import { Component, input, output } from '@angular/core';
-import { Flag } from '../../models/command.model';
+import { Flag } from '../../../models/command.model';
 
 @Component({
   selector: 'app-flag-item',

…s/command-builder/flag-item.component.ts …uilder/components/flag-item.component.tssrc/app/components/command-builder/flag-item.component.ts renamed to src/app/components/command-builder/components/flag-item.component.ts src/app/components/command-builder/flag-item.component.ts renamed to src/app/components/command-builder/components/flag-item.component.ts

@@ -1,6 +1,6 @@
 import { Component, input, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Option } from '../../models/command.model';
+import { Option } from '../../../models/command.model';
 
 @Component({
   selector: 'app-option-item',

…r/generated-command-display.component.ts …s/generated-command-display.component.tssrc/app/components/command-builder/generated-command-display.component.ts renamed to src/app/components/command-builder/components/generated-command-display.component.ts src/app/components/command-builder/generated-command-display.component.ts renamed to src/app/components/command-builder/components/generated-command-display.component.ts

@@ -1,6 +1,6 @@
 import { Component, input, signal, computed, inject, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CommandService, CommandHistoryEntry } from '../../services/command.service';
+import { CommandService, CommandHistoryEntry } from '../services/command.service';
 
 @Component({
   selector: 'app-command-history',