Develop

src/app/app.component.html

@@ -1 +1,65 @@
-Hello world!
+<div class="container">
+	<div class="sidebar">
+		<div class="sidebar-header">
+			<h2>File Manager</h2>
+		</div>
+
+		<div class="sidebar-actions">
+			<button class="action-button primary" (click)="showUpload = !showUpload">
+				Upload Files
+			</button>
+		</div>
+
+		<button
+			class="action-button"
+			(click)="showNewFolderInput = !showNewFolderInput">
+			New Folder
+		</button>
+
+		<div class="new-folder-input" *ngIf="showNewFolderInput">
+			<input
+				type="text"
+				placeholder="Folder name"
+				[(ngModel)]="newFolderName"
+				(keyup.enter)="createFolder()"
+				(keyup.escape)="cancelNewFolder()"
+				#folderInput />
+			<div>
+				<button class="btn-small primary" (click)="createFolder()">
+					Create
+				</button>
+				<button class="btn-small" (click)="cancelNewFolder()">Cancel</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="main-content">
+		<div class="content-header">
+			<app-breadcrumb
+				[currentFolder]="currentFolder"
+				(pathChanged)="onPathChanged($event)"
+				(rootClick)="navigateToRoot()"
+				(pathClick)="navigateToFolder($event)">
+			</app-breadcrumb>
+		</div>
+
+		<app-upload
+			*ngIf="showUpload"
+			(filesSelected)="onFilesSelected($event)"
+			#uploadComponent>
+		</app-upload>
+
+		<div class="files-container">
+			<div *ngIf="files.length === 0" class="empty-state">
+				<h3>Empty</h3>
+			</div>
+			<app-file-item
+				*ngFor="let file of files"
+				[file]="file"
+				(delete)="onDeleteItem($event)"
+				(download)="onDownloadFile($event)"
+				(itemClick)="onClickFolder($event)">
+			</app-file-item>
+		</div>
+	</div>
+</div>

src/app/app.component.scss

@@ -1,7 +1,108 @@
-:host {
-	height: 100%;
+.container {
+	display: flex;
+	min-height: 100vh;
+	background: #f4f6f9;
+}
+
+.sidebar {
+	width: 280px;
+	background: white;
+	border-right: 1px solid #e5e7eb;
+	padding: 24px;
+	flex-shrink: 0;
+}
+
+.sidebar-header h2 {
+	margin: 0 0 24px 0;
+	font-size: 24px;
+	font-weight: 700;
+	color: #1f2937;
+}
+
+.sidebar-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-bottom: 32px;
+}
+
+.main-content {
+	flex: 1;
+	padding: 24px;
+	overflow: auto;
+}
+
+.content-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 24px;
+	background: white;
+	padding: 16px 24px;
+	border-radius: 12px;
+	border: 1px solid #e5e7eb;
+}
+
+.action-button {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	font-size: 30px;
+	gap: 8px;
+	padding: 12px 16px;
+	border: 1px solid #e5e7eb;
+	border-radius: 8px;
+	background: white;
+	color: #374151;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s;
+	font-size: 16px;
+}
+
+.action-button:hover {
+	background: #f3f4f6;
+	border-color: #d1d5db;
+}
+
+.action-button.primary {
+	background: #3b82f6;
+	color: white;
+	border-color: #3b82f6;
+}
+
+.action-button.primary:hover {
+	background: #2563eb;
+}
+
+.files-container {
+	display: grid;
+	gap: 16px;
+}
+
+.new-folder-input {
+	background: #f9fafb;
+	padding: 16px;
+	border-radius: 8px;
+	margin-bottom: 24px;
+}
+
+.new-folder-input input {
+	width: 100%;
+	padding: 12px 0;
+	border: 1px solid #d1d5db;
+	border-radius: 4px;
+	margin-bottom: 12px;
+	font-size: 14px;
+}
+
+.input-actions {
+	display: flex;
+	gap: 8px;
+}
+
+.btn-small {
+	padding: 6px 12px;
+	font-size: 12px;
+	border: 1px solid #d1d5db;
+	border-radius: 4px;
+	background: white;
 }

src/app/app.component.ts

@@ -1,9 +1,198 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import {
+	CurrentFolder,
+	FileItem,
+	UploadProgress,
+} from './types/file-manager.types';
+import { UploadComponent } from './components/upload/upload.component';
+import { FileManagerService } from './services/file-manager.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FileItemComponent } from './components/file-item/file-item.component';
+import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
 
 @Component({
 	selector: 'ic-root',
-	imports: [],
+	imports: [
+		CommonModule,
+		FormsModule,
+		UploadComponent,
+		FileItemComponent,
+		BreadcrumbComponent,
+	],
 	templateUrl: './app.component.html',
 	styleUrl: './app.component.scss',
 })
