feat(frontend): ✨ add customizable project item wrapper with individu…

libs/feature/project-list/src/lib/customizable-project-item.component.html

@@ -0,0 +1,46 @@
+<div class="customizable-project-item-container">
+  @if (customizationStateService.isPanelShown()) {
+  <div
+    class="customization-panel"
+    role="toolbar"
+    aria-label="Project item customization"
+  >
+    <div class="top-project-group" aria-label="Top project toggle">
+      <mat-button-toggle-group
+        #topProjectGroup="matButtonToggleGroup"
+        [value]="effectiveIsTopProject()"
+        (change)="setIsTopProject(topProjectGroup.value)"
+      >
+        <mat-button-toggle data-top-project="false" [value]="false"
+          >Normal</mat-button-toggle
+        >
+        <mat-button-toggle data-top-project="true" [value]="true"
+          >Top</mat-button-toggle
+        >
+      </mat-button-toggle-group>
+    </div>
+
+    <div class="compact-group" aria-label="Compact toggle">
+      <mat-button-toggle-group
+        #compactGroup="matButtonToggleGroup"
+        [value]="effectiveCompact()"
+        (change)="setCompact(compactGroup.value)"
+      >
+        <mat-button-toggle data-compact="false" [value]="false"
+          >Full</mat-button-toggle
+        >
+        <mat-button-toggle data-compact="true" [value]="true"
+          >Compact</mat-button-toggle
+        >
+      </mat-button-toggle-group>
+    </div>
+  </div>
+  }
+
+  <lib-project-item
+    [project]="project()"
+    [isTopProject]="effectiveIsTopProject()"
+    [compact]="effectiveCompact()"
+    [printMode]="printMode()"
+  />
+</div>

