🧹 refactor frontend FSD, design system, unified components and backend integration

frontend/package.json

@@ -29,17 +29,22 @@
     "@ngrx/store": "^21.1.0",
     "crypto": "^1.0.1",
     "express": "^5.2.1",
+    "flowbite": "^4.0.1",
     "jwt-decode": "^4.0.0",
     "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.4.0",
     "@playwright/test": "^1.59.1",
     "@types/node": "^22.14.0",
     "autoprefixer": "^10.4.27",
+    "autoprefixer": "^10.4.27",
     "flowbite": "^4.0.1",
     "jsdom": "^29.0.2",
     "postcss": "^8.5.9",
+    "tailwindcss": "^3.4.19",
+    "postcss": "^8.5.9",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.8.2",
     "vite": "^6.2.0",

frontend/src/entities/gallery/gallery.service.ts

@@ -4,6 +4,8 @@ import { Observable, tap } from "rxjs";
 import { Gallery } from "@shared/models";
 import { API_ENDPOINTS } from "@core/constants";
 
+import { API_ENDPOINTS } from "@core/constants";
+
 @Injectable({
   providedIn: "root",
 })

frontend/src/entities/user/auth.service.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { User, AuthResponse } from './model/user.model';
 import { jwtDecode } from 'jwt-decode';
+import { API_ENDPOINTS } from '@core/constants';
 
 @Injectable({
   providedIn: 'root'
@@ -25,13 +26,13 @@ export class AuthService {
   }
 
   login(credentials: any) {
-    return this.http.post<AuthResponse>('/auth/login', credentials).pipe(
+    return this.http.post<AuthResponse>(API_ENDPOINTS.AUTH.LOGIN, credentials).pipe(
       tap(response => this.setSession(response.access_token))
     );
   }
 
   register(data: any) {
-    return this.http.post<AuthResponse>('/auth/register', data).pipe(
+    return this.http.post<AuthResponse>(API_ENDPOINTS.AUTH.REGISTER, data).pipe(
       tap(response => this.setSession(response.access_token))
     );
   }

frontend/src/shared/ui/entity-card/entity-card.component.html

@@ -1,3 +1,12 @@
+<div class="bg-black-deep border border-primary-gold/20 rounded-lg overflow-hidden shadow-lg hover:shadow-primary-gold/20 transition-shadow duration-300 flex flex-col h-full group">
+  <div class="relative w-full h-64 overflow-hidden" *ngIf="imageUrl">
+      <img
+        [ngSrc]="imageUrl"
+        fill
+        [priority]="priority"
+        [alt]="title"
+        class="object-cover group-hover:scale-105 transition-transform duration-500"
+      >
 <div class="bg-[#0A0A0A] text-[#FDFBF7] border border-[#D4AF37] rounded-xl shadow-gold overflow-hidden transition-all duration-300 hover:shadow-gold-glow flex flex-col w-full h-full">
   <div class="relative w-full aspect-square sm:aspect-video md:aspect-[4/3] overflow-hidden" *ngIf="imageUrl">
       <img [ngSrc]="imageUrl" fill [priority]="true" [alt]="title" class="object-cover transition-transform duration-700 hover:scale-105">

frontend/src/shared/ui/entity-card/entity-card.component.scss

@@ -1,29 +0,0 @@
-.entity-card {
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  overflow: hidden;
-  margin: 10px;
-  display: flex;
-  flex-direction: column;
-
-  .image-container {
-      width: 100%;
-      height: 200px;
-      position: relative;
-      img {
-          object-fit: cover;
-      }
-  }
-
-  .content {
-      padding: 10px;
-      flex-grow: 1;
-  }
-
-  .actions {
-      padding: 10px;
-      display: flex;
-      justify-content: space-between;
-      background-color: #f9f9f9;
-  }
-}

frontend/src/shared/ui/entity-card/entity-card.component.ts

@@ -13,6 +13,7 @@ export class EntityCardComponent {
   @Input() imageUrlPath: string = 'image';
   @Input() titlePath: string = 'name';
   @Input() descriptionPath: string = 'description';
+  @Input() priority: boolean = false;
 
   @Output() edit = new EventEmitter<any>();
   @Output() delete = new EventEmitter<any>();

frontend/src/shared/ui/entity-list/entity-list.component.html

@@ -1,11 +1,13 @@
-<div class="entity-list">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
   <app-entity-card
-      *ngFor="let entity of entities"
+      *ngFor="let entity of entities; let i = index"
       [entity]="entity"
       [imageUrlPath]="imageUrlPath"
       [titlePath]="titlePath"
       [descriptionPath]="descriptionPath"
+      [priority]="i === 0"
       (edit)="onEdit($event)"
       (delete)="onDelete($event)"
+      class="h-full"
   ></app-entity-card>
 </div>

frontend/src/shared/ui/entity-list/entity-list.component.scss

@@ -1,5 +0,0 @@
-.entity-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-}

frontend/src/shared/ui/entity-list/entity-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { EntityCardComponent } from '../entity-card/entity-card.component';
+import { EntityCardComponent } from '@shared/ui/entity-card/entity-card.component';
 
 @Component({
   selector: 'app-entity-list',

frontend/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+    "./node_modules/flowbite/**/*.js"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          gold: '#D4AF37',
+        },
+        black: {
+          deep: '#0a0a0a'
+        }
+      },
+      fontFamily: {
+        sans: ['"Inter"', 'sans-serif'],
+        serif: ['"Playfair Display"', 'serif'],
+      }
+    },
+  },
+  plugins: [
+    require('flowbite/plugin')
+  ],
+}

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}