-export class AppComponent {}
+export class AppComponent {
+	@ViewChild('uploadComponent') uploadComponent!: UploadComponent;
+
+	showUpload = false;
+
+	activeUploads: UploadProgress[] = [];
+
+	files: FileItem[] = [];
+
+	showNewFolderInput = false;
+
+	newFolderName = '';
+
+	currentFolder: CurrentFolder = {
+		name: '',
+		parentId: 'root',
+		id: '',
+	};
+
+	constructor(private fileManagerService: FileManagerService) {}
+
+	ngOnInit() {
+		this.getList();
+	}
+
+	getList(parentId?: string) {
+		this.fileManagerService.getItems(parentId).subscribe({
+			next: response => {
+				if (!this.currentFolder?.id) {
+					this.files = response.items.filter(
+						item => item.parentId === null || item.parentId === ''
+					);
+				} else {
+					this.files = response.items;
+				}
+			},
+			error: error => {
+				console.error('Failed to load files:', error);
+			},
+		});
+	}
+
+	onFilesSelected(files: File[]) {
+		console.log('current', this.currentFolder);
+		this.activeUploads = [];
+
+		files.forEach(file => {
+			this.fileManagerService
+				.uploadFile(file, this.currentFolder.id)
+				.subscribe({
+					next: progress => {
+						const existingIndex = this.activeUploads.findIndex(
+							p => p.filename === progress.filename
+						);
+						if (existingIndex >= 0) {
+							this.activeUploads[existingIndex] = progress;
+						} else {
+							this.activeUploads.push(progress);
+						}
+
+						this.uploadComponent?.updateProgress([...this.activeUploads]);
+					},
+					complete: () => {
+						setTimeout(() => {
+							this.activeUploads = this.activeUploads.filter(
+								p => p.filename !== file.name
+							);
+							this.uploadComponent?.updateProgress([...this.activeUploads]);
+
+							if (this.activeUploads.length === 0) {
+								this.getList(this.currentFolder.id);
+								setTimeout(() => {
+									this.showUpload = false;
+									this.uploadComponent?.clearProgress();
+								}, 1000);
+							}
+						}, 1000);
+					},
+					error: error => {
+						console.log('error', error);
+						if (error.error?.errors) {
+							const allMessages = error.error.errors
+								.map((err: any) => err.message)
+								.join('\n');
+							alert(allMessages);
+						}
+						this.activeUploads = [];
+						this.showUpload = false;
+						this.uploadComponent?.clearProgress();
+					},
+				});
+		});
+	}
+
+	onDeleteItem(file: FileItem) {
+		if (confirm(`Are you sure you want to delete "${file.name}"?`)) {
+			this.fileManagerService.deleteItem(file.id).subscribe({
+				next: () => {
+					this.getList(this.currentFolder.id);
+				},
+				error: error => {
+					console.error('Delete failed:', error);
+				},
+			});
+		}
+	}
+
+	onDownloadFile(file: FileItem) {
+		this.fileManagerService.downloadFile(file.id).subscribe(blob => {
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = file.name;
+			link.click();
+			console.log('link', link);
+			URL.revokeObjectURL(url);
+		});
+	}
+
+	createFolder() {
+		if (this.newFolderName) {
+			this.fileManagerService
+				.createFolder(this.newFolderName, this.currentFolder?.id)
+				.subscribe(() => {
+					this.getList(this.currentFolder.id);
+					this.cancelNewFolder();
+				});
+		}
+	}
+
+	cancelNewFolder() {
+		this.showNewFolderInput = false;
+		this.newFolderName = '';
+	}
+
+	onClickFolder(file: FileItem) {
+		if (file.folder) {
+			const parent = file.parentId ?? 'root';
+
+			this.currentFolder = {
+				name: file.name,
+				parentId: parent,
+				id: file.id,
+			};
+		}
+	}
+
+	onPathChanged(folder: CurrentFolder | null) {
+		if (folder) {
+			this.getList(folder.id);
+		}
+	}
+
+	navigateToRoot() {
+		this.currentFolder = {
+			name: '',
+			parentId: 'root',
+			id: '',
+		};
+		this.getList('');
+	}
+
+	navigateToFolder(folder: CurrentFolder | null) {
+		if (folder) {
+			this.currentFolder = {
+				name: folder.name,
+				parentId: folder.parentId,
+				id: folder.id,
+			};
+			this.getList(folder.id);
+		}
+	}
+}