libs/feature/project-list/src/lib/customizable-project-item.component.scss

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+}
+
+.customizable-project-item-container {
+  position: relative;
+}
+
+.customization-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+  border-radius: 100vh; // pill shape
+  background-color: white;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(:hover) .customization-panel {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.top-project-group,
+.compact-group {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}

libs/feature/project-list/src/lib/customizable-project-item.component.spec.ts

@@ -0,0 +1,142 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { CustomizationStateService } from '@portfolio/customization-state';
+import { Project } from '@portfolio/search-engine-domain';
+
+import { CustomizableProjectItemComponent } from './customizable-project-item.component';
+import { ProjectItemComponent } from './project-item.component';
+
+describe('CustomizableProjectItemComponent', () => {
+  let component: CustomizableProjectItemComponent;
+  let fixture: ComponentFixture<CustomizableProjectItemComponent>;
+
+  const mockProject: Project = {
+    id: 'test-project',
+    title: 'Test Project',
+    projectType: 'Web Application',
+    compactDescription: 'A test project for unit testing',
+    keyAchievements: 'Successfully implemented testing',
+    fullDescription: 'This is a full description of the test project',
+    features: ['Feature 1', 'Feature 2'],
+    highlights: ['Highlight 1', 'Highlight 2'],
+    technologies: {
+      fullMatches: ['Angular', 'TypeScript'],
+      partialMatches: [],
+      nonMatches: [],
+    },
+    role: 'Developer',
+    team: 'Development Team',
+    from: new Date(Date.UTC(2024, 0)),
+    fromText: '01/2024',
+    to: new Date(Date.UTC(2024, 11)),
+    toText: '12/2024',
+    duration: { years: 1 },
+    durationText: '1 year',
+    location: 'Remote',
+    workMode: 'Remote',
+    company: 'Test Company',
+    industry: 'Technology',
+    teamSize: 3,
+    engagementType: 'Client',
+    commercialContext: 'Paid',
+    usageScope: 'Public',
+    maturity: 'Production',
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomizableProjectItemComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: CustomizationStateService,
+          useValue: {
+            isPanelShown: signal(true),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CustomizableProjectItemComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('project', mockProject);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should pass default values 1:1 to wrapped project item', () => {
+    const wrapped = fixture.debugElement.query(
+      By.directive(ProjectItemComponent)
+    ).componentInstance as ProjectItemComponent;
+
+    expect(wrapped.project()).toEqual(mockProject);
+    expect(wrapped.isTopProject()).toBe(false);
+    expect(wrapped.compact()).toBe(false);
+    expect(wrapped.printMode()).toBe(false);
+  });
+
+  it('should pass all custom values 1:1 to wrapped project item', () => {
+    fixture.componentRef.setInput('isTopProject', true);
+    fixture.componentRef.setInput('compact', true);
+    fixture.componentRef.setInput('printMode', true);
+    fixture.detectChanges();
+
+    const wrapped = fixture.debugElement.query(
+      By.directive(ProjectItemComponent)
+    ).componentInstance as ProjectItemComponent;
+
+    expect(wrapped.isTopProject()).toBe(true);
+    expect(wrapped.compact()).toBe(true);
+    expect(wrapped.printMode()).toBe(true);
+  });
+
+  it('should override initial isTopProject and compact values through panel actions', () => {
+    fixture.componentRef.setInput('isTopProject', false);
+    fixture.componentRef.setInput('compact', false);
+    fixture.detectChanges();
+
+    clickTopProjectButton(true);
+    fixture.detectChanges();
+
+    clickCompactButton(true);
+    fixture.detectChanges();
+
+    const wrapped = fixture.debugElement.query(
+      By.directive(ProjectItemComponent)
+    ).componentInstance as ProjectItemComponent;
+
+    expect(wrapped.isTopProject()).toBe(true);
+    expect(wrapped.compact()).toBe(true);
+  });
+
+  function getTopProjectButton(value: boolean) {
+    return fixture.debugElement.query(
+      By.css(`mat-button-toggle[data-top-project="${value}"]`)
+    );
+  }
+
+  function clickTopProjectButton(value: boolean) {
+    const toggleButtonElement = getTopProjectButton(
+      value
+    ).nativeElement.querySelector('button') as HTMLButtonElement;
+    toggleButtonElement.click();
+  }
+
+  function getCompactButton(value: boolean) {
+    return fixture.debugElement.query(
+      By.css(`mat-button-toggle[data-compact="${value}"]`)
+    );
+  }
+
+  function clickCompactButton(value: boolean) {
+    const toggleButtonElement = getCompactButton(
+      value
+    ).nativeElement.querySelector('button') as HTMLButtonElement;
+    toggleButtonElement.click();
+  }
+});

libs/feature/project-list/src/lib/customizable-project-item.component.stories.ts

@@ -0,0 +1,120 @@
+import { signal } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { CustomizationStateService } from '@portfolio/customization-state';
+import { Project } from '@portfolio/search-engine-domain';
+import type { Meta, StoryObj } from '@storybook/angular';
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  moduleMetadata,
+} from '@storybook/angular';
+
+import { CustomizableProjectItemComponent } from './customizable-project-item.component';
+
+const meta: Meta<CustomizableProjectItemComponent> = {
+  title: 'Feature/Customizable Project Item',
+  component: CustomizableProjectItemComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [provideRouter([])],
+    }),
+    moduleMetadata({
+      providers: [
+        {
+          provide: CustomizationStateService,
+          useValue: {
+            isPanelShown: signal(true),
+          },
+        },
+      ],
+    }),
+    componentWrapperDecorator(
+      story =>
+        `<div style="background-color: #EEE; padding: 1.5rem">
+          <div style="background-color: white">
+            ${story}
+          </div>
+        </div>`
+    ),
+  ],
+  argTypes: {
+    project: {
+      control: 'object',
+      table: {
+        type: { summary: 'Project' },
+      },
+    },
+    isTopProject: { control: 'boolean' },
+    compact: { control: 'boolean' },
+    printMode: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CustomizableProjectItemComponent>;
+
+const mockProject: Project = {
+  title: 'Portfolio Website Development',
+  projectType: 'Web Application',
+  compactDescription:
+    'Modern Angular portfolio showcasing professional experience and skills.',
+  keyAchievements:
+    'Built responsive design with TypeScript and implemented advanced filtering.',
+  fullDescription:
+    'Developed a comprehensive portfolio website using Angular 18 with a focus on modern web standards, accessibility, and performance. The project features a component-based architecture with reusable UI elements and implements advanced filtering capabilities for project browsing.',
+  features: [
+    'Responsive design with Angular Material',
+    'TypeScript implementation',
+    'Component-based architecture',
+    'Advanced project filtering',
+    'SEO optimization',
+    'Performance monitoring',
+  ],
+  highlights: [
+    'Achieved 95+ Lighthouse performance score',
+    'Implemented accessibility standards (WCAG 2.1)',
+    'Built reusable component library',
+    'Integrated automated testing suite',
+  ],
+  technologies: {
+    fullMatches: ['Angular', 'TypeScript'],
+    partialMatches: ['Jest', 'SCSS', 'RxJS'],
+    nonMatches: ['Nx', 'Mono Repo', 'Angular Material'],
+  },
+  role: 'Full-Stack Developer',
+  team: 'Solo Project',
+  fromText: '01/2024',
+  toText: 'Present',
+  durationText: '2+ years',
+  location: 'Berlin, Germany',
+  workMode: 'Remote',
+  company: 'Personal Project',
+  industry: 'Technology',
+} as Partial<Project> as Project;
+
+export const Default: Story = {
+  args: {
+    project: mockProject,
+    isTopProject: false,
+    compact: false,
+    printMode: false,
+  },
+};
+
+export const AsTopProject: Story = {
+  args: {
+    project: mockProject,
+    isTopProject: true,
+    printMode: false,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    project: mockProject,
+    isTopProject: false,
+    compact: true,
+    printMode: false,
+  },
+};

libs/feature/project-list/src/lib/customizable-project-item.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { CustomizationStateService } from '@portfolio/customization-state';
+import { Project } from '@portfolio/search-engine-domain';
+
+import { ProjectItemComponent } from './project-item.component';
+
+@Component({
+  selector: 'lib-customizable-project-item',
+  imports: [CommonModule, MatButtonToggleModule, ProjectItemComponent],
+  templateUrl: './customizable-project-item.component.html',
+  styleUrl: './customizable-project-item.component.scss',
+})
+export class CustomizableProjectItemComponent {
+  protected readonly customizationStateService = inject(
+    CustomizationStateService
+  );
+
+  project = input.required<Project>();
+  isTopProject = input<boolean>(false);
+  compact = input<boolean>(false);
+  printMode = input<boolean>(false);
+
+  private readonly customIsTopProject = signal<boolean | null>(null);
+  private readonly customCompact = signal<boolean | null>(null);
+
+  readonly effectiveIsTopProject = computed(
+    () => this.customIsTopProject() ?? this.isTopProject()
+  );
+  readonly effectiveCompact = computed(
+    () => this.customCompact() ?? this.compact()
+  );
+
+  protected setIsTopProject(isTopProject: boolean): void {
+    this.customIsTopProject.set(isTopProject);
+  }
+
+  protected setCompact(compact: boolean): void {
+    this.customCompact.set(compact);
+  }
+}