Feature: News editor

src/app/components/index.ts

@@ -12,3 +12,4 @@ export { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.com
 export { NavbarComponent } from './navigation/navbar/navbar.component';
 export { FooterComponent } from './navigation/footer/footer.component';
 export { UploadComponent } from './upload/upload.component';
+export { NewsCardComponent } from './news-card/news-card.component';

src/app/components/news-card/news-card.component.html

@@ -0,0 +1,27 @@
+@if (newsItem().imageUrl) {
+  <div class="image-wrapper">
+    <img [src]="newsItem().imageUrl" alt="{{ newsItem().title }}" />
+    @if (!newsItem().published && !isPreview()) {
+      <span class="unpublished-badge">{{ 'Unpublished' | translate }}</span>
+    }
+  </div>
+}
+@if (!newsItem().published && !newsItem().imageUrl && !isPreview()) {
+  <span class="unpublished-badge no-image">{{ 'Unpublished' | translate }}</span>
+}
+<h3>{{ newsItem().title }}</h3>
+<div class="content">
+  <p>{{ newsItem().content }}</p>
+</div>
+<small>{{ newsItem().date | date: 'mediumDate' }} </small>
+
+@if (showActions()) {
+  <div class="actions">
+    <button mat-icon-button (click)="onEdit($event)" matTooltip="Edit">
+      <mat-icon class="material-symbols-outlined">edit</mat-icon>
+    </button>
+    <button mat-icon-button (click)="onDelete($event)" matTooltip="Delete">
+      <mat-icon class="material-symbols-outlined">delete</mat-icon>
+    </button>
+  </div>
+}

src/app/components/news-card/news-card.component.scss

@@ -0,0 +1,135 @@
+:host {
+  display: block;
+
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  gap: 8px;
+  align-items: stretch;
+  padding: 24px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+  height: 420px;
+  position: relative;
+
+  p,
+  h3 {
+    margin: 0;
+  }
+  h3 {
+    margin-bottom: 8px;
+    color: var(--brand-color);
+  }
+  div.content {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    height: 144px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 32px;
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+    }
+  }
+  .image-wrapper {
+    position: relative;
+    width: calc(100% + 48px);
+    height: 164px;
+    margin-top: -24px;
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-bottom: 8px;
+    overflow: hidden;
+
+    .unpublished-badge {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      background: rgba(0, 0, 0, 0.65);
+      color: #fff;
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      z-index: 1;
+      pointer-events: none;
+    }
+  }
+
+  img {
+    width: calc(100% + 48px);
+    height: 164px;
+    object-fit: cover;
+    margin-top: -24px;
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-bottom: 8px;
+    border-bottom: solid 2px rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.05);
+    user-select: none;
+  }
+  .unpublished-badge.no-image {
+    display: inline-block;
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(4px);
+    color: #fff;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 14px;
+    width: fit-content;
+    pointer-events: none;
+  }
+
+  small {
+    margin-top: auto;
+    color: var(--small-gray);
+    text-align: end;
+  }
+  div.actions {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-color: white;
+    padding: 12px;
+    border-radius: 24px;
+
+    .mat-mdc-icon-button {
+      --mdc-icon-button-state-layer-size: 24px;
+      --mat-icon-button-state-layer-size: 24px;
+      --mat-icon-button-touch-target-size: 32px;
+      padding: 0;
+      .mat-icon {
+        font-size: 24px;
+        line-height: 24px;
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+  &:hover div.actions {
+    opacity: 1;
+  }
+
+  &.is-preview {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+  }
+}

src/app/components/news-card/news-card.component.ts

@@ -0,0 +1,41 @@
+import { Component, output, input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe } from 'src/app/pipes';
+import type { INewsItem } from '@kompakkt/common';
+
+@Component({
+  selector: 'app-news-card',
+  templateUrl: './news-card.component.html',
+  styleUrl: './news-card.component.scss',
+  imports: [DatePipe, MatIconModule, MatButtonModule, MatTooltipModule, TranslatePipe],
+  host: {
+    '[class.is-preview]': 'isPreview()',
+    '(click)': 'openLink(newsItem().link)',
+  },
+})
+export class NewsCardComponent {
+  newsItem = input.required<INewsItem>();
+  showActions = input<boolean>(false);
+  isPreview = input<boolean>(false);
+
+  edit = output<INewsItem>();
+  delete = output<INewsItem>();
+
+  openLink(url?: string) {
+    if (this.isPreview()) return;
+    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+  }
+
+  onEdit(event: Event) {
+    event.stopPropagation();
+    this.edit.emit(this.newsItem());
+  }
+
+  onDelete(event: Event) {
+    event.stopPropagation();
+    this.delete.emit(this.newsItem());
+  }
+}

src/app/dialogs/news-dialog/news-dialog.component.html

@@ -0,0 +1,96 @@
+<h2>
+  @if (existing) {
+    <span>{{ 'Edit news item' | translate }}</span>
+  } @else {
+    <span>{{ 'Create news item' | translate }}</span>
+  }
+  <button mat-icon-button mat-dialog-close>
+    <mat-icon class="material-symbols-outlined">close</mat-icon>
+  </button>
+</h2>
+
+<div class="dialog-content">
+  <div class="form-section">
+    <div class="form-field">
+      <label>{{ 'Title' | translate }}</label>
+      <input
+        type="text"
+        [formControl]="newsFormGroup.controls.title"
+        placeholder="News title"
+        maxlength="120"
+      />
+      @if (newsFormGroup.controls.title.touched && newsFormGroup.controls.title.invalid) {
+        <small class="error">{{ 'Title is required (min 3 characters)' | translate }}</small>
+      }
+    </div>
+
+    <div class="form-field">
+      <label>{{ 'Content' | translate }}</label>
+      <textarea
+        [formControl]="newsFormGroup.controls.content"
+        placeholder="News content (max 240 characters)"
+        maxlength="240"
+        rows="4"
+      ></textarea>
+      <small class="char-counter">{{ contentLength }} / {{ maxContentLength }}</small>
+      @if (newsFormGroup.controls.content.touched && newsFormGroup.controls.content.invalid) {
+        <small class="error">{{ 'Content is required (max 240 characters)' | translate }}</small>
+      }
+    </div>
+
+    <div class="form-field">
+      <label>{{ 'Link' | translate }}</label>
+      <input type="url" [formControl]="newsFormGroup.controls.link" placeholder="https://..." />
+    </div>
+
+    <div class="form-field">
+      <label>{{ 'Image' | translate }}</label>
+      <div class="image-input-row">
+        <input
+          type="url"
+          [formControl]="newsFormGroup.controls.imageUrl"
+          placeholder="Image URL or upload a file"
+        />
+        <input type="file" accept="image/*" (change)="onImageSelected($event)" hidden #fileInput />
+        <button
+          mat-stroked-button
+          type="button"
+          (click)="triggerFileInput()"
+          [disabled]="isUploading()"
+        >
+          @if (isUploading()) {
+            <mat-spinner diameter="20"></mat-spinner>
+          } @else {
+            <ng-container>
+              <mat-icon class="material-symbols-outlined">upload</mat-icon>
+              {{ 'Upload' | translate }}
+            </ng-container>
+          }
+        </button>
+        @if (imagePreviewUrl()) {
+          <button mat-icon-button type="button" (click)="clearImage()" matTooltip="Clear image">
+            <mat-icon class="material-symbols-outlined">clear</mat-icon>
+          </button>
+        }
+      </div>
+    </div>
+
+    <div class="form-field">
+      <mat-slide-toggle [formControl]="newsFormGroup.controls.published">
+        {{ 'Published' | translate }}
+      </mat-slide-toggle>
+    </div>
+  </div>
+
+  <div class="preview-section">
+    <h3>{{ 'Live preview' | translate }}</h3>
+    <app-news-card [newsItem]="previewItem()" [isPreview]="true" />
+  </div>
+</div>
+
+<div class="actions">
+  <button mat-stroked-button mat-dialog-close>{{ 'Cancel' | translate }}</button>
+  <button mat-flat-button (click)="save()" color="primary" [disabled]="newsFormGroup.invalid">
+    {{ 'Save' | translate }}
+  </button>
+</div>

src/app/dialogs/news-dialog/news-dialog.component.scss

@@ -0,0 +1,88 @@
+@use '../../styles/dialog.scss' as *;
+
+:host {
+  @include dialog-style();
+  min-width: min(720px, 95vw);
+}
+
+.dialog-content {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.form-section {
+  flex: 1 1 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.preview-section {
+  flex: 1 1 300px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    color: var(--brand-color);
+  }
+
+  app-news-card {
+    display: block;
+    max-width: 300px;
+  }
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  input,
+  textarea {
+    padding: 8px 12px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+
+    &:focus {
+      outline: none;
+      border-color: var(--brand-color);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  .char-counter {
+    font-size: 12px;
+    color: var(--small-gray);
+    text-align: right;
+  }
+
+  .error {
+    color: #f44336;
+    font-size: 12px;
+  }
+}
+
+.image-input-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  input {
+    flex: 1;
+  }
+
+  mat-spinner {
+    display: inline-block;
+  }
+}